SUMMER SALE: Buy All Themes Package (35+ Themes) for only $119! View Details

Getting Started with Themes

Common Theme Issues

ZOOM Framework

Advanced

Resources

Recommended Practices for Customizing a WPZOOM Theme

Before starting to customize your theme, as other customers did with their WPZOOM Themes, we’ll explain what are the best practices to do it.

Many of our themes include styling options in the Theme Options or in the Theme Customizer, so make sure to check those sections before starting to modify a theme.

There are two ways to customize a theme:

1. By adding Custom CSS code

Using this method you’ll be able to customize elements that can’t be modified using the built-in styling options from your theme.

There are special plugins for WordPress that allow you to add custom CSS code in your site, without having to modify any files from your theme, so you won’t lose any modifications when you’ll update the theme in the future.

An example of Custom CSS code added using Jetpack Custom CSS feature.

An example of Custom CSS code added in the Inspiro theme using Jetpack’s Custom CSS feature.

By adding custom CSS code you can easily change fonts, colors, background, margins and paddings in your theme:

One of the most popular method to add custom CSS code in a theme is the Custom CSS feature included in the Jetpack plugin or Simple Custom CSS plugin.

jetpackcss

Once you activate this feature from the JetpackSettings page, a new page called Edit CSS will appear under the Appearance menu in your site’s Dashboard.

CSS_‹_VideoBox_—_WordPress

How to Find Your Theme’s CSS in Google Chrome

The theme’s original CSS can be found by using your browser’s web inspector tools. This is the preferred way to view CSS because it’s more comprehensive and will show you all the CSS that applies rather than just a subset of it.

These three basic steps will work in most current browsers to open the web inspector:

  1. Right-click on a web page element
    In Safari, go to Preferences > Advanced and enable the Develop menu first.
    In Internet Explorer 10, go to Tools > F12 Developer Tools instead.
  2. Select the “Inspect Element” option
  3. Look for a panel at the bottom of the screen

The panel will show the HTML for the element you clicked as well as all the CSS that applies to it. You can click on different HTML elements in the panel and then look at the CSS on the right to figure out what CSS can be copied into your Custom CSS panel to make design customizations on CSS.

Here is a video walkthrough showing how the web inspector works in Google Chrome:

 

Other resources:
CSS Basics
A Web Inspector Tutorial for Front-End Developers
[7 min video]: Using Custom CSS Plugins to Edit WordPress

Important Notice
Don’t make changes directly into the theme’s files unless it is really necessary. You may lose those changed in the future when you’ll update the theme.

Add Custom Functions to your Theme
If you want to add a custom WordPress function to your theme use the plugin My Custom Functions.

 


2. Customize Themes using Child Themes

This is a more complex method and it allows you to customize everything in a theme: from functions to page templates and much more.

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

How to Create a Child Theme?

child-configurator

  1. Activate the theme you want to customize (parent theme).
  2. Install the Child Theme Configurator plugin and activate it.
  3. Go to ToolsChild Themes menu and create a new Child Theme for current active theme.

Once you have created a new Child Theme using this plugin, you can activate it from the AppearanceThemes page. This means that you’re safe now to modify the child theme as you want: edit CSS file, add new functions in the functions.php file, add new theme files or page templates that will override existing ones from the parent theme.

Changing functions or theme files from parent theme is easy using child themes. All you’ll have to do is to copy entire functions to the child theme’s functions.php file and change the code as you want. The same thing applies when you want to edit theme files like header.php, footer.php. You will have to create files with the same name in your child theme, but make sure to copy entire code from the parent theme, and modify only what it’s needed.

Using the Child Theme Configurator plugin you can easily copy files you want to modify from your parent theme to the child theme. You can do that from the Files tab in the Child Themes page:

child-files

Once the files have been copied in the Child Theme, go to AppearanceEditor to edit them as you want.

Why use a Child Theme?

One of the most important reason of using Child Theme is that in this way you’ll be able to update your theme in the future without worrying that you’ll lose any of your modifications.

More information about working with Child Theme can be found here:

5 Excellent Uses for a Child Theme
WordPress Codex: Child Themes
How to make a child theme for WordPress

Have a suggestion?