Make WordPress Themes


Published on

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.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Make WordPress Themes

  1. 1. MAKE WORDPRESS THEMES a how-to guide on tools and tricks TampaBayWP.comThursday, March 14, 13
  2. 2. Alison Foxall • IADT Alumni • Designer and Partner at Gobble Logic • Working with WordPress for last 7 years • Aspiring VeganThursday, March 14, 13
  3. 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 developmentThursday, March 14, 13
  4. 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. 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. 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, March 14, 13
  7. 7., March 14, 13
  8. 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. 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, March 14, 13
  10. 10. The Loop A lot of template tags are required to work in what is called “The Loop”Thursday, March 14, 13
  11. 11. Template Tags ;Thursday, March 14, 13
  12. 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 CSSThursday, March 14, 13
  13. 13. Thursday, March 14, 13
  14. 14. DEMO down the rabbit holeThursday, March 14, 13
  15. 15. THANK YOU! // @alisonmfThursday, March 14, 13