I talked a lot about skeleton or blank themes for WordPress. This is about creating a theme from that, understanding the template hierarchy and template tags.

1. MAKE WORDPRESS THEMES
a how-to guide on tools and tricks
TampaBayWP.com
Thursday, March 14, 13

2. Alison Foxall
• IADT Alumni
• Designer and Partner at Gobble Logic
• Working with WordPress for last 7 years
• Aspiring Vegan
Thursday, March 14, 13

3. 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

4. Understanding Templates
header.php index.php footer.php
Fun Page The User Sees
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.
Thursday, March 14, 13

5. 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

6. Template Hierarchy
Page (a page you made in the WordPress
dashboard)
1. custom_template.php
2. page-{slug}.php
3. page-{id}.php
4. page.php
5. index.php
http://codex.wordpress.org/Template_Hierarchy
Thursday, March 14, 13

7. http://digwp.com/2010/09/wordpress-3-template-hierarchy/
Thursday, March 14, 13

8. 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

9. Template Tags
Make 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

10. The Loop
A lot of template tags are required to work in what is called “The
Loop”
Thursday, March 14, 13

11. Template Tags
;
Thursday, March 14, 13

12. 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

13. Thursday, March 14, 13

14. DEMO
down the rabbit hole
Thursday, March 14, 13

15. THANK YOU!
alisonfoxall.com // @alisonmf
Thursday, March 14, 13