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, 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.

Code snippets

The Customizr theme has been designed to be as much customizable as possible for webdesigners but also for developers. Therefore we have developed a number of  Code Snippets which you can find on the Press Customizr website.
These have been gathered after months of supporting the Forum and seeing the common issues Users have. They provide generic solutions to common issues, but try to understand the code rather than just cut & paste. It may be that you need to tweak the code to achieve exactly what you want.
Example of ready-to-use pieces of code you can find :
  • modify the css : menu, fonts, backgrounds, slider,…
  • re-arrange blocks of content in the website : add actions, filters, etc…
  • add new type of content,
Each snippet is tagged with : language (php, css, javascript…) , target (header, body, footer…), hook and function. This way you can easily find the code you need to customize your website.

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?

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!