Step by Step – How to Combine CSS Stylesheets Into 1 File in WordPress

IMPORTANT! Editing the Source Code of a WordPress theme could break your site if it’s not done correctly. If you are NOT comfortable doing this, please check with a developer before continuing. SpeedRak Will Not Be Responsible for a Broken Site!

Before we get down and dirty learning how to combine CSS stylesheets into one file for your WordPress website, let me remind you of the “Performance Golden Rule” – Rule #1 – Reducing HTTP Requests.

If you would like to speed up your WordPress-based web site, start by removing each and every plugin and widget that is not absolutely crucial for your business, or whatever your site is used for.

Now, let’s be clear about something… in most cases, your CSS stylesheets will download in parallel, but there is a reason that I like to combine my CSS stylesheets into one or two files at the most… KEEP READING!

Rule #5 – Combining CSS Stylesheets (ONE Major Reason)

TO Reduce the Chances of Bottlenecks to the Point of Non-Existance!

The whole idea behind slow-loading websites usually comes down to some sort of bottleneck from an outside source, not necessarily the server that your site is housed on.

“The ‘Performance Golden Rule‘ reveals that only 10 to 20% of the end user’s response time involves retrieving the requested HTML document (the basic parts of the page, written information, etc.).”

“The remaining 80 to 90% of the time is spent making the additional HTTP requests for the components (the plugins and add-on’s that make the page more user-friendly and exciting), to include: images, scripts, stylesheets, Flash, etc.”

Getting rid of any outside sources will reduce the chances of being in the middle of a high-traffic bottleneck, unless the server that your site is on happens to be the trouble-maker.

Even though your CSS stylesheets may download in parallel, and the majority of them are on the server that houses your site, a few of them may need to gather information from an outside source… another server, other than your own.

You see… CSS Stylesheets, at this point of writing, are Render Blocking, meaning that the stylesheets will not allow other components (images, the writing on a page) to download until they are finished loading.

If you were to create 1 CSS stylesheet, and it was stored on the same server where your site is hosted, the chances of a delay for the stylesheet is minimal to non-existant.

How to Combine CSS Stylesheets Into 1 File

NOTE: To combine stylesheets, you must have access to your WordPress files, and have some familiarity for modifying existing files, and creating new ones.

Combining CSS stylesheets will be tedious and time consuming to accomplish (depending on your quantity of stylesheets), so grab yourself some coffee and put your seat belt on, because it’s going to be a long ride.

Let’s Move On…

Below you will find a <head> section screenshot image of the source code for a site that we will be combining the stylesheets… We will also be combining the JavaScript into 1 or 2 files, but that will be in Part 2 of Rule #5.

Source Code Screenshot – Before CSS Stylesheets are Combined

The pink highlighting above is showing the existing CSS stylesheet that must remain there. We will be creating a second stylesheet for all of the WordPress plugins, then add it directly below the pink highlighted line of code.

The yellow highlighting is showing the stylesheets that need to be combined into 1 file… if you have a large amount of CSS stylesheets (20 or so – I’ve seen more), you will need to consider combining them into 2 files.

MOVING ON…

We will be creating a folder in your root directory which will be holding your WordPress modifications, for now and in the future, like the next article which will cover combining JavaScript into 1 or 2 files.

If you are using Dreameweaver or Filezilla to access your Wordress site, I assume you already have a basic understanding for accessing and modifying your site information.

If You are Using cPanel:

Log in to your cPanel, go to your ‘File Manager’ link (under ‘Files’), open the ‘File Manager’, click on the folder that contains your WordPress site, whether it’s ‘Public_html’, ‘www’ or another name.

Once you opened up that folder, make sure that this is where your WordPress site is, HINT – you should see folders named, ‘wp-admin’, ‘wp-content’, etc.

Next, you will need to create a folder in your root directory, the same directory as the wp-admin and wp-content folders.

With all of your root directory files and folders showing, click on the ‘+’ sign for adding a folder and name it ‘includes’ (of course without the apostrophes).

Once you’ve done that, click on the ‘includes’ folder from the left side pane, it should now say ‘This directory is empty.’

Let’s add another folder inside the ‘includes’ folder and name it ‘css’.

Repeat the step above and open the ‘css’ folder so it says This directory is empty.

Now click on the + sign to add a ‘file’ (not folder) and name it ‘custom_plugins.020315.css’ with the numbers before the ‘.css’ representing the numerical date that you created it (today’s date?).

NOTE: Each time you update a WordPress plugin, you will need to update this ‘combined’ file, then re-save it with the new date you modified it on.

The reason for updating your combined stylesheets file with a new URL is… if you are using Cache-Control using ‘Expires Headers‘ code in your .htaccess file, this will tell your visitor’s browser that this combined file has changed and to grab the newly modified file so the plugin’s will work properly.

– – – –

Now that you have the custom stylesheet file and folders created, it’s time to get to work!

Click on the CSS folder from the left side pane of your cPanel files, single click on custom_plugins.020315.css file to highlight it, then click on ‘Edit’ from the top (above all the files).

With your custom_plugins.020315.css file open, you will want to create some information (as shown up to line 13), similar to the screenshot below.

Each stylesheet that is placed within the combined CSS file will show: the Plugin Name, the Version of the Plugin and its ‘handle‘, plus the link.

This will help keep your files in some sense of order giving you a quick glance of the ones that need updating.

NOTE: As the screenshot shows, you MUST surround your written information, in this file, within a forward slash and asterisk before and after your wording… in the specific order highlighted in red below.

As long as you have the /* in the beginning of your many lines of wording and the */ at the end of all the writing (in that order), it will work… I just make it a habit to put it before and after each line I write.

Click on the image above for the full length image… then look at line #7!

Information to Create the Top Part of your ‘custom_plugins.020315.css’ File:

Open up your WordPress site in another tab/window in your browser, then click on a link to any of your ‘Posts’.

This is to be sure that you see all the stylesheets that are being called by the plugins. Some sytlesheets won’t show up unless you are on a ‘Posts’ page.

Right click your mouse, then click on ‘View Page Source’ or whatever wording is used to see your ‘Source Code’.

With this open, hit the buttons ‘Ctrl’ + ‘F’ on your keyboard at the same time which will open a ‘Find’ box… type in the box ‘stylesheet’.

You can click on the down arrow or highlight all, whichever works for you.

Look for closest, to the top of the page, stylesheet link that is similar to:

Reminder: You will need to skip the stylesheet for your site (the one without the ‘id’ in the line)… that one must remain untouched.

Look at the whole line of the first stylesheet to get a sense of which plugin it is.

NEXT… open another tab or window and log into your WordPress site.

Go to your WordPress ‘Plugins’ page to highlight, then copy and paste, the first plugin’s ‘Name’ and the ‘Version #’, into your custom_plugins.020315.css stylesheet as shown in the image above.

Revisit your source code to copy and paste the ‘Handle,’ which is within the id=’handle-name-css’ part of the line, into the line of your custom stylesheet information.

Example: ‘rel=’stylesheet’ id=’YarppWidgetCss-css’ without the ‘-css’. For the handle, you don’t need the ‘-css’ for any of them.

After this, go back to the source code and highlight the link and put it (in between the parenthesis) on the custom stylesheet page… don’t forget the /* and */, before and after the line of code in your custom stylesheet.

NOTE: If you are having trouble highlighting the link because that darn ‘Hand’ keeps showing up, slowly slide your mouse just directly before or after the link… when the hand turns into a vertical-line, click and hold your mouse, then move the mouse over the link until it’s completely highlighted.

Then right click and copy, then paste it in-between the parenthesis on your custom stylesheet!

Visit your Source Code to see which stylesheet is next in line, then repeat until you are done copying all the ‘stylesheet’ information.

NOTE: If you use the Jetpack plugin, you will not be able to deactivate the stylesheet handle, shown as ‘jetpack_css’, so don’t even try. It is ‘concatenated from individual module CSS files’.

To remove the concatenated CSS file would require plugin modification which we are trying to avoid considering how often these plugins are updated.

If you see other stylesheets with the word Jetpack in it, you can deactivate those.

Your finished custom stylesheet (at least the top part of the plugin information), should look similar to the image above.

Your NEXT STEP…

Highlight all the information from your custom stylesheet, that is between the ‘Plugin CSS Order Begin‘ and ‘Plugins CSS Order End‘ similar to below (to include the links), then paste it a few lines below all of the top part of your plugin information:

ONE More Step Before the Custom Stylesheet is Complete

In the Find box, type ‘image’… click the down arrow to see if you have any calls for images within the CSS stylesheets you combined into the 1 custom file.

If you come across any calls for images similar to the following line: “background:#fff url(../images/catnav-bg.png) bottom left repeat-x;“, you will need to give it an ‘Absolute’ path.

This means that you will need to create a full path website URL within the parenthesis if you want the image to work… the path to this image has changed from where this CSS stylesheet used to call home, which was somewhere within the ‘Plugins’ folder, located inside the ‘wp-content’ folder.

HINT: Scroll up in your custom stylesheet until you find which plugin the image belongs to and start following the path to the ‘image(s)’ folder where the png, jpg or gif file is located… then create your path.

You may want to open another tab or window to search for the path to make it easier to keep your custom stylesheet open.

By the time you locate the image, your final path should look similar to below:

When you are finished creating the path, highlight the whole URL address and put it in your browser’s address bar and hit enter to see if it works.

Go on to the next one using the down arrow to make sure all of your ‘images’ have an absolute path and the links work.

Click on the SAVE CHANGES button!

IMPORTANT: Before we move on, you will want to copy and paste the top part of the information from the custom stylesheet into a Word or Notepad document… you will need the names of the ‘Handles’ from each plugin to put in the script that will be coming up.

– – – –

Next… You Will Create a Link to this Custom Stylesheet

Below will be the code that you will place in the ‘header.php’ or ‘functions.php’ file depending on your WordPress theme.

Here is the determining factor to which method you will use… if you use the Genesis or Thesis theme, you will use the second method.

– Genesis and Thesis themes have a unique method to make their themes work – using action ‘hooks’.

For other types of themes that use php templates, you will look for the ‘header.php’ file.

To locate this file, navigate to your WordPress theme using the following path (starting from the WordPress Core root directory):

For cPanel’s left side files, open up ‘wp-content’ > ‘themes’ > ‘your-theme’s-name’… when you click on your theme’s name from the left panel, all of the files should show.

Do you see a ‘header.php’ file there? If you do… click on the header.php file to highlight it, then click on ‘Edit’ from the top.

NOTE: If you created the custom stylesheet exactly like I mentioned above, naming your folder ‘includes‘ and the other folder ‘css‘ along with the name of the stylesheet to be ‘custom_plugins.020315.css‘, then only the pink highlighted area will need to be changed once you paste that whole line of code into your header.php file.

Now that you have the above line of code copied, take a look at the line of code directly below… find the line that looks like it in your header.php file. Depending on your theme, it should only be about 10 lines from the top.

Now, make a space or two below this line so you can paste the highlighted stylesheet into the file.

Go ahead and paste the copied stylesheet line in your header.php file.

Now, change the pink highlighted information to your domain name and the file numbers you used when creating your custom stylesheet.

Next… if you already saved your custom stylesheet as directed above, you should be able to highlight the URL link only, then copy and paste it into your browser address bar, then hit enter, to see if the file exists.

If it doesn’t show, double-check your URL address… if you had to modify the URL address to get it to work, copy and paste the modified URL back into your header.php file.

Begin – Create Custom Stylesheet Link for the Genesis or Thesis Theme

To locate this file, navigate to your WordPress theme using the following path (starting from the WordPress Core root directory):

For cPanel’s left side files, open up ‘wp-content’ > ‘themes’ > ‘your-theme’s-name’… when you click on your theme’s name from the left panel, all of the files should show.

Do you see a ‘functions.php’ file there? If you do… click on the functions.php file to highlight it, then click on ‘Edit’ from the top.

NOTE: Some Genesis themes have a header.php file, you will need to use the ‘functions.php’ file to set the custom stylesheet closer to the top of the header.

On that NOTE… Here’s what you need to do…

Once you have your functions.php file open, navigate to the end of any scripting and paste the code below into the file.

NOTE: If your functions.php file ends with the ?> (shown in the image below on line 326), put the scripting just before it… you can create some space by placing your cursor above the ?> and hit the enter key on your keyboard.

If your file does not contain this ‘question mark’ and ‘greater-than’ bracket, don’t worry about it, your theme was designed to work that way.

Put the code after any existing scripting on the page.

To grab a copy of the scripting, just hover your mouse over the box below, then click on the ‘double page’ icon.

Either right click your mouse and copy the code, or press Ctrl + C on your keyboard, then Ctrl + V to paste into the functions.php file.

After you have pasted the script within your functions.php file, you will need to change the ‘www.yourdomainname.com’ to your website domain name, and the number ‘020315’ to the numerical date you chose.

Highlight the whole URL from ‘http’ through to ‘css’ then copy and paste it in your browser address bar to make sure your custom stylesheet exists.

Once you have tested to see if your custom stylesheet exists, you can click on SAVE CHANGES to the functions.php file.

END – Create Custom Stylesheet Link for the Genesis or Thesis Theme

Move On to ‘Disabling Your Existing CSS Stylesheet’ directly below…

– – – –

Next… Disabling Your Existing CSS Stylesheets.

If your functions.php file is not currently open for editing, locate it within your WordPress theme and open it.

Below you will find coding, which will tell the stylesheets to no longer show up in the ‘head’ section of your web page… the scripting will make the stylesheet disappear altogether.

At this point, open your previously saved Word or Notepad document that shows the custom stylesheet ‘Handles’.

Copy the code from the box below…

Hover your mouse over the box below, then click on the ‘double page’ icon.

Either right click your mouse and copy the code, or press Ctrl + C on your keyboard, then Ctrl + V to paste into the functions.php file.

Instructions to ADD the Scripting to Your ‘functions.php’ File.

Once you have your functions.php file open and ready to add the script, scroll to the end of the file… this is where you can safely place the script.

NOTE: As mentioned above… if your functions.php file ends with the ?> (shown in the image below), put the scripting just before it…

Put the code after any existing scripting on the page.

DO NOT SAVE THE FILE, WE HAVE MORE WORK TO DO!

NOTE: Notice the words ‘yarppWidgetCss’, ‘contact-form-7’, ‘digg-digg’, etc? These are the ‘Handles’.

Once you have this scripting placed within your functions.php file, you will need to change these words to the ‘handle’ of your existing, combined CSS stylesheets.

– – – –

Below is a screenshot of the scripting added to the functions.php file (see lines 314-324).

If you happen to have the ‘Move JavaScripts to the Footer‘ scripting in the function.php file as shown below (lines 299-312), remove the line highlighted in Pink or you will find your CSS stylesheets in your footer once all of the combining of the CSS stylesheets work is done and has gone live.

Functions.php File – De-registering the CSS Stylesheets

Now open up your Word or Notepad document and begin to copy and paste the ‘Handles’ to the functions.php file replacing the existing handles as shown in yellow highlighter.

Go S L O W when doing this… one little mess up and it will break the file, and your site will have a stroke.

Just make sure that the apostrophes, before and after the handle name, are still there once you’ve replaced the word(s).

If you need more lines of code to add another handle, copy and paste one of the existing lines of code, example: wp_deregister_style( ‘yarppWidgetCss’ ); example from line 319 in the image above.

Just move your ‘curly brace’ shown in line 324 of the screenshot, down a line or two, giving you room to add more lines of code.

If you need less lines for the ‘handle’ names, remove the extras, just make sure you still see the Curly Brace after the last line, as shown on line 324.

BEFORE YOU SAVE THIS FILE, make sure to compare it to the screenshot above… make sure the Parenthesis, Apostrophes and Semicolons, along with the Curly Braces are in tact.

To save yourself some headache, copy/paste the modified scripting from your functions.php file, to a Word or Notepad document… this way, if for some reason, you hit save and your site is broken, you can immediately remove the scripting from the functions.php file and re-save it to bring your site back to life.

If this happens, you will at least have a copy of your scripting from the functions.php file to look at for errors before attempting to put it back.

If you have checked thoroughly and are confident with your modifications, click SAVE CHANGES to your functions.php file and TEST YOUR SITE.

– – – –

Next… You Are DONE… Let’s Check Everything!

If you have gone ahead and saved your functions.php file, tested your site, and all is OK, you should be able to look at your ‘source code’ and see the added link for your custom stylesheet.

For those not using the Genesis or Thesis theme, your source code should show two consecutive lines of code representing your CSS stylesheets (your existing stylesheet and the custom stylesheet), similar to the image below.

If you are using the Genesis or Thesis theme… you should see the custom stylesheet a little further down from your regular stylesheet.

AND… the CSS stylesheets that you combined into 1 stylesheet should have disappeared from the source code, as shown highlighted in yellow, in the first ‘source code’ screenshot at the beginning of the article.

REMINDER: Each time you update a WordPress plugin, you will need to update this ‘combined’ file, then re-save it with the new date you modified it on. After that, you must update your URL link with your new numbers, whether it was in your ‘functions.php’ file because you are using Genesis or Thesis, or in the ‘header.php’ file for all other themes.

Highlighted in yellow is the previously mentioned, Jetpack plugin, ‘concatenated’ file that we were unable to remove.

Closing Comments – How to Combine CSS Stylesheets Into 1 file

Combining CSS stylesheets may be a time consuming and daunting task, but putting forth the effort is one more step towards achieving the goal of a high-performance, WordPress web site.

By removing every possible HTTP request from outside sources, and with the assumption that you have stable and reliable web hosting, you will remove the chances of high-traffic bottlenecks to the point of non-existence.

Comments (13)

Hi,
Thanks for the tutorial! But I have a question regarding checking the source code: I found there are some ‘stylesheet’s not from a plugin, like ‘googlefontsopensans’. Not sure if I could go on and combine this CSS or I need to do anything whenever there is an update (and how I could know there is an update).

Nonetheless it is a great sharing, there is almost no step by step guide like this!

If you are considering combining your CSS Stylesheets, I would not combine files that do not load from the server that your site is on, I.E. GoogleFontsOpenSans. You will not know when their information is modified.

The only downfall about combining your CSS Stylesheets is that you would need to update your custom CSS Stylesheet each and every time you update a plugin, or your WordPress theme.

In my personal opinion, I have fallen away from the belief that combining the stylesheets is the best thing, because it’s so much darn work every time I have updated a plugin that I am using for my site. Not only that, the combined stylesheet ends up being a much larger file, so my loading times have increased when I combine.

Interpretation: If your site is set up correctly and your CSS stylesheets download in Parallel, normally this will load much quicker than a couple of larger files downloading in parallel. As long as the order of your Stylesheets are all together and your JavaScripts are all together you will have better parallelization of your downloads which will speed up your browser rendering time.

You can use the online testing tools, Pingdom and GTMetrix which can help you determine if things are working the way they should.

Hi, I have followed all the directions to combine my css files but there is no change to my website. Its like I have done nothing. I also want to mention that I have a theme that contains only a header.php and no functions.php. So all the changes made are made in the header. Please help!!

If you are using WordPress for your Content Management System (Your Website), then your theme should have a functions.php file. If your theme does not have this file you can simply create a plain-text file named functions.php and add it to your theme’s directory then begin the information given in the article again.

If you still cannot locate your functions.php file and decide to go this route, you should add <?php in the beginning and ?> in the end of your file, then put the information described in the article in between the opening and closing php tags.

We’re gonna give this a shot, we want a good score on YSlow/PageSpeed!
We have one question though, would we have to “recombine” the files everytime a plugin has an update? If so, is there a way to automate the process upon updates?

The simplest way of updating your custom CSS file would be: first, add the following to your functions.php file just below the ‘wp_deregister_style’ script:

/*

*/

Now that you’ve added the forward slash + asterisk and the asterisk + forward slash with a whole line space in-between, highlight and ‘cut’ the whole ‘deregister’ line for the plugin that you just updated… in this example, the Contact Form 7 plugin wp_derigister_style. Now paste the whole line of wp_deregister_style in-between the forward slash + asterisk and the asterisk + forward slash, so it should look like below:

Now… you’ll notice that the ‘deregister_style’ for the Contact Form 7 plugin is no longer in the script, but it is now within the /* contact form deregister code here */ which makes it as if it doesn’t exist.

Save your functions.php file.

Now visit your website and pull up the source code… search for the Contact Form 7 CSS file and click on it, highlight all the code, copy and paste it into your custom CSS file that you created (of course – paste it in place of your old plugin version of the Contact Form 7 code). You can also update the plugin version in the line that should be above your CSS code in your custom CSS file, example:

/* Contact Form 7 – Version 4.1 – contact-form-7 (seoblogger…) */

This would be ALL of Your Contact Form CSS Code HERE in your custom CSS file.

… when you are done, save your custom CSS file.

Note: If you cannot find your plugin CSS in the source code, refresh your page and it should show up.

Once you have updated your Custom CSS file with the new plugin CSS, you can reverse the information in your functions.php file, from the above information.

Cut and paste the wp_deregister_style from between the /* */ back into the deregister script, as it was before, then save your functions.php file.

Note: You can leave the /* */ there in the functions.php file for the next plugin you update.