Dharma Kelleher      Kelleher Web Designwww.kelleherwebdesign.com
What is WordPress? We’re talking WordPress.org not WordPress.com WordPress is more than a blog. It’s a Content Managemen...
What is a WordPress Theme? Provides styling and functionality to a WordPress- driven website – like clothes to a body. S...
WTH? Where’s the HTML?        Dharma Kelleher - Kelleher Web Design        www.kelleherwebdesign.com
WTH? Where’s the HTML? Static sites are built with HTML (not easily updated) WordPress is built mostly with PHP template...
WTH? Where’s the HTML?PHP: Is more modular Uses less code Makes it easier to add and update content                   D...
index.php This is one of the two required template files for a WP theme (not required for a child theme). Usually used a...
index.php Usually pulls in the header.php file Often pulls in footer.php file May also pull in sidebar(s) and other inc...
style.css The other required file for a WP theme (only one required for a child theme) CSS = Cascading StyleSheets Cont...
style.css Reset CSS helps make browsers consistent @media queries create special CSS for responsive width (e.g. phones, ...
Other Blog-Related Template Files single.php – individual blog post page category.php – lists blog posts in a single cat...
Non-Blog Template Files page.php – used for static (non-blog) pages front-page.php – used for the static home page 404....
Non-Blog Template Files Other page template files Additional sidebars, footers, etc. Include files (nav.php, meta.php, ...
Non-PHP Template Files screenshot.png favicon.ico image files (png, jpg, gif) javascript                Dharma Kellehe...
Tools I Like to Use Notepad++ – text editor Photoshop – graphics design Filezilla – file transfer (ftp) Firebug – debu...
Resources for Learning WordPress Codex (codex.wordpress.org) W3 Schools (w3schools.com) WP Tuts (wp.tutsplus.com) Stac...
West Valley WordPress Group Coming Soon! Here at Gangplank Avondale www.meetup.com/West-Valley-WordPress-Users/ Open to...
Your Freebie! Create your own theme built on Dharmania Theme Options and Responsive Width Upload into your themes folde...
Please Stalk Me! My Website – www.kelleherwebdesign.com Follow me on Facebook, Twitter, LinkedIn and Google+ (links are ...
Any Questions?       Dharma Kelleher - Kelleher Web Design       www.kelleherwebdesign.com
Upcoming SlideShare
Loading in …5
×

Anatomy of a WordPress Theme

1,886 views
1,776 views

Published on

WordPress is the most popular, open-source content management system. Understanding how it works and how it differs from a static HTML site will help you create websites that are easy to update and improve.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,886
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Anatomy of a WordPress Theme

  1. 1. Dharma Kelleher Kelleher Web Designwww.kelleherwebdesign.com
  2. 2. What is WordPress? We’re talking WordPress.org not WordPress.com WordPress is more than a blog. It’s a Content Management System (CMS). Allow for sites to be easily updated without getting into the code Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  3. 3. What is a WordPress Theme? Provides styling and functionality to a WordPress- driven website – like clothes to a body. Some themes are free, others cost money; the best ones are custom-designed for your website. I’m here to familiarize you with themes so you can customize your site. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  4. 4. WTH? Where’s the HTML? Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  5. 5. WTH? Where’s the HTML? Static sites are built with HTML (not easily updated) WordPress is built mostly with PHP templates (which contain some HTML) connected to a MySQL database The database stores info on posts, page content, settings, etc. PHP makes calls to the database. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  6. 6. WTH? Where’s the HTML?PHP: Is more modular Uses less code Makes it easier to add and update content Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  7. 7. index.php This is one of the two required template files for a WP theme (not required for a child theme). Usually used as main blog page. The core of index.php (and many other template files) is the Loop, which pulls in post or page content. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  8. 8. index.php Usually pulls in the header.php file Often pulls in footer.php file May also pull in sidebar(s) and other include files Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  9. 9. style.css The other required file for a WP theme (only one required for a child theme) CSS = Cascading StyleSheets Controls size, position and style of elements In WP, gives theme name, version, description, author, tags, etc. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  10. 10. style.css Reset CSS helps make browsers consistent @media queries create special CSS for responsive width (e.g. phones, tablets) Firebug (Firefox plugin) is great way to test CSS changes in the browser. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  11. 11. Other Blog-Related Template Files single.php – individual blog post page category.php – lists blog posts in a single category archive.php – lists blog post for a given time period loop.php – some themes have separate file for the Loop Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  12. 12. Non-Blog Template Files page.php – used for static (non-blog) pages front-page.php – used for the static home page 404.php – for when a page can’t be found functions.php – adds additional functionality and customization Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  13. 13. Non-Blog Template Files Other page template files Additional sidebars, footers, etc. Include files (nav.php, meta.php, search.php, theme options, additional stylesheets) Custom post types Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  14. 14. Non-PHP Template Files screenshot.png favicon.ico image files (png, jpg, gif) javascript Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  15. 15. Tools I Like to Use Notepad++ – text editor Photoshop – graphics design Filezilla – file transfer (ftp) Firebug – debugging code in Firefox Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  16. 16. Resources for Learning WordPress Codex (codex.wordpress.org) W3 Schools (w3schools.com) WP Tuts (wp.tutsplus.com) Stack Overflow (stackoverflow.com)
  17. 17. West Valley WordPress Group Coming Soon! Here at Gangplank Avondale www.meetup.com/West-Valley-WordPress-Users/ Open to all skill levels!!! Dharma Kelleher, Lisa Faiss and Cody Landefeld to facilitate Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  18. 18. Your Freebie! Create your own theme built on Dharmania Theme Options and Responsive Width Upload into your themes folder www.kelleherwebdesign.com/free-stuff/ Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  19. 19. Please Stalk Me! My Website – www.kelleherwebdesign.com Follow me on Facebook, Twitter, LinkedIn and Google+ (links are on my website) Punk the Web (my blog) – Great articles on design and marketing. Subscribe or else! Email: dharma@kelleherwebdesign.com Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  20. 20. Any Questions? Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

×