A little over a month ago (what can I say? it’s been a busy month) I attended the WordPress Austin Meetup at Posh Co-Working Lounge. Corey Ellis gave a presentation on basic WordPress Theme Anatomy. It was a helpful overview to understanding what a WordPress theme is made of & how it all comes together into one working unit. If you’re so inclined you can check out his presentation slides here. So without further delay, here are my notes:
3 Main Components | The Core of Any WordPress Theme
- index.php: You can create an entire WordPress theme with just this one page, but, it would be bulky/cumbersome to edit. That’s why you see footer.php, header.php, content.php, etc.
- styles.css : The only thing required in the comments area is the theme name, the rest helps folks know more about/ find your theme. It won’t do anything at that point, but your theme will be a choice for folks. Once you add the CSS, it of course, will make your site look lovely.
- functions.php : Makes the theme function.
Content – what goes in the middle of your WordPress theme- comments, sidebar, etc.
Other Good Bits to Know About
- language attributes (in php) tells WordPress what language the site is in.
- <meta name=”viewport” content=”width-device-width” /> indicates a responsive site.
- <title> how title of site appears on the top bar of browser.
- <body class> body_class : adds classes to the body. WordPress codex breaks down the various body classes or you can also create a custom one.
- archive: something that’s an aggregator. The home page could be classified as an archive page but doesn’t use the archive.php file (i.e. homepage shows the latest 10 posts) Its an archive of posts but doesn’t use the archives.php.
Extremely Helpful Resources
- Template Hierachy Chart – Memorize this!
- Yoast the anatomy of a WP theme – Read this from top to bottom & back again.
Q&A Session with Corey Ellis & Nick Batik
Q: Everything could be put into index.php but the order you put everything in affects loading speeds, could you explain how that works?
A: HTML & the head of your site ( not visible to Front End user) comes before the body (FE user sees whats in the body). There are two massively important functions in a WordPress theme: WP_head & WP_footer. Developers hook up their functions to these two areas; where they hook it depends on how important it is. Corey puts most stuff in the footer. If you have script in the head, the machine has to stop, look at script, read it, then go back to what’s it doing. CSS is faster than JavaScript, so Corey wants all CSS to load prior to the functionality loading. WP head always has to be right before the </head> tag & wp footer always has to be right before the </body> tag. Language settings go in the head.
One thing you typically see in the head file is the navigation, though it could be elsewhere like the sidebar, etc.
- wp_nav_menu — the function that says go find the menu & output its stuff. This contains two important pieces : register_nav_menu ( the theme location/description) & unregister_nav_menu (Unregisters a custom nav menu for a theme location.)
- functions.php loads prior to the head, if there is no functions.php, index.php loads first.
As mentioned in the template hierarchy chart (linked above) index.php is the fall back on doc; the same as index.html is for an html site.
Q: What does a hook look like?
A: In functions.php , whether plugin is loaded in header/footer is determined by plugin. You can change the plugin, but be careful when updating the plugins as it may override your changes.
Q: What’s a hook?
A: The way you put actions in themes is called a hook. You have to embed the hook, tell WordPress where to put the thing you’re trying to do. The loop is the function in WordPress that goes & gets the stuff out of the database & by what you tell it to do , it displays it on the front page.
Q: What’s a good way to reverse engineer a theme you did not design?
A: Start by backing up. Use Firebug, find the section you are wanting to fix. Search for that class or id (in Coda) so you can find the proper file to edit.
Q: You were talking about the importance of the loop, is that any different than script? Why did you make a point to talk about the loop instead of other scripting stuff?
A: Because the loop is what controls everything in the middle.
Q: How do you style the backend of a WordPress site?
A: Google WordPress admin themes. If you want a style to be on the admin, check the codex…you can stick it in your functions file instead of via a plugin.
A Little Glimpse into Corey’s Work Process
When Corey first began building sites he used a plugin which converted PSD wireframes to WordPress themes. He declined to give us the name of the plugin, as the code is not the cleanest in the world, to say the least. Nowadays, Corey starts with a custom created base WordPress template & customizes it per client. Other folks use frameworks like Genesis. If you are looking to develop a theme for the first time the best thing to do is to take the latest WordPress theme & break it apart as WordPress uses best practices.
That wraps it up for my notes from the meetup. There was a lot of good information crammed into a short time period, so I hope I didn’t cause your brain to explode or anything like that.
Leave a Reply