Recently Added
You are here: Home » Digital » The Internet » Coding and Customization » How To Make Your Sahifa Theme Have Different Colored Skins For Each Section
How To Make Your Sahifa Theme Have Different Colored Skins For Each Section

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

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. 

Step-By-Step

Function.PHP

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 (http://website.com/wp-admin/theme-editor.php?file=functions.php&theme=sahifa) 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.

Custom-Functions.PHP

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 (http://website.com/wp-admin/theme-editor.php?file=custom-functions.php&theme=sahifa) 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.

Troubleshooting

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

Before

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

After

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

SIGN UP TO RECEIVE FREE EMAIL UPDATES

You CAN run a business, raise a family, and travel full time!
We’ll show you how with free articles and news.

Stop Waiting. Start Doing.

About Brianne

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.

Leave a Reply

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

*


CommentLuv badge
Scroll To Top