×
  • Themes
  • Support
  • Blog
  • Log In
  • Sign Up

NiceThemesNiceThemes

  • Support
  • Themes
  • Log In
  • Sign Up
Menu

Support Articles

Articles and Documentation for your NiceThemes products.

Knowledge Base / Theme Customization / How to customize a theme

How to customize a theme

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 the functions.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.

Theme Customization

Related Articles

  • How to use Firebug to customize your theme
  • How to create and use Child Themes
  • How to translate themes and plugins
XML Demo Content
If you're looking for the XML demo contents, you can get them here

Categories

  • Installation & Updates
  • Theme Basics
  • Theme Configuration
  • Theme Customization
  • Support
  • FAQs

Documentation

In the documentation you'll find all you need to get started. Select the product from the list to see the documentation.

NiceThemes

  • About
  • Blog
  • Contact

Support

  • Support Center
  • Knowledge Base
  • Support Forums

Products

  • Themes

Join Us On

Curated with lots of    by your friends at NiceThemes™

Login to your Account

Welcome back! Please log in to your account by filling the fields below:

Forgot?

Not a member? Create a free account.

Create a Free Account

You're 27 seconds away from some awesome WordPress free stuff, benefits and more. Create a free account and have access to our free products, benefits and more!

Already have an account? Log in
Secure Server