LIMITED OFFER  Get the All Themes Package [31 Themes] for only $99 View Details →

Getting Started with Themes

Common Theme Issues

ZOOM Framework

Advanced

Resources

Recommended Practices for Customizing a WPZOOM Theme

Most of WPZOOM 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.

Is your WordPress theme not working how you want it? WPZOOM themes are easily customizable. Switch to a WordPress theme that works.

There are two ways to customize a theme:

1. By adding Custom CSS code

Looking for an easy way to customize your theme?
Try YellowPencil Pro, a Visual Design Tool for WordPress.

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

Starting with WordPress 4.7 you can add Custom CSS code directly from Customizer > Additional CSS:

WP 4.7 Additional CSS in Customizer (Syntax Highlighter enabled via Jetpack Custom CSS)

WP 4.7 Additional CSS in Customizer (Syntax Highlighter enabled via Jetpack Custom CSS)

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

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
How to Inspect Element on Chrome: Easy Ways to Edit a Web Page

[Video] How to add Custom CSS to WordPress
[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.

Continue reading here: How to Create a Child Theme for a WPZOOM Theme

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.

Was this article helpful?

Last updated on February 7, 2022
Have a suggestion?
  • This field is for validation purposes and should be left unchanged.