How to customize the Customizr WordPress theme ?
This documentation assumes you understand how to use WordPress, install and use a theme, and that you know the basics of html and CSS. But what if you wish to go further and customize Customizr a bit more?
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 :
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
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.
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,
Twitter Bootstrap Components
Customizr is built with Twitter Bootstrap v2.3.2. Check these code snippets to see a demonstration of which components you can use in the Customizr theme.
Note : We're currently moving forward to Bootstrap v4+ (September 2015)
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!