anatomy of a wordpress theme

Dharma KelleherKelleher 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 www.kelleherwebdesign.com

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

WTH? Where’s the HTML?

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

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

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

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

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

style.cssThe 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

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

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

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

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 typesDharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Non-PHP Template Files

screenshot.png

favicon.ico

image files (png, jpg, gif)

javascript

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

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

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

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

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

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

Any Questions?

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com