Anatomy of a WordPress Theme

Dharma Kelleher
Kelleher Web Design
www.kelleherwebdesign.com

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

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.

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.


PHP:

 Is more modular

 Uses less code

 Makes it easier to add and update content


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.


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


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.

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.


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

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

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

Non-PHP Template Files
 screenshot.png

 favicon.ico

 image files (png, jpg, gif)

 javascript


Tools I Like to Use
 Notepad++ – text editor

 Photoshop – graphics design

 Filezilla – file transfer (ftp)

 Firebug – debugging code in Firefox


Resources for Learning
 WordPress Codex (codex.wordpress.org)

 W3 Schools (w3schools.com)

 WP Tuts (wp.tutsplus.com)

 Stack Overflow (stackoverflow.com)

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

Your Freebie!
 Create your own theme built on Dharmania

 Theme Options and Responsive Width

 Upload into your themes folder

 www.kelleherwebdesign.com/free-stuff/


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

Any Questions?


Anatomy of a WordPress Theme

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Recently uploaded

Recently uploaded (20)

Anatomy of a WordPress Theme