Your SlideShare is downloading. ×
0
WordPress Theme Mechanics
Because sometimes you need to look under the hood
Common Challenges
• Change fonts and typography? (font size, font color, font face, line spacing).
• Change the background...
In Today’s Webinar
• How WordPress works (conceptually).
• Understanding the WordPress template system.
• Customizing your...
My Assumptions
• You know a little about WordPress
• Adding posts and pages
• Installing and activating plugins and themes...
How WordPress Works
What are the limits of
WordPress Themes??
What are the limits of
HTML and CSS?
With just a little bit of JavaScript?
Anything is possible*
* when you know the secrets
of the WP theme system
(and HTML and CSS)
Theme Secrets Revealed
Inside the Theme Folder
Decoding the Template System
Home | About | Contact Us
Site Name
Site tagline
Privacy Policy * Terms of Service * Copyright
Post Title
Post Date * Post...
Every type of page
has a template
Header
Footer
Sidebar
Post Title
Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Donec ull...
Header
Footer
Sidebar
Post Title
Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Donec ull...
Header
Footer
Sidebar
Page Title
Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Donec ull...
Header
Footer
Sidebar
Post Title
Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Donec ull...
Getting More Specific
category.php → category-baking.php
page.php → page-about.php
single.php → single-products.php
Templates for Page Parts
Page Content
Header
Footer
Sidebar
Header
(aka header.php)
Page Content
Header
Footer
Sidebar
Footer
(aka footer.php)
Page Content
Header
Footer
Sidebar
Sidebar
(aka sidebar.php)
Content
(aka content.php, content-audio.php, etc.)
Page Content
Header
Footer
Sidebar
Template Master Guide
The Template Hierarchy Diagram (don’t let the name scare you)
h"p://codex.wordpress.org/Template_Hierarchy
h"p://wphierarchy.com/
What about those other
files & folders?
functions.php
• Used to enable theme features (menus, widget areas, featured images, etc.).
• Can be used to do anything a...
style.css
• The most important file in your theme.
• Controls all design elements:
• All type settings (style, size, color,...
The same WordPress
site without CSS...
Customizing Your Theme
Theme Customizer
The “No Code” Way to Customize
But what about bigger changes?
CSS
It’s code, but at least it’s not PHP
h1.site-­‐;tle	
  {
color:	
  #040393;
font-­‐size:	
  2em;
font-­‐style:	
  italic;
}
.site-­‐main	
  {
background-­‐color:	
  #011033;
}
div#navbar	
  {
	
  	
  	
  background:	
  #990000;
}
.nav-­‐menu	
  li	
  a	
  {
	
  	
  color:	
  #fff;
}
.site-­‐header	
  .home-­‐link	
  {
	
  	
  	
  min-­‐height:	
  150px;
}
How do I know what
CSS classes to use?
h"p://geOirebug.com
Before you change any
CSS or
a theme template
Start With a Child Theme
• A child theme protects your customizations.
• Child theme templates and styles override the par...
/wp-­‐content/themes/
/wp-­‐content/themes/
/wp-­‐content/themes/mychildtheme/
/wp-­‐content/themes/twentythirteen/style.css
/wp-­‐content/themes/mychildtheme/style.css
/wp-­‐content/themes/mychildtheme/style.css
/wp-­‐content/themes/mychildtheme/style.css
PHP
I said *almost* no PHP
When You Need to “Know” PHP
• To change some common content element on a page (“Leave a comment”)
• To add or remove conte...
Inside a Template File
• PHP
• HTML
• Sometimes JavaScript
• CSS is in a stylesheet not the templates
Ready to Dig Deeper Into
WordPress Themes?
Theme Mechanics Workshop
• Five weekly sessions on WordPress themes (60 minutes each).
• In-depth coverage of WordPress th...
Workshop Topics
• Setting up a WordPress theme lab on your PC or Mac.
• Working with the WordPress loop.
• Customizing the...
Prerequisites
• You should be familiar working with WordPress.
• You should know a bit about HTML and CSS.
• PHP knowledge...
More Information at:
http://workshop.wpapprentice.com
Code Editor Features
• Color code highlighting
• Line numbering
• Code completion
• Unicode support
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
WordPress Theme Mechanics
Upcoming SlideShare
Loading in...5
×

WordPress Theme Mechanics

257

Published on

An overview of how WordPress uses a template system to generate pages on your website. This session dives into the WordPress theme folder and explains what all those mysterious PHP files are. You also learn about the critical role CSS plays in theme design. And finally, you learn why child themes are so important and how to set one up.

This is foundational knowledge for anyone wanting to develop a new theme or customize an existing theme.

Slides from webinar presented by WPApprentice.com

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
257
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "WordPress Theme Mechanics"

  1. 1. WordPress Theme Mechanics Because sometimes you need to look under the hood
  2. 2. Common Challenges • Change fonts and typography? (font size, font color, font face, line spacing). • Change the background color on a page. • Customize the theme header (or footer). • Modify the site layout - change column widths, margins, padding.
  3. 3. In Today’s Webinar • How WordPress works (conceptually). • Understanding the WordPress template system. • Customizing your theme the CSS way. • How to make a child theme. • Almost no PHP.
  4. 4. My Assumptions • You know a little about WordPress • Adding posts and pages • Installing and activating plugins and themes • You have some very basic knowledge of common web terminology • Primarily HTML & CSS
  5. 5. How WordPress Works
  6. 6. What are the limits of WordPress Themes??
  7. 7. What are the limits of HTML and CSS? With just a little bit of JavaScript?
  8. 8. Anything is possible* * when you know the secrets of the WP theme system (and HTML and CSS)
  9. 9. Theme Secrets Revealed
  10. 10. Inside the Theme Folder
  11. 11. Decoding the Template System
  12. 12. Home | About | Contact Us Site Name Site tagline Privacy Policy * Terms of Service * Copyright Post Title Post Date * Post Author Dynamically aggregate resource-leveling architectures vis-a-vis cutting-edge systems. Enthusiastically drive parallel value rather than team building growth strategies. Interactively pursue functional meta- services rather than frictionless technology. Authoritatively strategize proactive vortals via cross-media web-readiness. Assertively communicate flexible benefits via magnetic deliverables. Synergistically customize team driven leadership for frictionless vortals. Interactively leverage other's process-centric collaboration and idea-sharing for excellent channels. Proactively unleash premium leadership skills before market-driven information. Seamlessly brand equity invested networks via front-end e-business. Seamlessly maintain economically sound schemas with 24/7 opportunities. Holisticly provide access to worldwide ideas without intuitive content. Dynamically myocardinate front-end benefits with clicks-and-mortar models. Conveniently pontificate professional technology and extensive systems. Energistically brand flexible customer service rather than prospective alignments. Collaboratively supply transparent ROI whereas scalable e-commerce. Proactively myocardinate fully tested meta-services without adaptive e-commerce. Efficiently leverage other's enabled total linkage with global channels. Filed Under: Category Name Templates are patterns for your website
  13. 13. Every type of page has a template
  14. 14. Header Footer Sidebar Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Home Page Lists posts from newest to oldest, blog style (aka index.php, home.php, front-page.php)
  15. 15. Header Footer Sidebar Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. September 1, 2013 * By Author Name File Under: Category Tag, Tag, Tag, Tag Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Leave a Comment: Post Displays a single post and comments (aka single.php)
  16. 16. Header Footer Sidebar Page Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. September 1, 2013 * By Author Name File Under: Category Tag, Tag, Tag, Tag Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Leave a Comment: Page Displays a single page (aka page.php*) * if page.php doesn’t exist,WordPress uses single.php for pages
  17. 17. Header Footer Sidebar Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Post Title Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod. Archive: Category, Tag, Date, or Author Archives (aka archive.php, category.php, tag.php, author.php)
  18. 18. Getting More Specific category.php → category-baking.php page.php → page-about.php single.php → single-products.php
  19. 19. Templates for Page Parts
  20. 20. Page Content Header Footer Sidebar Header (aka header.php)
  21. 21. Page Content Header Footer Sidebar Footer (aka footer.php)
  22. 22. Page Content Header Footer Sidebar Sidebar (aka sidebar.php)
  23. 23. Content (aka content.php, content-audio.php, etc.) Page Content Header Footer Sidebar
  24. 24. Template Master Guide The Template Hierarchy Diagram (don’t let the name scare you)
  25. 25. h"p://codex.wordpress.org/Template_Hierarchy
  26. 26. h"p://wphierarchy.com/
  27. 27. What about those other files & folders?
  28. 28. functions.php • Used to enable theme features (menus, widget areas, featured images, etc.). • Can be used to do anything a plugin can do.
  29. 29. style.css • The most important file in your theme. • Controls all design elements: • All type settings (style, size, color, line spacing, margins, etc.). • Positioning of layout, sidebars, header, footer, and everything else. • Anything you think of as “design” is probably controlled by CSS
  30. 30. The same WordPress site without CSS...
  31. 31. Customizing Your Theme
  32. 32. Theme Customizer The “No Code” Way to Customize
  33. 33. But what about bigger changes?
  34. 34. CSS It’s code, but at least it’s not PHP
  35. 35. h1.site-­‐;tle  { color:  #040393; font-­‐size:  2em; font-­‐style:  italic; }
  36. 36. .site-­‐main  { background-­‐color:  #011033; }
  37. 37. div#navbar  {      background:  #990000; } .nav-­‐menu  li  a  {    color:  #fff; }
  38. 38. .site-­‐header  .home-­‐link  {      min-­‐height:  150px; }
  39. 39. How do I know what CSS classes to use?
  40. 40. h"p://geOirebug.com
  41. 41. Before you change any CSS or a theme template
  42. 42. Start With a Child Theme • A child theme protects your customizations. • Child theme templates and styles override the parent theme.
  43. 43. /wp-­‐content/themes/
  44. 44. /wp-­‐content/themes/
  45. 45. /wp-­‐content/themes/mychildtheme/
  46. 46. /wp-­‐content/themes/twentythirteen/style.css
  47. 47. /wp-­‐content/themes/mychildtheme/style.css
  48. 48. /wp-­‐content/themes/mychildtheme/style.css
  49. 49. /wp-­‐content/themes/mychildtheme/style.css
  50. 50. PHP I said *almost* no PHP
  51. 51. When You Need to “Know” PHP • To change some common content element on a page (“Leave a comment”) • To add or remove content elements on a page (title, date, category, etc.) • Add a WordPress feature (menu, widget area, featured image, etc.)
  52. 52. Inside a Template File • PHP • HTML • Sometimes JavaScript • CSS is in a stylesheet not the templates
  53. 53. Ready to Dig Deeper Into WordPress Themes?
  54. 54. Theme Mechanics Workshop • Five weekly sessions on WordPress themes (60 minutes each). • In-depth coverage of WordPress theme topics. • Learn how to customize your themes. • Q&A with each session. • Replays available in workshop member portal. • Session content will be shaped by your feedback and needs.
  55. 55. Workshop Topics • Setting up a WordPress theme lab on your PC or Mac. • Working with the WordPress loop. • Customizing theme templates: add common features like menus, widget areas, custom headers and footers,WP customization features (with child themes, of course). • Creating custom page templates. • Framework and starter themes.What they are and when to use them. • Debugging. Fixing stuff when it breaks.
  56. 56. Prerequisites • You should be familiar working with WordPress. • You should know a bit about HTML and CSS. • PHP knowledge is not essential, but you should expect to learn some along the way.
  57. 57. More Information at: http://workshop.wpapprentice.com
  58. 58. Code Editor Features • Color code highlighting • Line numbering • Code completion • Unicode support
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×