WordPress is the most popular, open-source content management system. Understanding how it works and how it differs from a static HTML site will help you create websites that are easy to update and improve.
1. Dharma Kelleher
Kelleher Web Design
www.kelleherwebdesign.com
2. What is WordPress?
We’re talking WordPress.org not WordPress.com
WordPress is more than a blog. It’s a Content
Management System (CMS).
Allow for sites to be easily updated without getting
into the code
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
3. What is a WordPress Theme?
Provides styling and functionality to a WordPress-
driven website – like clothes to a body.
Some themes are free, others cost money; the best
ones are custom-designed for your website.
I’m here to familiarize you with themes so you can
customize your site.
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
4. WTH? Where’s the HTML?
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
5. WTH? Where’s the HTML?
Static sites are built with HTML (not easily updated)
WordPress is built mostly with PHP templates (which
contain some HTML) connected to a MySQL
database
The database stores info on posts, page content,
settings, etc. PHP makes calls to the database.
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
6. WTH? Where’s the HTML?
PHP:
Is more modular
Uses less code
Makes it easier to add and update content
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
7. index.php
This is one of the two required template files for a WP
theme (not required for a child theme).
Usually used as main blog page.
The core of index.php (and many other template files)
is the Loop, which pulls in post or page content.
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
8. index.php
Usually pulls in the header.php file
Often pulls in footer.php file
May also pull in sidebar(s) and other include files
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
9. style.css
The other required file for a WP theme (only one
required for a child theme)
CSS = Cascading StyleSheets
Controls size, position and style of elements
In WP, gives theme name, version, description,
author, tags, etc.
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
10. style.css
Reset CSS helps make browsers consistent
@media queries create special CSS for responsive
width (e.g. phones, tablets)
Firebug (Firefox plugin) is great way to test CSS
changes in the browser.
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
11. Other Blog-Related Template Files
single.php – individual blog post page
category.php – lists blog posts in a single category
archive.php – lists blog post for a given time period
loop.php – some themes have separate file for the
Loop
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
12. Non-Blog Template Files
page.php – used for static (non-blog) pages
front-page.php – used for the static home page
404.php – for when a page can’t be found
functions.php – adds additional functionality and
customization
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
13. Non-Blog Template Files
Other page template files
Additional sidebars, footers, etc.
Include files (nav.php, meta.php, search.php, theme
options, additional stylesheets)
Custom post types
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
15. Tools I Like to Use
Notepad++ – text editor
Photoshop – graphics design
Filezilla – file transfer (ftp)
Firebug – debugging code in Firefox
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
16. Resources for Learning
WordPress Codex (codex.wordpress.org)
W3 Schools (w3schools.com)
WP Tuts (wp.tutsplus.com)
Stack Overflow (stackoverflow.com)
17. West Valley WordPress Group
Coming Soon! Here at Gangplank Avondale
www.meetup.com/West-Valley-WordPress-Users/
Open to all skill levels!!!
Dharma Kelleher, Lisa Faiss and Cody Landefeld to
facilitate
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
18. Your Freebie!
Create your own theme built on Dharmania
Theme Options and Responsive Width
Upload into your themes folder
www.kelleherwebdesign.com/free-stuff/
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
19. Please Stalk Me!
My Website – www.kelleherwebdesign.com
Follow me on Facebook, Twitter, LinkedIn and
Google+ (links are on my website)
Punk the Web (my blog) – Great articles on design
and marketing. Subscribe or else!
Email: dharma@kelleherwebdesign.com
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com
20. Any Questions?
Dharma Kelleher - Kelleher Web Design
www.kelleherwebdesign.com