Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Anatomy of a WordPress Theme

1,959 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
  • Be the first to comment

  • Be the first to like this

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

×