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
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. 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. 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
18. 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
20. 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)
21. 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)
22. 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
23. 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)
34. functions.php
• Used to enable theme features (menus, widget areas, featured images, etc.).
• Can be used to do anything a plugin can do.
35. 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
71. 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.)
72. Inside a Template File
• PHP
• HTML
• Sometimes JavaScript
• CSS is in a stylesheet not the templates
75. 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.
76. 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.
77. 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.