Understand Child Themes, Hooks, Actions and Filters in Five Minutes

What on earth are they?

Example time. A theme you like uses <h2> tag for post titles. You hate that and want <h1> instead.

The old, boring way is you open the theme files, starting from index.php, changing all <h2> tag to <h1>, then moving to the other files: archives.php, tag.php, category.php, doing the same thing over and over again, hoping you don’t miss anything.

Gah!

That is not clever because a) it’s too much work, and b) when the theme is updated, you’re screwed.

Wouldn’t it be better if you could just a) write the change once, have it applied globally, while b) at the same time not modifying the theme’s code?

Yes. Yes of course. And you can do just that by mastering the art of child theming, Hooks, Actions and Filters.

Enter Child Theme

Child theme is a lazy developer’s best friend.

A child theme is everything its parent is, except for the changes you add that make it awesome-er.

When you use a child theme, WordPress will check whether it has the usual PHP files. You know, index.php, header.php, the likes. If your child theme has it, great, WordPress will happily use it. If not, WordPress will smile at it knowingly and use its parent’s files instead.

BAM! Now you understand how parent-child theme works in WordPress.

Every theme can be a parent theme, but some are especially kind and beneficial to their children. They are usually known as theme frameworks. Ever heard of them?

They make the best parents for various reasons (good coding practice, built-in SEO), but in this case it is because they have hooks aplenty.

Hooks, Filters, Actions!

Hooks are marked places on a theme. The start of the comment area. The post meta. And so on.

Actions and Filters are the things you can do at those places.

Actions do stuff. Like showing a picture of kitten after your post title. Filters specifically deals with modifying texts (or HTML, same thing). Words go into your Filter and come out differently. Profanities get Filtered into ****s. <h2>s to <h1>s.

Let’s repeat that.

Hooks: places. Actions: doing things. Filters: changing texts.

Theme frameworks are smart because they are made to be modified. Those clever guys and girls who wrote them know that you want to add stuff between your post title and content, that you want to change the wordings on your comment forms, so they add tons of useful hooks in their frameworks for you to use in your child theme.

Hooks are provided by the parent theme. Actions and Filters you write yourself in your child theme’s functions.php.

And that is all.

Recap

Think of an awesome theme to create. Or a neat feature to add. Use a theme framework as a parent. Create a child theme. Use parent’s Hooks to add Actions and Filters. Joy.

Further reading

Once you grasp the concept, visit these places to learn the technical sides.

How To Modify WordPress Themes The Smart Way by Ian Stewart. Explains all of these concepts with easy to follow examples.

Adding Custom WordPress Hooks by Benedict Eastaugh. For when you want to create your own theme framework.

Plugin API : Hooks, Actions and Filters at the WordPress Codex. Plugin? Yeah. Hooks, Actions and Filters were initially features that has to do with plugin creation.

Theme Options UI: Consistency Matters!

Just tweeted this:

Doing it right: #genesiswp ‘s theme options UI mimics WP’s look instead of having its own fancy UI.

Consistency Matters

A lot of you must have seen how various WordPress themes have different theme options UI design. Most of them opt for pretty looking options page with labels, inputs, buttons, icons, and forms that look wildly different from the rest of the Dashboard.

If your theme is like that, you’re doing it wrong.

Huh? Why?

Matt: Gravatars aren’t going to hurt your Google rankings

This site’s current design sucks when it comes to showcasing new comments, so in the meanwhile here’s Matt clarifying on a old post about whether Gravatar slows down page load speed and hurt search engine rankings:

…Gravatars (or any images) aren’t going to hurt you in the Google rankings or we would have seen a massive drop-off in traffic on WP.com.

True, because as far as I know page load speed isn’t taken into account yet. And when it is, Gravatars will be just one of the many other factors that influence load speed anyway.

A Collection of WordPress-based Short URLs

Nowadays pretty much everybody is using pretty permalinks while also using the much shorter url.com?p=page_id format for the short URL of the same post, usually on Twitter. You can also use the various URL shortening services, of course, but Zeldman’s article explains why it’s good to roll your own short URL:

Rolling your own mini-URLs lessens the chance that your carefully cultivated links will rot if the third-party URL shortening site goes down or goes out of business

This post will show you a few more unique keywords (not just “p”) that you can use to shorten your URL with WordPress. You don’t need to do anything to get these keywords to work; they’re available to any WordPress install and will still work regardless of your Permalinks setting.

p

Links to a certain Post / Page.

Usage: url.com/?p=(Post or Page’s ID)
Example: wplover.com?p=1426

m

Either links to Posts from an entire year or an entire month.

Usage:

  • To link to a certain month’s Posts: url.com/?p=(YYYYMM)
  • To link to a certain year’s Posts: url.com/?p=(YYYY)

Example:

  • wplover.com/?m=201001
  • wplover.com/?m=2010
  • cat

    Links to Posts from a certain category.

    Usage: url.com/?cat=(Category ID)
    Example: wplover.com?cat=3

    tag

    Links to Posts tagged with a certain tag. Note that you use slug instead of ID here.

    Usage: url.com/?tag=(Tag slug)
    Example: wplover.com?tag=awesome

    s

    Links to search results for your supplied keyword.

    Usage: url.com/?s=(Keyword)
    Example: wplover.com?s=design

    Any other short URL keyword I missed?

    This is a Post on a WordPress Design Blog that Talks about Super Mario Bros.

    Sounds silly, I know, but here’s a nice quote on “Great products are triumphs of taste” by 37signals:

    Want to build a great iPhone app? Go listen to Billie Holliday. Trying to design a piece of hardware? Visit a Frank Lloyd Wright house. Aiming to write great marketing copy? Read Aldous Huxley. Need a color scheme? Go to the museum and check out some Mark Rothko paintings.

    So. Super Mario Bros.

    Read more →

    Theme Developers, Learn to Steal the Right Way!

    I’ve talked about this on WPTavern before, but Leland’s tweet made me feel that we should talk about this more.

    Remember when LogoMaid ripped of Dan Cederholm’s logo? Everybody pretty much agreed that that was illegal. And so imagine my surprise knowing that there are WordPress themes that are direct copies of Twitter, of Facebook, of Basecamp, and what have you. Heck, we even have a theme describing itself as “The exact Facebook clone theme for WordPress” in the official Theme Directory. This I believe is a case worse than the LogoMaid issue.

    No clone themes, please.

    Please stop this. The freedom in GPL does not mean the freedom to steal copyrighted design. Stop making clones of popular websites and turning them into WordPress themes. It doesn’t matter if you release it only for personal use, or under GPL, if you code the CSS yourself, if you painstakingly recreate the graphic elements in Photoshop. It’s still, as Ryan Hellyer puts it, “illegal, immoral, and unethical.”

    Instead of doing that, go and read this article by Cameron Moll, “Good Designers Copy, Great Designers Steal“, and learn how to “steal” a design in a much better (and ethical) way. Learn what makes them work, and improve it:

    This article wouldn’t be complete without a warning to be careful when copying well-known sources. If I were to summarize this warning in one sentence, this would be my golden verbiage: copy the inspiration, not the outcome.

    Or teach us. Write an article on how you do that AJAX load more posts wizardry. Or how to make that rounded corner work on every browser. Show us how to recreate your favorite website’s cool feature in WordPress.

    Now that will be awesome.

    Update: Another discussion is up at Theme Lab, WordPress Clone Themes – Your Take?

    How Do You Keep Track of Theme Usage?

    A question: how do you guys keep track of sites that use your theme?

    I find that Google’s Webmaster Tools show links to my site, including those from the link on the footer area of my themes, but its update can be quite slow and incomplete.
    Sample of Google Webmaster Tools link to site area

    What about you guys?

    Page 1 of 512345

    Latest Links More →

    Classy Plugins

    Eric Mann uses classes in his non object-oriented WordPress code. Here’s why.

    Playing Nice with the “the_content” Filter

    This great article could be useful if for some reason you have a need to filter the_content in your theme.

    Google Goes After Links In WordPress Themes

    New post from the Search Engine Roundtable: Someone “…received a response from Google to a reconsideration request that the only way his site will be reincluded in Google is if he removes all or most of the links in those WordPress themes.” The problem is that those links are in the form of sponsored links on footer (a practice I saw a lot in the past, not so much in the present).

    I don’t think it will be easy, or even possible, to do what Google requested. If a theme contains an upgrade notification feature it might be possible to do, but even then the users might choose not to upgrade.

    Secondly, if this is true, I wonder whether Google differentiates between credit links (“Designed by…”) and sponsored links. I would say they should, but then again I’m not a SEO guy.

    Theme Options Gallery

    New favorite blog: Theme Options Gallery by Konstantin Kovshenin, discussing “the best (and the worst) theme options screens around”. Loving the in-depth article and discussions already available there.

    Dive into Responsive Prototyping with Foundation

    Pretty safe to say that if it shows up on A List Apart, it’s going to be the de facto standard. Time to learn some Foundation.

    Google HTML/CSS Style Guide

    Couple of days ago we got Starbucks’ style guide, and now here’s another by Google. I think the interesting thing is the rule to “\[o\]mit the protocol from embedded resources“. So instead of typing <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>, they recommend to type <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> instead (without the http part). Never heard of that before.

    “I Woke Up but My Server Wasn’t There”

    Robb Shecter’s WordPress site got popular overnight thanks to Reddit and went down immediately. The interesting aspect is that the site was new and it’s on a relatively high-powered server. The author then found that the theme he used in particular was doing too many (47!) server requests at a time, and the site ran along very well after switching back to Twenty Eleven.

    I think it’s an important read for any theme developers out there.

    Read the story here

    Modern Web Development – Part I: The Webkit Inspector

    A superbly detailed article, part one of a series about web development toolchain.

    Crayon Syntax Highlighter plugin

    I’ve always been on the hunt for that perfect syntax highlighter plugin. Currently I’m using WP-Syntax, which does its job very well. However I’ve just found this plugin called Crayon Syntax Highlighter, which could be a good contender for the best WordPress syntax highlighter plugin out there.

    It looks good, and I like the little toolbar on top of the code box, with the small icons. Additionally, it also offers a lot of customization options. Lastly, it seems to support the same pre tags to wrap the code, similar WP-Syntax, so if I do make the switch, my old codes will still be highlighted correctly.

    Starbucks Style Guide

    The Starbuck website has its own style guide, accessible for public. I think its a neat idea, wouldn’t it be cool if themes have their own style guide? Pretty sure it will be helpful both to users or developers alike, if time consuming to write.

    Also, I wonder what they use for the various toggles panel on the top right corner like on this page. It shows background, baseline, boxes, can be used to change windows size as well. Looks like it’s custom coded, imagine how super useful it can be if it’s a jQuery plugin.

    NHP Theme Options Framework

    I love theme options frameworks. And I want you guys to check this new framework called NHP. It passes my “does its UI look like the rest of WordPress enough?” test (screenshots here), it has tons of field types, and even offer validations, too.

    Can’t wait to test and probably use it too in my to-be-released theme hint hint

    What Dev4Press thinks WordPress needs…

    This post at Dev4Press outlines what MillaN, its author, thinks would be a necessary addition to WordPress.

    Based on the comments, it appears that a lot of people agree with this list. Some of the items mentioned can be achieved with plugins (e.g Tax Meta Class to add meta data to taxonomy items, Custom Post Types Relationships for, well, creating custom post type relationships), so expect there to be a bunch of debates about what should and shouldn’t go to the core.

    I like his list, but I disagree with his assessment that we don’t need new core themes. We do, especially to bring about the standard for how a theme options should be designed. This is the aspect that desperately needs to be standardized. Different theme companies and individual theme designers have their own idea of how the theme option UI should look, and it’s hurting the users.

    Upgrading from WordPress 1.5

    I recently spotted this interesting Ask Metafilter thread where user gd779 tries to find a way to upgrade his old, WordPress 1.5 install. One of the answer is pretty detailed:

    I think the right approach is going to be:

    1. Do a full backup of your WordPress files
    2. Do a full database backup (mysql dump using phpMyAdmin or similar)

    Then, from your 1.5.2 install:

    1. Upgrade to 2.0
    2. Upgrade to 2.5.1
    3. Upgrade to 3.0
    4. Upgrade to 3.3.1

    It is quite fascinating thinking about the solution to this. There’s an official Codex page called Updating WordPress, but it doesn’t seem to go that far back in time.

    Smashing Special: What’s Going On In The WordPress Economy?

    Siobhan McKeown wrote this awesome, birds-eye view of the whole WordPress economy. Make sure to read this two-part article so you know what’s up with WordPress and identify what opportunity lies ahead.

    I agree with Matt’s prediction on that article:

    I think the next big opportunity is around agencies and consulting—there will be five to six companies as large as Automattic, just providing high-end consulting and services to the large customers who are adopting WordPress en masse.

    Start with Part I of the article.

    Automatic responsive images for WordPress

    The one issue with creating responsive web design is in displaying images, especially getting the most appropriate size in a particular screen size. One solution for it is the Responsive-Enhance jQuery plugin. It works by loading small-sized images by default, then checks the screen size and loads the bigger version if necessary.

    According to its creator, Josh Emerson:

    This results in a faster perceived page load speed, but a slower actual speed. I’m happy with this solution as I care more about perceived speed than actual speed.

    This tutorial by Keir Whitaker takes the whole thing further by teaching us how to apply Responsive-Enhance in WordPress.

    The WordCamp Central Site Redesign

    The WordCamp Central has been redesigned, now sporting pleasant shades of blue. I particularly like the individual WordCamp page like this one for San Francisco, which features date, location, and archive links to past WordCamps there.

    A little peek under the hood shows that the site now uses a Twenty Ten child theme called “WordCamp Central 2012″. The site uses a plugin called WP Event Ticketing for ticketing purposes, and WP Super Cache for speed.