Upload
alison-foxall
View
585
Download
3
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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