Developers : how to customize the Customizr WordPress theme ?

The Customizr theme is designed to be customized from the WordPress customizer live preview panel. We are doing our best to make this a friendly user interface to let you design your website like you want.

But what if you wish to go further and customize Customizr a bit more? Or What if your feel that there's an option missing in the customizer ?

Then the following content will help you get started.

This documentation assumes you understand how to use WordPress, install and use a theme, and that you know the basics of the web languages : PHP, javascript, html and CSS.

On presscustomizr.com, there are plenty of ready to paste “snippets” to add to your site to customize it in some way. As you get more proficient, you will also write your own.

Templates in Customizr

The theme uses four templates to render the content :

header.php
index.php
footer.php
comments.php

Those templates only includes some structural HTML markup, the rest of the front end content is rendered with the action hooks defined in the classes of the parts/ folder.

As you might have noticed, the Customizr theme uses the WordPress template hierarchy at it simplest, but there are no restrictions to use it in your developments, for pages, custom post types, taxonomies, etc…

Customizr main loop

Customizr uses one single loop for all kind of content. It is located in index.php. The different kind of content (posts, pages, lists of posts, 404, no-result) are displayed through action hooks defined in the /parts/* classes and filtered by the conditional booleans : is_singular(), is_404(), is_search(), is_archive(), is_page()…

Hint : check out this snippet to alter the main loop in Customizr WordPress theme.

Customizr hooks API

If you are not familiar with filters and actions hooks in WordPress, I strongly recommend this quick introduction.

The Customizr theme makes an extensive use of the WordPress hooks. This choice has been made to have a better structured code and avoid dependencies. The theme has its own hooks API which makes customizations a lot easier.

In Customizr, action hooks are used to render HTML or execute some code in predefined locations, while filters are used either to get values or modify html output (usually rendered by actions).

The best and safest way to customize the Customizr theme, is to use those actions hooks. You can add actions ( add_action( ‘hook-hame’,‘your-function-name’, $priority, $arguments) ) to existing hooks and order them with the priority parameter.

Where do I put the CSS snippets?

The CSS snippets that are posted here and on the WordPress forum can be:

Pasted the CSS into the Customiz’It > Custom CSS panel. This is the easiest approach for beginners.
Pasted into your child theme’s CSS. This is slightly more complex, but once you understand the principles here, it’s a 5-minute job.

Any CSS placed in the above 2 locations will override the CSS in the theme’s stylesheets.

You shouldn’t modify any of the stylesheets in the theme (red.css, orange.css, etc.) — firstly because you don’t need to, as you can simply override it; and secondly because you will lose your changes when the theme is updated. Sometimes people say “That’s OK, I’ll simply re-upload my version of the CSS file”, but what they forget is that this way they will miss out on bug fixes and improvements in the future.

Once you’ve pasted your CSS in the Custom CSS panel or in your child theme, you will be able to see your CSS overriding the theme’s when you look in the browser dev tool.

Do I need a child theme?

If you’re making more extensive changes, it’s probably best to set up a child theme.

A child theme has a folder in the wp-content > themes folder, just like its parent. You can see this with an FTP client (for example Filezilla) or with a file manager provided by your hosting provider (if available);
It must contain a style.css file;
The style.css file must link the child to the parent in a specific way.

An easy way to set up a child theme for Customizr is to download one free from the Press Customizr site. Install it by uploading it in your WordPress dashboard using Appearance > Themes > Add new > Upload.

Make sure to upload the full .zip file to WordPress — it won’t upload properly if you try to upload the unzipped files.

You can see more details on child themes here.

To put new CSS in your child theme:

Edit the file using the WordPress Editor (using Appearance > Editor); or
Download the file with FTP, edit it, and re-upload it.

What if I want to start using functions and php?

The child theme supplied on the Press Customizr site also contains a functions.php file.

Any php placed in the child-theme’s functions.php should be designed to override the theme’s functions.

Unless you really know what you are doing, you shouldn’t modify any of the php files in the theme’s folders — firstly because you don’t need to, as you can simply override their functions in your child-theme’s functions.php and secondly because you will lose your changes when the theme is updated. Sometimes people say “That’s OK, I’ll simply re-upload my version of the php file”, but what they forget is that (a) this way they will miss out on bug fixes and improvements in the future and (b) updates in other areas of the theme may mean that their old php code may eventually break their site altogether.

What does a child-theme’s functions.php look like?

<?php

Yup, that’s about it.

Some people also add a closing ?> tag. But that can be dangerous, because if there’s anything after that closing tag (such as a blank line), the php processor will throw out the whole thing and probably bring down your site. It’s safer to just leave the closing tag out altogether, because in any case, the php processor happily closes the tag itself when it gets to the end of the functions.php file.

So now you know the basics of customizing Customizr. Your knowledge will snowball from now on!