Better WordPress Custom Coding – custom functions/css file

The single biggest issue associated with upgrading WordPress and/or your theme is that it can potentially break or delete custom code you’ve written into your functions.php file and css files. In fact, the single biggest advantage of the Thesis theme is that virtually no coding is ever necessary inside the WordPress core.

Note: Consider this concept to be retired. A far more robust way of maintaining our shortcodes and custom functions is via a plugin. See this post for more information.

Although I use thesis on a few blogs (and I’m an affiliate) I don’t actively promote its use. Why? I feel it presents more challenges that it solves – with the main disadvantage being that it requires a knowledge of css beyond what what most people are prepared to learn. It detracts from the primary focus of your blog – content. Despite the active community and excellent forums, I believe its advantages don’t compare favourably against a well-coded and functional theme for your entry level blogger.

For those of you that don’t use Thesis, and this is most of us, there are ways of adopting some of the lessons learned from the platform; this has to do with how we reference our custom functions or css. By creating a separate file for our functions and css code, we can easily upgrade without having to endure the painstaking task of making sure we migrate all the important code into the upgraded package.

It’s good practice to keep all your custom files in the one single folder. In my case, I’ll create a folder called custom_files. This should be created in our theme’s root directory (the same directory with our functions.php, index.php file and others). We now create a file called my_functions.php (with the opening PHP tags) and move it into our newly created folder.

The my_functions.php file we’ve just created has to be referenced by your functions file, so open up your theme’s functions.php file and paste the following into the top line. It can be posted anywhere, but for the sake of cleanliness we’ll keep it at the top of the page.

include_once (TEMPLATEPATH . '/custom_files/my_functions.php');

It will look like this:

Now you have your own custom functions file that you can easily migrate when you perform a theme upgrade or if you choose to move your custom code into another WordPress blog. Whenever you have custom code, paste it into this file.

If you would like to add a custom css file for all your styling changes (and you should!), why not create a custom function to call your own css code from within our newly created my_functions.php file? The advantage of this is that you will only need to update only the functions.php file to effect all your changes. You won’t have to mess around with your CSS templates at all.

function wp_custom_css() {
	$my_theme_path = get_bloginfo('template_directory') . '/custom_files';
	echo "<link rel=\"stylesheet\" href=\"$my_theme_path/my_css.css\" type=\"text/css\">";
}
add_action('wp_head','wp_custom_css');

If you wanted to be really funky about things, you could also create a my_shortcode.php file to keep all your treasured shortcode separate from your functions. It’s not really necessary, but if you had a lot of custom code, it may come in handy.

I’ve included a downloadable zip file. In this is a directory, a functions file and a css file. All you’ll have to do to get it working is drop the working folder into your theme’s ‘root’ and paste the single line of code from above into your theme’s functions.php file. In this sample my_functions.php file is the mandatory function to call your custom css file and a couple of shortcode examples.

You should always avoid altering your core WordPress and theme files where possible. What I’ve described will bring you one step close to accomplishing this.

First Name:
Your Email Address:
 




Download: Custom function and css files
Description: Custom function and css files
Author:Marty
Category: WordPress
Date: December 5, 2010



If you liked this article, you may also like:

  1. A Better Way of Coding Custom Functions and CSS: A Shortcode Plugin.
  2. Create a WordPress Author Bio with Custom Social Links
  3. Display Testimonials or Quotes from an XML File with WordPress Shortcode
  4. Thesis and Yet Another Featured Posts Plugin (YAFPP)
  5. Exclude posts from WordPress blog or RSS feed based on a tag
About Marty

is a passionate web developer from Sydney, Australia. He owns about 600 websites and makes a healthy living from working the web. As a day job, he works as a pilot for an international airline. Follow Marty on Twitter or Google+.

Comments

  1. Thank you, been searching for this post for hours! Thesis has some great features but is definitely not the be all end all that it claims to be, it needs some additional SEO plugins to function correctly. I recommend yoast’s meta_robots plugin, it’s greatly increased organic search results on all blogs I’ve submitted it on!

  2. kneecoe says:

    dude you’re THE MAN

  3. Consider this concept to be retired. A far more robust way of maintaining our shortcodes and custom functions is via a plugin. See this post for more information.

Trackbacks

  1. […] Some time back I wrote a blog titled, “Better WordPress Custom Coding – custom functions/css file“. At the time, I was using the Thesis framework (which I really don’t like at all now, […]

Please leave a comment or question!

*