Breaking News
Home » Digital » The Internet » Coding and Customization » How To Make Your Sahifa Theme Have Different Colored Skins For Each Category
PHP Coding Tutorial

How To Make Your Sahifa Theme Have Different Colored Skins For Each Category

Buying and customizing Premium WordPress themes have many benefits, especially in avoiding extra time coding a fully custom design. Unfortunately you are then limited to the customization options given by the plugin developer. Often you will want to do something that is not an option given and then you’ll need to manually hardcode some HTML or add some custom CSS styles.

As we are using the Sahifa theme currently here at The Digital Hippies, we are limited to the options it provides in the ‘Sahifa Settings’. While there are several to choose from, it does not allow everything (naturally).

(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)

We had the idea to use a general skin color to the website as a whole, but then to customize each main section with a completely different skin color. 



Theme Functions Option In WordPress Editor First we need to adjust some code within the function.php file. There are two ways to access this file; 1) download the file via FTP and open it with a text or HTML editor, or 2) access the file within the WordPress Dashboard under Appearance > Editor. (Tip: Keep a copy of the text within this file before you begin working on it, just in case .)

Sahifa Users: You can use this URL structure ( to quickly access this file. Simply replace the ‘website’ with your domain name. 

Inside this file you are looking for the following code. You can find it more quickly by clicking inside the document text box and using the ‘search’ feature of your internet browser (usually by holding Control and F at the same time).

This snippet of code needs to be moved below this line:

When you are finished moving the // Custom Functions snippet, this is what it should look like. This reason behind this move was so that our ‘Custom Function’ file will load AFTER all of the themes custom functions.


Next you’ll need to open the custom-function.php file (follow the same instructions as above).

Sahifa Users: You can use this URL structure ( to quickly access this file. Simply replace the ‘website’ with your domain name.

Sahifa Users: Now, if the file only contains that small code (above), then delete it entirely and paste this code (below). Otherwise it is usually a blank file.

Code Explanation

Here is a quick explanation of the PHP code above and what it is accomplishing. First we needed to define the function (custom_css_theme), which you can name whatever you’d like. When choosing a name for the function you are allowed to use alpha-numeric characters and underscores only. We are loading different style sheets for each section (category) within that function. Basically this is saying:

  • If it’s the Home Page, load the black style sheet.
  • Otherwise, if it’s a post within the Travel section (category), load the default style sheet. In this case it’s orange.
  • Otherwise, if it’s a post within the Lifestyle section (category), load the blue style sheet.
  • Otherwise, if it’s a post within the Digital section (category), load the red style sheet.
  • Otherwise, if it’s a post within the Thoughts section (category), load the green style sheet.


Why are some of the sections displaying the wrong skin color? There are two possibilities.

  • The ‘Skin’ selected in the Sahifa Settings NEEDS to be set to default. If another skin is selected, then you might see this problem.
  • You will need to have published content under each section (category) to see the styling changes for that section. If the category is empty, then it does not work.

Before and After


Here is what the overall site looked like before the changes made above. The home page and all other inner pages, besides the 4 categories (Travel, Lifestyle, Digital, and Thoughts) will still be black after the code changes.

Black Skin Home Page


If a post is categorized as one of the four main sections to the website, then it will have a different color theme representing that section. The sections are Travel (orange), Lifestyle (blue), Digital (red), and Thoughts (green).

Travel - Orange Lifestyle - Blue Digital - Red Thoughts - Green

Subscribe to our mailing list

I'm interested in...

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.


  1. Any ideas on how to display categories just like the recent post box or related articles style? instead of blog style?

    Been trying to figure out for days on this theme! ><!

    • Branndon

      I’m not sure I understand how you want them to look. Category what? Category page listing, or the categories attached to a specific post? Or a list of all categories on the site?

      • Sorry for the late reply, I got it taken care of ^^.

        Will implement your webnav tomorrow! thanks for the help! appreciate it.

        • Brianne

          Glad you figured it out.

          Any tips for others experiencing the same problem?

          • Well my problem was pretty simple yet complex depending on your level of css and coding i guess.

            I run a Korean TV Drama site so what I did was I took the styling for recent post box on home page and modified the category template to have the same styling instead of blog styling.

            everyone can take a look at my site and ask if they have any questions on modifications I made to the site.

    • I have same problem as you had with post categories – blog layout view. When i asked for help on Tie, they replied that this feature is not implemented.
      How can i contact you? I already try through your site but there is no contact form. I really need this layout view for my site.

  2. I got the same problem. How you change the category page settings/look? When I go to a category I see post featured image big, yours is 150×150.

  3. Can you please help me. I need to add adsense code in the middle of article. Which file i should edit?
    Thank you!

    • Branndon

      You cant’ simply edit a file and ad AdSense in the middle of the file, and have all articles on the site get it working. You need to know PHP and add some code to edit the article before it’s output.

      You can however, add an AdSense ad either above or below your content by editing a file. This file is usually “single.php” in your theme folder. Look for something like “the_content();” and add your code either above that line, or below it.

  4. First of all, thank you for your answer. I have the same sahifa theme. When a trying to put adsesne code in the single.php after nothings happen.

  5. please make some more sahifa tips and tutorials

    • Brianne

      :) I’m glad you like these. Unfortunately, I’m no longer going to focus on customizing the theme and more on other content. I’m writing mostly on my phone these days with a new baby and customization isn’t as feasible, lol.

  6. Hello,

    I find your tutorial very helpful. Thank you very much for this. One question though: what is the content of the css files referenced in the code? Because I do not have the files you are working with in my theme folder.

    Thank you!

    • Branndon

      The version of sahifa this tutorial was written for is a little out dated now, it’s version 3.3.0 and earlier. The content of the files was the different styles defined for each color theme. Sahifa now comes with the option for different colors standard I think in the new versions.

  7. Is it also possible to change the color by moving the mouse over the category?

  8. Hi mate,

    Any idea on how to have a custom header image for different pages?

    • Branndon

      You would need to know PHP coding to get this done. You would use the Page ID as the differentiator, and do an if statement. Example: If (get_id() == ‘4’) { /* do something here */ }

  9. hi i am from pakistan i am also using this theme i wanna know some thing about your news letter style i wanna make same with this how can i make? help me ….ur post awsome …now i m going to reading you home page

    • Brianne

      I think the newer upgrades to Sahifa theme offer the color coded category sections now. The style of layout I played with the various options until the boxes were what I wanted. It was a while back so not on top of my head anymore. Sorry I can’t be more help. These days I just say, “Honey (aka Branndon), can you do this and that to the site…” And he takes care of it for me. Good luck.

  10. How to disable website url in comments box such as this?

    Theme = Sahifa

  11. Hi, Would you please show me how to have a random article list instead of the one that is ordered in most recent created order on the home page.

    Also how do i remove the dates which articles are created, so they are not showing.

    • Branndon

      To hide the date, it’s an option in the theme settings for Sahifa, under “post options” turn off “date meta”.

      For the random article, you’d need to find the file in the theme that creates the front page. I had a look, but didn’t see it. It’d take a bit of work to hunt it down. I can’t dig into it right now, sorry.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge