How to Customize Your WordPress Theme
If you’ve never customized a WordPress theme before, you might think it sounds complicated. But nothing could be further from the truth. Changing how your WordPress site looks and functions is easier than ever thanks to a wide range of WordPress themes that come with advanced theme options.
Many themes, like Total, include page builders and customization options built-in so you can create a one of a kind website without using code. If your theme doesn’t there are plenty of plugins you can use to add design settings with ease. Or if you need just a few very specific styling tweaks, or if you are confident in your ability to code, you can also create a child theme to hard code edits to your site.
Customize Your Theme with Built-in Options
First, take a look to see if your theme includes any built-in styling options. Many theme developers will include some styles, especially if you’re using a premium theme. These can be settings, templates, or even extensions.
Theme Panel
Many premium themes feature a theme panel where you may find some design related settings. This could include background options, color options, font settings, media options, etc. Options available will vary according to your theme.
For example, the Total WordPress theme includes a theme panel where you can find customizations for a color palette, header and footer builder, font manager and more.
Live Customizer
Originally introduced in WordPress 3.4, the Customizer houses various settings related to the look of your theme. This includes default options for uploading a logo, or managing menus. But theme developers can also add many style settings here as well.
To access the Customizer you just need to navigate to Appearance > Customize. From here you’ll notice that the Customizer is organized into sections. By default these are for Site Identity (title and site icon), Menus, Widgets, Homepage (to set your homepage as a blog or a page) and a final one where you can add Custom CSS.
But additional options available in your Customizer will depend on those added by your active theme and plugins. But the most common include color pickers, layout options, custom post type settings, etc.
Generally options selected the Customize will be applied globally, which means to your whole site. So if you select a different header menu layout, such as where the logo and menu are centered, it will look that way on all pages on your site (unless your theme offers per-page customizations as well).
Using the Total theme as an example again, in Total’s Customizer you’ll find styling for your page headers, search results, pagination, scroll to top, fonts, blog post structure, custom post types structure, social links, top bar, footer callout, site responsiveness settings and more.
Note: The Customizer is typically available with Classic themes but is hidden by default with Block Themes. If you are using a block theme most options you need to style your site can be found within Gutenberg.
Bundled Plugins
Lastly, some premium themes may include premium plugins that offer styling. In this case you simply need to be sure to activate the included, or “bundled”, plugin. These are often a premium page builder or a CSS editor which we’ll cover next.
Use a Page Builder or CSS Editor to Customize Your Site Design
One of the easiest ways to customize your theme design is with a page builder or a CSS editor. These are third party plugins (with one exception) that add a variety of design customization options.
Before we take a look at some of the most popular options, it’s important to know that a page builder or CSS editor does not have to be bundled or included with your theme for you to have the option to use it. Many themes will advertise compatibility or support for third party plugins. So just check your theme’s landing page or reach out to the theme and plugin developers to confirm if your preferred builder will work with your theme. Or in the case of free options, just try it out for yourself and see how it turns out!
Page Builders
A page builder is an easy, visual way to create layouts for your site design using blocks or elements that you can insert, reorder and edit. Builders still rely on your theme’s core styles, but you have the freedom to design layouts or combine elements as you see fit. These can be for all types of content including headings, icon boxes, image grids, buttons, graphs – pretty much anything you can think of! And for each block or element you have design settings to customize things such as colors, fonts, paddings, overlays, loading animations, etc.
Page builders are extremely flexible making them a great option for beginners since there is no coding knowledge needed!
Gutenberg (Free)
Built into WordPress core is the Gutenberg page builder. It’s a block based editor that you can use to create post content and pages, or if you are using a Full Site Editing (FSE) theme you can even use Gutenberg to design your header, footer and template parts. Gutenberg also offers a block pattern library full of free layouts you can use to design your site, as well as a number of third party extensions to add more block options for you to use.
Elementor (Free & Premium)
Another popular option is Elementor, which offers a free and a pro version. The free version offers 40+ standard builder elements with enhanced styling features, while Pro offer 90+ elements as well as ready to use templates, kits, motion effects, WooCommerce builder, popup builder, role manager, sliders and more. While the free version is somewhat limited compared to pro but it’s still a very good builder option especially if you’re on a budget and prefer Elementor’s interface over Gutenberg’s.
WPBakery (Premium)
The last builder we wanted to introduce is WPBakery. This is a premium page builder often bundled with premium themes. What makes this builder a bit different is that many themes paired with WPBakery offer you extended features. This is often additional builder blocks or features optimizations. For example, Total includes WPBakery along with theme specific builder settings for an SEO optimized slim mode.
CSS Editors
CSS Editors are another type of plugin that can be used to customize your site design. Specifically they allow you to change the style of existing site layout and design features, as opposed to page builders that enable options to create them from scratch. For example, if you want to change the font color used in a heading on your homepage but you aren’t comfortable adding custom code yourself then you can use a CSS editor.
CSS Hero (Premium)
One of the best point and click CSS editors is CSS Hero. This premium option enables CSS styling options across your WordPress site, so even if your theme doesn’t offer specific color or spacing options you can still edit your overall site layout and design. Other features are a library of ready to use snippets, code inspector, live preview, support for brand colors, workflow history (with save points), and more.
Visual CSS Style Editor (Free)
Install Visual CSS Style Editor
Another CSS editor option is the free Visual CSS Style Editor. This will target 60+ CSS properties for things like colors, fonts, letter spacing, paddings, border radius, opacity, etc. While there is a premium version, we’d mainly recommend the free plugin.
Create a Child Theme to add Custom Code
Lastly, if you are comfortable coding then using a child theme is another way of customizing your WordPress theme. You should never customize a theme’s files directly for two big reasons: 1 to prevent losing all your changes every time you update the theme and in turn 2 to ensure you can keep your theme up to date for security. Child themes allow you to build the site of your dreams without making direct edits to your parent theme.
Using your child theme’s stylesheet file (style.css), you can alter how your entire website looks with a few lines of code. With a special PHP file known as functions.php, you can add features or alter your site structurally. You can go a step further and create template files for your child theme, which gives you absolute control over the design and structure of your theme.
Once your child theme is in place, you can turn your theme whichever way you want. You’re really only limited by your understanding of CSS, HTML, JavaScript, PHP and WordPress functions.
With these tools at the ready you should be ready to start customizing your WordPress theme and site design! For most users we recommend sticking to your theme’s built in design settings, or a third party page builder or CSS editor. These have a very small learning curve and give you all the options you could need to change up your design.
You left out the most important CSS tool – Microthemer, otherwise, this is a great article.
Microthemer looks great. Thanks for passing by and sharing 🙂
Some of my thoughts can be found here: blog.insiteapp.io/i-need-a-plugin-plugin-is-all-i-need-hey-hey/ – in general i really believe that as the themes market is changing so fast, and you can’t change your theme every sec, the market of enhancement tool is about to get loud.. and its a really interesting place to be.. Is there a place for big company or that we’ll just see more and more little tools?
WordPress is growing bigger each new day, and the possibilities are limitless. If you’re keen enough, you might spot more than just this one opportunity. Just my two cents 🙂
Thanks freddy
You’re welcome 🙂
Microthemer is look great, Now I’m going to use it for our one website. Thanks. for this useful post.
Cool! Thanks for passing by 🙂
Hey Freddy,
I’m sorry but you forget Yellow Pencil plugin :/
That’s another great tool! Thanks for sharing 🙂
And thank you for keep my plugin on wpexplorer.com home page 🙂
Looks like really great tools!