anatomy of a wordpress theme
DESCRIPTION
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.TRANSCRIPT
Dharma KelleherKelleher Web Design
www.kelleherwebdesign.com
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
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
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 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
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
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
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
style.cssThe 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
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
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
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
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 typesDharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
Non-PHP Template Files
screenshot.png
favicon.ico
image files (png, jpg, gif)
javascript
Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
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
Resources for Learning
WordPress Codex (codex.wordpress.org)
W3 Schools (w3schools.com)
WP Tuts (wp.tutsplus.com)
Stack Overflow (stackoverflow.com)
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
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
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: [email protected]
Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
Any Questions?
Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com