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

Image sizes

Customizr includes three specific image sizes for the slider and the thumbnails.

Width Height Cropped Used for

tc_thumb_size

270 pixels 250  pixels yes
  • Thumbnails
  • Featured pages

slider_full_size

9999999 (meaning infinite) 500 pixels yes
  • Slider full width

slider_size

1170  pixels 500 pixels yes
  • Slider “boxed”

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.

Hopefully, you don’t have to re-upload all your images! There is a fantastic plugin to do that : Regenerate Thumbnail.

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.

Icons

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.

Genericons

 All informations about how to embed the Genericons font here : http://genericons.com/

Entypo

More information on how to embed the Entypo font here : http://www.entypo.com/

Glyphicons

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

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

Go to the Customizr theme hooks API.

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.

Check out the code snippets

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

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

Do I need a child theme?

customizr-child-themeIf 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 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!

 

Further reading and resources