Make WordPress Themes

MAKE WORDPRESS THEMESa how-to guide on tools and tricks

TampaBayWP.com

Thursday, March 14, 13

Alison Foxall

• IADT Alumni

• Designer and Partner at Gobble Logic

• Working with WordPress for last 7 years

• Aspiring Vegan

Thursday, March 14, 13

Assumed Knowledge

Knowledge of Photoshop or other image editing tool

How to install a WordPress website and administer it (add pages, posts, etc)

Knowledge of HTML, CSS, and general best practices of front-end web development

Thursday, March 14, 13

Understanding Templates

A page in WordPress is actually several pages in your theme directory working together to display one single page to you.

That page will consist of a header and footer file, along with a file that will query the database for content such as a static page, a list of posts, or just one post.

Fun Page The User Sees

header.php index.php footer.php

Thursday, March 14, 13

Theme Directory & Files

Themes are located in ...wp-content/themes/

Every theme needs an index.php and style.css file

Theme files have specific names that WordPress looks for (e.g. page.php)

Thursday, March 14, 13

Template HierarchyPage (a page you made in the WordPress dashboard)

1. custom_template.php2. page-{slug}.php3. page-{id}.php4. page.php5. index.php

http://codex.wordpress.org/Template_Hierarchy

Thursday, March 14, 13

http://digwp.com/2010/09/wordpress-3-template-hierarchy/

Thursday, March 14, 13

These files all have a purpose and will be called up for their purpose as long as they are named correctly and they match up to your database!

Thursday, March 14, 13

Template TagsMake our designer life so much easier

We can output data without too much programming

We can even make custom fields in the dashboard to hold custom data in

THIS OUTPUTS THE CONTENT OF A POST

http://codex.wordpress.org/Template_Tags

Thursday, March 14, 13

The LoopA lot of template tags are required to work in what is called “The Loop”

Thursday, March 14, 13

Template Tags

;

Thursday, March 14, 13

General Process of Build

Plan out design (what areas are static, content, or dynamic?)

Identify pages that will be different and will require different wrappers, classes and styles (home, single post, page?)

Write your CSS or SCSS as you would normally in your style file of your theme.

Use a skeleton theme so you have some structure of WordPress. Change the HTML to fit your needs, and write your CSS

Thursday, March 14, 13

Thursday, March 14, 13

DEMOdown the rabbit hole

Thursday, March 14, 13

THANK YOU!alisonfoxall.com // @alisonmf

Thursday, March 14, 13