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.
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.
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.
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:
Why are some of the sections displaying the wrong skin color? There are two possibilities.
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
1. Function.PHP
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.
