For those of you who haven’t noticed, the latest version of the Nuts and Bolts Media website launched a little over a week ago. (If you’re a subscriber reading this offsite, you should stop by and check it out!) Since all our service offerings have changed, I decided it was time for a new look as well.
One of the worst parts of changing your site’s design is maintaining the functionality of your old theme. If your old theme used shortcodes, for example, you’ll probably want to include the same shortcodes in your new theme to avoid a bunch of weirdness in your pages and posts. But hunting down each of those items and figuring out how to include them in a different theme can be a total pain in the butt – I speak from experience! This is why it makes sense to create a custom functionality plugin for your site.
What is a custom functionality plugin?
If you use the Genesis framework, you’re probably intimately familiar with the use of functions and other code snippets to change things on your site. (This isn’t unique to Genesis by any means, but other themes and frameworks may not work exactly the same way.) If you want to add a widget area, change the wording of your comment form, add or remove post info, or any number of other tasks, you are likely editing your Genesis child theme’s functions.php file. Which is fabulous — until you want to switch to a different child theme or create a custom one.
A custom functionality plugin is simply a different way to store functions for your site. By putting them in a plugin instead of functions.php, you can change child themes without losing those pieces of code that make your site work the way you want. Editing functions.php is not a bad thing (assuming you are using a child theme, that is) but a plugin is just a better way of accomplishing the same goal.
When should I use a custom functionality plugin?
Basically, if a function is tied to the specific theme you’re using, it should go in functions.php. If it needs to stay on your site regardless of the theme, it should go in a plugin.
Things That Might Belong in a Plugin
- Widget areas that aren’t theme-specific
- A logo for the login page
- Changes to the comment form
- Page-specific sidebars
- Custom footer credits
- Anything that improves your general site and not your theme
Things That Might NOT Belong in a Plugin
- Theme-specific widget areas
- Functions to reposition navigation
- Functions to add or remove layout options
- Featured image sizes
- Custom header sizing
- Enqueued scripts just for your child theme
All that said, you may prefer to leave your functions.php untouched, and while there is no reason to do that (again, assuming you are using a child theme), a plugin is a good alternative.
Bonus! Ever have one of those moments when you’ve edited functions.php and your whole site breaks because of an error? By using a plugin, your site will keep working even if you make a mistake. If the plugin’s code causes a fatal error, the plugin will deactivate automatically and won’t reactivate until you’ve resolved the problem.
But too many plugins are bad!
Yes, we’ve been conditioned to believe that plugins are horrible. But when a plugin only contains functions, it is absolutely no different than adding the same snippet to functions.php.
Run a speed test on any page of this site and you should see load times under 1 second, assuming you’re in the US. Would you believe there are 36 active plugins as of this writing?
Out of all those plugins, 21 are functionality-related. They don’t load a bunch of scripts and stylesheets, thus allowing me to do the things I want without slowing down my site. It’s not the number of plugins that counts – it’s how they’re coded and what they do.
A real life example
As I mentioned, I recently built a new custom theme for the Nuts and Bolts website. In doing so, I had to be very careful to keep the functionality I wanted without bringing over anything I didn’t want or need.
Luckily, since I use a custom functionality plugin, I didn’t have to do anything other than alter the plugin’s stylesheet to make each element match the new color scheme. (You can put the CSS in your child theme’s stylesheet, but I prefer keeping it in the plugin to make things easy to find and tweak.)
Here are all the customizations stored in my own functionality plugin:
1. Enqueue scripts. There are a couple of scripts I use for all my sites, such as FontAwesome, so I enqueue them within the plugin.
2. Add a logo to my login page. Pretty self-explanatory. I want my logo on the login page instead of the default WordPress logo, so I changed it. If you’d like to do that on your own site, see this tutorial.
When changing child themes, be sure there’s a login-logo.png in your new theme’s /images/ directory or this will stop working. You could also put the logo image in a directory within the plugin, but I didn’t do that because it’s going to have to be swapped out either way.
3. Force IE not to use compatibility mode (props to @ChrisCree). Oh, Internet Explorer. Unfortunately it’s still a thing. And the newer versions use this stupid compatibility mode sometimes, which can make your site look crazy. So this code snippet will keep that from happening:
4. Customize the filler text on search forms. If you look at the top of my sidebar, you’ll see that my search form says “Search Nuts and Bolts Media” instead of the typical Genesis “Search This Site.”
5. Force layout on blog posts, archives, and search results. Since this is a business website, my default layout is set to full width, but I want a sidebar on certain parts, such as blog posts. This will always be true no matter what new theme I build for the site.
6. Automatically link Twitter names to Twitter URL. See above where I mentioned @ChrisCree – this snippet will automatically see @whoever in my content and convert it to a Twitter URL.
7. Use a custom avatar for comments. Instead of the goofy default avatar, I set a custom one to show when a commenter doesn’t have a Gravatar. Want to do the same? Check out this tutorial from @cdils.
8. Add Google+ comments before regular comments. I am a big fan of G+ and wanted to allow readers to comment on posts from their G+ accounts, but I didn’t want to remove WP comments completely. This article will show you how to do the same on your own site.
9. Various ad-related widget areas. I don’t display a ton of ads on this site, but I do have a few that I don’t want to lose when/if I redesign the site. Those widget areas are hooked and registered in my plugin to make sure they transfer over.
10. Related posts. I used a tutorial from Nick the Geek to code my own related posts, so of course I want to keep that regardless of the theme I’m using.
How to make your own custom functionality plugin
Creating a functionality plugin is surprisingly easy. Open a text editor and paste in the following, swapping out my information for your own:
Once you’ve done that, you can start pasting in your functions. Be careful not to include any opening PHP tags when you’re pasting snippets from other sites or tutorials, though you do need the PHP tag in the header of your file as shown above.
Save the file as functionality-plugin.php (or whatever you’d like), then create an empty folder on your computer named functionality-plugin (or whatever corresponds with the filename) and stick the file in there. Zip the folder and you’re ready to upload it to your WordPress site using the plugin uploader.
Need to add something to your plugin? You can now open it in Plugins > Editor within your dashboard, though I do not recommend editing anything other than a stylesheet within WordPress. Instead, get a good FTP client (I love Transmit for Mac) and you can pop in whenever you’d like to add, change, or remove functions.
Other uses for custom functionality plugins
While the plugin I’ve outlined here is a general catch-all for theme functions, sometimes it makes sense to use a custom plugin for one specific purpose.
For example, one of the designers I work with needed an easy way to add a banner to a to a client site, but only temporarily. (The ad was supposed to stay live for three weeks.) So I created a plugin called “Mid Post Ad” with the banner code and the appropriate Genesis hooks. Once the two weeks ended, the client simply deleted the plugin and no one had to edit any code.
Another example is this code from Brady Vercher that caches post thumbnails on archive pages. I could add that code to my general plugin and it would work fine, but I chose to leave it separate in case I ever have a problem with my thumbnails and need to troubleshoot.
More recently, a partner needed to maintain about 10 shortcodes that were hard-coded into a client’s old theme. So we made a plugin, included all the relevant styles and scripts, and the transition to the new theme was seamless – no abandoned or missing shortcodes hanging out in the client’s posts.
Sometimes a custom functionality plugin just makes life easier, whether you’re a dev, a designer, or just a blogger who wants to make some changes. If you customize websites on a regular basis, this definitely needs to be part of your repertoire.
Do you use a custom functionality plugin for your websites? What questions do you have about using a plugin versus editing functions.php?
Comments are now closed for this article.
Kingsley says
Thanks for this, i usually have problem with this when i use genesis child themes as i have to copy all the codes to the new theme.
Andrea Whitmer says
That has been a problem for me as well when I work with clients. I have a base functionality plugin for those sites with all the functions I use on every single site - it definitely helps!
Dave says
Andrea,
Very cool! I especially enjoyed the IE thing, and also the Twitter link one.
I have one of these, too, and it’s always growing. I segregate it to have only non-Genesis stuff so I can use it on any WP site. Then I have my collection of Genesis functions elsewhere.
I get asked for bizarro things, and as I look back through my functions collection, I grin at the silliness of some, and wonder if they’ll ever come back to life.
+1 on the shortcodes thing… just what Themeforest finally decided to force their new theme authors to do for portability.
Cheers, Dave
Andrea Whitmer says
Oooh, I didn’t know that about ThemeForest. That is FANTASTIC news! It’s about time they did something about the bloat of those themes.
I have a more generic plugin for sites I build that aren’t mine, which definitely comes in handy. On the rare occasions when I don’t have a snippet or function already, I realize how spoiled I’ve become to doing everything via functionality plugins.
Dave says
Andrea,
Yeah, it’s hip to hate on Themeforest, and I’ve certainly done it. I figure I’m entitled, after spelunking through much nasty code. 🙂
But they’re trying to clean up, although I imagine that they have to grandfather old themes in! So it will be a “process”.
I spoke too soon on the shortcodes issue - it’s discussed everywhere, but apparently is not a rule yet! But all my shortcodes are in a plugin: Ha! 🙂
Here’s their list if you want to check it out. I ran into it when a guy asked me if I’d build a Themeforest theme with him. It’s fairly ambitious.
Dave
Andrea Whitmer says
I’ll just stick to Genesis child themes! 😀
Kingsley says
tried it but did not work, some of my codes are generating errors
Andrea Whitmer says
You might try pasting your plugin’s contents into this PHP validator: http://phpcodechecker.com/
It will help you identify and fix the issues.
Rick says
Good post, good ideas. I know one of the things a few folks say in the responsive web design books is keep all your CSS in a single file; for my own reasons, I prefer to modify a child theme’s CSS via Jetpack or Genesis Extender and save a local copy. It may be an additional call to the server, but if I do it right it is a small file to fetch, and the child theme can get upgraded safely with no change in appearance. Functions get tweaked as the clients request anyway, but that would be a post on client management 🙂
Andrea Whitmer says
I think it all boils down to personal preference - Genesis child themes never *need* to be updated, but if you want to update them for whatever reason, it makes sense to keep your CSS changes elsewhere.
I edit the heck out of mine - there are often a lot of superfluous rules I can remove or combine, plus I’m a control freak - so for me it makes more sense to edit directly.
I’m actually a little mad that I did this now right before Genesis 2.1 is released, as I know I’m going to want to redo the site yet again on the new 1200px grid. Luckily there shouldn’t be too many differences between the current Sample child and the new one, so I’m hoping it will be an easy transition when the time comes!
Dave says
That’s interesting to hear about the 1200 grid. I look forward to seeing that. I may look at the beta if I have time. I’m guessing that this will not be a jarring change from the 1140 scenario.
I usually go with a separate CSS file if I’m modding a stock Genesis theme.
I did tag along with what they’re doing with newer “pro” themes, removing the REM equivalents.
Like you, I do a lot of mods to “my” basic theme. There have been a lot of positive changes to the Genesis Sample in the past year! And people on Github have been doing a lot of very interesting variations, with SASS and other goodies.
Andrea Whitmer says
SASS is on my “to-learn” list this year… So far I haven’t even had time to look but I’ve heard @rob_neu sing its praises for weeks. I’m always amazed by the things Genesis can do!
Kingsley says
Now its getting worst as i can even activate plugin because it keeps coming with that error
Andrea Whitmer says
Then there’s still an error in your code. Can you paste the contents of the plugin into PasteBin or a Gist or something and send me the link?
Liz Schneider says
Thanks for sharing this plugin, Andrea! I am definitely going to try it out.
I’m curious about your statement about “Since this is a business website, my default layout is set to full width”. I see a lot of themes with no sidebar on home page, but then sidebar used on inner pages. What do you mean about business sites and full-width design?
Andrea Whitmer says
Oops! That part might not have made much sense. I simply meant that I chose to use the full width layout by default - that way I don’t have to choose it for each individual page. Since only a few areas of my site need a sidebar, I preferred to code them in (making it automatic) while also keeping my pages full width automatically. Basically, I’m lazy and I don’t want to have to remember to choose layout when I add a page or post. 😀 Hopefully that makes sense!
Almazia says
Hi Andrea,
Just curious, if we can combine all function snippets into one custom functionality plugin; why do you have so many ( 21) functionality-related plugins?
I have read this post when it was first published (I didn’t really get it), and when I read it again just now it started to make sense to me lol
Thank you
Andrea Whitmer says
Hi Almazia,
It’s an organizational thing for me. For example, I have several custom post types that I registered via their own plugins - I don’t want those crammed into an overall functionality plugin because it makes things too cluttered. I also like to keep similar functions grouped together in case I need to deactivate certain ones for troubleshooting. You can definitely put everything together if you want, but it just depends on how your site is structured and how much hunting you want to do if you need to edit or change something.
Glenn Dixon says
Very informative, thanks! Just switched to Genesis and was certainly getting tired of pasting in the same bits of code to functions.php for every site I convert. I was overdue for a plugin like this.
Andrea Whitmer says
Definitely a huge timesaver! I install one on every site I build. 🙂
E.S. Ivy says
I had been wondering if I could make a “child theme of a child theme” so I wouldn’t lose changes if I updated the child theme. This sounds like a good alternative!
Andrea Whitmer says
Usually a child theme shouldn’t update - Genesis child themes don’t, anyway - since that would defeat the purpose of using one. Child themes should function as a skin to modify the parent so that the parent can be updated, but children don’t receive updates since that’s where you’re supposed to add your customizations.