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 this site and on the WordPress Customizr forum, we give you “snippets” to add to your site to customize it in some way. As you get more proficient, you will also write your own.
Customizr includes three specific image sizes for the slider and the thumbnails.
|270 pixels||250 pixels||yes||
|9999999 (meaning infinite)||500 pixels||yes||
|1170 pixels||500 pixels||yes||
If you’ve just switched to Customizr from a previous theme, you need to recreate your already uploaded images for them to nicely fit Customizr specific sizes. Otherwise, the circle hover effect or the slides might not be displayed properly.
Very usefull and easy to use, it will not erase your previous images, and automatically generates new images at the theme sizes in your /upload folder.
Customizr uses two handy sets of fonts : Genericons (made by Automattic) and Entypo. You can use them just like a normal font and use CSS properties like color, size, gradients, … Perfect for beautiful and light weight web design.
More information on how to embed the Entypo font here : http://www.entypo.com/
To use those icons, insert the following type of code :
<i class=“icon-search”></i> or and for icons in white color : <i class=“icon-search icon-white”></i>
More information on how to embed the Glyphicons font here : http://getbootstrap.com/2.3.2/base-css.html#icons
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, Customizr does not really use the WordPress template hierarchy, but there are no restrictions to use it in your developments, for pages, custom post types, taxonomies, etc…
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.
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,
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
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.
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 Firebug.
Do I need 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.
What does a child-theme’s functions.php look like?
Yup, that’s all there is to 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!