There are several ways to customize a theme. Here at NiceThemes we do our best to make our themes easy to be customized, extended and modified, specially via both user options and the code we provide when you make your purchase.
This article covers all our recommended ways to make modifications on how your theme looks and works.
Theme Options
Once you installed one of our themes, you will be redirected to the NiceThemes → Theme Options section, where you can tweak all the settings available to customize the look and feel of your theme. However, there may be times when some modification that you need to perform is not covered by the theme settings, and you will have to write some code on your own.
Child Themes
This is the most recommended way to customize and modify a theme, and it provides so much possibilities that can’t be covered completely in this article. That’s why we wrote this introductory guide to Child Themes, where you can learn how to use them and see other resources for more details.
PHP Code
In case you need to add some PHP code of your own, you can start looking at the functions.php
inside your Child Theme (if you’re using one) or your parent theme. This file is needed for themes to work, so it’s always gonna be present, and you only need to know where to put your code:
- If you’re not using a Child Theme, put your own PHP code at the end of the
functions.php
file. There should be a comment at the point where you can start adding your functionality. - If you’re using a Child Theme, add your PHP code wherever you see it suitable inside your
functions.php
file. Keep in mind that thefunctions.php
file of the parent theme will be loaded after this one.
We also provide lots of filter and action hooks for almost any element of our themes, so if you want to add, modify or remove something, most likely there’s a hook for that. You may want to look at the documentation for your specific theme for this.
In case you don’t know what hooks are, we recommend to read the Codex article about the subject, since they will significantly improve your work with WordPress.
CSS Code
If you want to add custom styles, there are several ways to do it:
- In your WordPress Dashboard, go to NiceThemes → Theme Options → Design & Styles, and add your code inside the text area for the “Custom CSS” option.
- If you are using a Child Theme, add your custom styles to your
styles.css
file. - Create a file called
custom.css
in the root folder of your theme or Child Theme. This will be loaded automatically by the theme. - Create and add a new stylesheet via PHP using the wp_register_style() and wp_enqueue_style() functions.
In case you’re not using a Child Theme, it’s very important that you never modify the contents of your style.css
file, or any of the other included CSS files, since your changes will be lost when you update the theme. That’s one of the reasons we recommend to use Child Themes, but if you’re not doing it, always add or overwrite styles through Theme Options or the custom.css
file.
JavaScript Code
Custom JavaScript libraries and implementations can be managed in any of the following ways:
- Create a file called
custom.js
in the root folder of your theme or Child Theme. This will be loaded automatically by the theme. - Create and add a new JavaScript via PHP using the wp_register_script() and wp_enqueue_script() functions.
Just like with CSS files, you should never modify the JavaScript files included with the theme, since your changes will be lost after updates, and load your own files using any of the recommended methods.
Debugging
Sometimes, while making modifications to the theme options or code, you may not see what you expect, and have the need to look for a while inside the printed HTML code, or see the content of your CSS and JavaScript files to find out if something went wrong or not. We recommend to do that using Chrome DevTools, if you’re using the Chrome browser, Firebug for Firefox, and FirebugLite for any other browser.