There are more than 75 million websites running WordPress. More than 20,000 people make their living full time with WordPress in some way (designers, developers, consultants). In between the 20,000 and 75 million are a great number of people that maintain their own website with varying degrees of experience (and curiosity). Much like home improvement, web sites have spawned legions of “do it yourselfers” trying things on their own.
Today I’m going to show you some intermediate programming techniques for hacking and customizing your own WordPress theme. You would be surprised how many things you can do on your own, with just a little bit of programming knowledge. Do not be afraid to experiment with your theme – even if you don’t know any code at all. That’s how you learn.
Before You Begin
You can start customizing your own theme without a whole lot of experience, but you should at least be able to navigate your website in FTP. You could edit your functions.php file using your wp-admin backend by going to “appearance -> editor”, but that’s not always the best choice to avoid making big mistakes.
In FTP, find your /wp-content/themes/ folder, and download a copy of your theme folder to your local computer. Open the functions.php file in a text editor. Make a copy by doing save as “old-functions.php” (or something similar), close and then open functions.php again. Now you have a copy of your theme, and a copy of your original functions.php file – you’re ready to start editing!
I’ve been using WordPress a really long time (since 2004). In the early days, when it was just blogging software, you had a file called “hacks.php”. You would copy and paste PHP code you found online to do different things into that one single file.
This is in fact how plugins were born, it made more sense to have people author their own plugins than it did to copy and paste dozens of hacks into one file. And out of the sharing of hacks (and plugins), the plugin repository was born.
There are many PHP files in your WordPress theme. Most are for the display of pages, posts, and archives. One file that every theme has is functions.php. This file holds any code necessary to customize your theme. Much of it has to do with your theme, and display of content, but it could be for your admin or other areas.
You have the ability to add or edit custom PHP code in your functions.php file on your own – extending your theme and your website with new capabilities. If you haven’t done this before (or even if you have), you may have no idea what kind of possibilities are waiting for you.
Creating Your Own Shortcodes
Shortcodes have been around since WordPress 2.5. A shortcode is a custom function that you can use on page or post content to change the display or formatting. Shortcodes are always in sqaure brackets, like this:
If a page or post had images in the media library attached to the content, that shortcode would display them.
Sometimes shortcodes have attributes like this:
That shortcode tells which gallery to show, and what size.
Many plugins and themes come with their own shortcodes, and WordPress has some shortcodes of its own built in. What you might not know is that you can create your own shortcodes, quickly and easily, for all kinds of things.
Let’s start with the basic structure. If you wanted to print “Hello world” in your content you would copy and paste this function into your functions.php file and then put the shortcode [helloworld] into the content of any page or post (or widget):
That’s about as simple as it gets. A lot of times I’ll Google for some examples of what I want a shortcode to do, then I’ll use that as a base and build on it. In this tutorial, I found this code for building a sitemap:
Add that to your functions.php file, and use the shortcode
- Quick Fixes
- Tools & Essentials
- WordPress For Beginners
- Wordpress News
- WordPress Updates
Add that to your functions.php file, and use the shortcode [note] to display a message only for authors that can publish posts. Here’s another shortcode that will automatically create a meta description from the content of your page or post:
That shortcode is unusual because it’s designed to create the meta description in the head HTML section of the page. This means you can’t run the shortcode in the content area, instead you have to run it in your header.php file. You can actually run shortcodes “outside the loop” if you know how.
This is the PHP code to run a shortcode anywhere in a WordPress theme file:
If you’re interested in creating more shortcodes, and finding more unique uses of them – check out the shortcode category on wpsnipp.com. They have more than 50 free shortcodes for you to try.
Creating Widgitized Areas
Another thing you can do with your functions.php file is create widgitized areas. In your wp-admin under “appearance -> widgets”, you can drag and drop widgets into any widgitized area. Most themes have a widgitized area available for a page or post sidebar, and sometimes for the header and footer as well.
What you might not know is, you can create an unlimited amount of widgitized areas for your theme – and you can put them anywhere. You can have a widgitized area before or after your content, after the title or meta – anywhere. The contents of the widgets can be anything from text or images, to events, ads, social media links, anything you could use in a widget.
To create a widgitized area – first you have to register it in your functions.php by pasting this code:
This will create a new widgitized area in “appearance -> widgets” called “My New Widgets”.
Now you have to decide where you want the widgets to appear, and edit the appropriate template file. If you it’s posts, use single.php, if it’s pages use page.php. You could also create an area for categories or tag pages only (cat.php, tag.php), your 404 error page (404.php), search results page (search.php), or archives (archive.php, archives.php).
So, once you have the appropriate template file, add this code where you want the widgets to appear:
Adding widgetized areas was one of the first theme customizations I made on a regular basis. Every website has different needs, and it’s much easier to create the areas where drag and drop widgets allow swapping in and out of content, then to have to edit them code later on.
Adding WordPress Menus to Your Theme
Navigation menus were added to WordPress in version 3.0. If you visit “appearance -> menus” in your wp-admin you’ll have the ability to create custom menus, but your theme has to be setup to use them.
Menus are just like widgets – you can place them for display anywhere in your code. Most times menus are in the header or footer, but you could have a menu in a sidebar, before or after the content, around the title (like a constant breadcrumb), pretty much anywhere you want. Also, WordPress comes with a “custom menu” widget – which allows you to place any menu inside a widgetized area.
You have to register menus just like we added widgets, add this code to your functions.php file:
Next, like widgets, you have to add code in the template file you want the menu to appear in calling the wp_nav_menu function.
With no options, by default this is the code:
Add that where you want the menu to appear. Next, go to “appearance -> menus” and assign a menu to that area in the menu locations dropdown:
Using Actions and Filters
If what I’ve shown you so far made you curious, you’ll be amazed by the potential possibilities of actions and filters. WordPress comes with default actions built in, and you can add your own actions to functions.php as well. Actions are things you can perform as certain resources are loaded in a page. Filters help intercept and return data before it’s sent back to the web browser for display. You can add_action, add_filter, do_action, and apply_filters in your theme or functions.php code.
Let’s create an action first, so you can see how that works. First you have to create a function you can call in your action. A common page event is the loading of the header and footer, so let’s write an action that fires when the header is rendered using the wp_head action.
Copy and paste this code in your functions.php file:
next add this to your functions.php file:
Now when WordPress runs on your website, every page that loads will call “wp_head”, and then that fires it will also run the “insert_something” function that we added (making headings a specfic color and size). An action can do anything you can code – we just used CSS as a simple example.
Again, if you look at the official WordPress Codex action reference, you can write an action to run when any of those default actions fires.
Sometimes filters and actions are confused as the same thing. Actions run a function when a specific event happens. Filters filter things and sent the result back. Like actions, WordPress has built in filters, and you can write your own for the functions.php file as well.
Let’s write a quick filter, so you can see how that works…
copy and paste this function in your functions.php file:
Next, add this to your functions.php file:
So the function we created adds span tags around something with the class “custom-heading”. Then in add_filter we apply our new function “filter_headings” when “the_title” runs in our theme code. Actions are used to run a function when specific events fire. Filters are used to filter what’s returned (generally images or code) when specific events run. This filter will modify what’s returned for the title for any page within your WordPress website.
Digging around the posts tagged functions.php on wpsnipp.com – I often find actions and filters that give me new ideas.
Like this one to exclude pages from admin edit pages list. That’s an example of an action that only is used in the wp-admin.
I also like this filter to add a class to the first post in the loop. What a great way to style and emphasize the first post in a list of posts without doing some type of “featured post” plugin setup.
Time to Explore
We talked about using functions.php to register things (menus, widgets), and adding both filters and actions. Now it’s time to explore on your own. You can find a lot of code snippets and examples in the official WordPress Codex, as well as WPSnipp.com, Stackoverflow, and Stackexchange. These are all great places to not only get sample code, but to ask questions and get knowledgeable answers.
You can make your WordPress theme do just about anything you want, with some custom code. Use your functions.php file to start making that happen!