Customizr WordPress Theme Documentation

This documentation aims to give beginners and advanced users an overview of what is possible with the Customizr WordPress theme. Before diving into it, you might want to check those useful pages.

Theme overview

Fully responsive


The Customizr theme is built on a fluid flexible grid that automatically adapts to fit any screen devices : computers, laptops, tablets or smartphones.

Customizr main features

      • 17 skins
      • Custom logo uploa
      • Custom favicon upload
      • Responsive slider generator
      • Theme option panel
      • Child theme friendly
      • Multi-layouts
      • Threaded comments
      • 9 post formats
      • Editor style
      • Widget ready (2 in sidebars, 3 in footer)
      • Translation ready and RTL support
      • Custom CSS
      • Hooks API

Cross browser

The Customizr theme has been successfully tested with the major browsers.

Chrome Firefox ie Opera Safari


The theme is translation ready and currently available in the following languages :

      • Arabic (ar)
      • Brazilian Portugues (pt_BR)
      • Chinese simplified (zh_CN)
      • English (default)
      • French (fr_FR)
      • German (de_DE)
      • Italian (it_IT)
      • Polish (pl_PL)
      • Romanian (ro_RO)
      • Russian (ru_RU)
      • Spanish (es_ES)
      • Swedish (sv_SE)

Get started with Customizr


The easiest way to install Customizr is :

  1. Go to your WordPress dashboard
  2. Select Appearance > themes
  3. Click Add new
  4. Search for Customizr in the Search box
  5. Hover on the theme and click install.

If you need to download the whole zip file (e.g. to install locally), you’ll find the latest zip file on this page by clicking the number of the version, not the “svn” link.

Installing the theme will add a new folder in your existing WP folders/files. Customizr can be found at: wp-content/themes/customizr.

Having done a clean install, it is worth taking a backup of the customizr folders in case you mess up and want to get back. You can then simply copy the backup folders & overwrite the damaged folders, ensuring that you don’t leave any potentially corrupted files lying around.


Login as an Admin User via /wp-admin.
Go to your Dashboard>Appearance>Themes and it will show all the Themes that have been loaded in the WordPress installation, and by yourself since. Typically, you will see twentytwelve and twentythirteen at least. Click on the Customizr Activate link and you are ready to use Customizr.

Starting up

It now depends on your User level where you go to next. Anyone can do the following to get an understanding of the Theme.
1 Watch the Customizr Introduction video
2 Watch the Creating A Slider video

3 Go in Appearance > customize to see the Preview Panel. This is where you will setup the main design option of your website : color skin, logo & favicon, site title & tagline, front Page, navigation, Pages & Posts Layout, Comments, Social links, Images, Custom CSS.

To get an ‘out-of-the-box’ system working, fill in the panels to meet what you need.

Regenerate your images Important

The theme uses three additional image sizes that are automatically created when you upload them into WordPress. If you already have images in your media library, it is a good practice to regenerate your pictures to ensure they will look nice in the Customizr theme , especially for the slider, featured pages and post thumbnail. The best way to do that is to use a great and safe plugin called Regenerate Thumbnails, that you can download from the plugins admin screen or here.

WordPress version requirements

Customizr requires at least WordPress version 3.4+ to work properly (especially the WordPress live customizer feature).

Videos Tutorials perfect for newbies!

Here are two video tutorials created by WordPress professionnals and based on the Customizr Theme . They teach you how to create a real profesionnal website from scratch. I highly recommend those if you want to follow a “step by step” approach.

Create a child theme for developers

The best and safest way to develop and customize a website with Customizr is to work with a child theme. Everything you need to know on how to create a child theme of Customizr here.

Live preview options (customizer)

The Customizr WordPress theme uses the awesome WordPress customizer feature for most options, allowing you to design your website in live preview.

To access the customizer navigate to : Appearance > Customize.

To see a quick demo of how powerful is this feature is, check out this video.

Global settings


The theme comes whith 17 predefined color skins that you can preview and select from the customizer panel.

The main skin color is used for many elements of your site : links, buttons, tagline, icons, …


Google fonts

Web Design is 95% Typography.

Oliver Reichenstein from Information Architects Inc., one of the best design agency in the world.

Customizr includes a font picker allowing you to easily select some of the best Google Font combination for your headings (html tags H1, H2, … Hn ) and paragraphs (html tag p).

You also have the possibility to select one single font for your entire website, among a selection of cool fonts.

You can also select web safe fonts which are installed on most of the computers in the world if you prefer.


As of today, you can set up to ten social network profiles in the customizer option screen.

      • Twitter
      • Facebook
      • Google+
      • Instagram
      • Tumblr
      • Flickr
      • WordPress
      • Youtube
      • Pinterest
      • Github
      • Dribble
      • LinkedIn

The social icons can be displayed in four predefined locations of your website : header, footer, top of right sidebar.

1 Select where you want to display your social links

      • Header
      • Left sidebar
      • Right sidebar
      • Footer

2 Define your social profile links in each fields. For example :



You can activate a smooth scroll effect in your internal page links to an anchor.

The theme comes with a fade effect when hovering links activated by default. You can disable it by unchecking the option.


Title icons settings

Customizr uses a set of CSS font-icons that can be displayed next to most headings.



Image settings

The theme supports devices using high definition images, also called retina display devices.


Responsive settings

When your website is displayed on mobile devices like smartphone and tablets, the theme automatically adapts to fit the width. Sidebars, will are moved to the bottom of the page by default, but you can decide to make them stick to their initial position.

If you are using sliders in your pages, the pictures will be dynamically recentered by default.


Header : title, logo, menu

Design and layout

The theme comes with a sticky menu on scroll by default. There are many options to help you control the elements of the header that you want to display in sticky mode.

Another interesting option is the z-index setting. There might be contexts where the sticky header will be positionned behind other elements. You can adjust this with the z-index option.



Site title and tagline

If you did not choose any logo, the title appears on the top left corner.

The tagline is displayed on the top right corner of all your pages. If you don’t want to show a tagline, just delete it and save.

Note : from a search engine optimization perspective (SEO), the title and tagline are some of the most recurrent words throughout your website and they are also used in your page titles (the name in the tabs of your browser) by many SEO plugins.


Logo and favicon

Your logo will be displayed on the top left corner of all your pages.

Go to the customizer screen in the logo and favicon section and upload your logo file.

Supported logo file formats : jpg, png, gif

Recommended logo dimensions => max-height :100px, max-width : 250px For best results, try uploading a logo with those maximum dimensions. If your logo is larger, you can check the “force logo dimensions” option to make it fit better to the theme.

If there is no logo uploaded, Customizr will use your website title as logo.


The favicon is the small image showing up in the browser’s address bar and tabs. It’s a cool way to give your website an additional identity marker.

Supported favicon file format : ico, png, gif

Go to the customizer screen in the logo and favicon section and upload your favicon file.

Note: when migrating from one server to another (like from development to production for example), you’ll have to re-upload your logo and favicon.


Customizr comes out of the box with one menu location in the website header.

1 First create a menu in appearance > menus (click on Manage menus to go there)

2 Select a menu in the dropdown list of the customizer navigation section (see picture above).


Content : home, posts,…

Your front page will be the most visited page of your website and also the one with the highest ranking in the search engine results page (SERP).

Two other important facts to have a mind :

1 80% of your visitors will only visit your website once and never come back

2 an average 50% will only see one page (usually the home page) and “bounce” : in other words, leave your website.

With that says, what can you do to create an attractive front page that will really have an impact for the users experience and make them stay on your website?

There are some simple and efficient principles to apply if you want to design a successful front page :

1 Know your visitors :

      • Who are they (age, genre, country, job…) ?
      • What are they looking for ?
      • What can you offer that is really special (that they won’t find anywhere else)?
      • What you like to see in a website like yours?

2 Give an overview of what your website is about in 3 main points. Example of informations :

      • Who we are?
      • What we do?
      • What our clients say about us?
      • How to contact us?
      • What are our last news?
      • Where can you find us?

3 Engage your visitors

For that, an efficient approach is to use pictures and call to actions buttons. As they are generating emotions, images have a greater impact than words on your visitors. When you combine images with call to action buttons, you increase your chance to engage your visitors to go further in your website.

Customizr has been built with these principles in mind and the fact that it can be enjoyable to build a website! The theme makes it really easy to include pictures (in the slider and featured pages), text and call to actions. This will be a great help for a better engagement of your visitors.

Home page content and layout

1 Select what the type of content you want to display on your front page :

      • a static page : this will activate a dropdown list of your website pages. Select one in the liste. It will be displayed  below the slider and the featured pages if enabled. Note : on front page the page title is hidden.
      • your lasts posts : this will display your posts ordered by descending date. Your featured posts will be displayed first. Note : The number of posts per page can be changed in the page and post layout section.
      • don’t show pages or posts on front page : with this option, you can choose to display only the slider and/or the featured pages on your front page.

2 Choose a layout for your front page :


Home page slider options

1 Select a slider among the ones you have created (see below for slider creation in Customizr)

2 choose the slider options : full-width or boxed (more informations about the slider layout), delay between slides. Note : To remove the demo slider : select “No slider” in the dropdown list.


1 Enable or disable the featured pages from your front page. Featured pages are enabled by default.

2 Check/uncheck the images option for featured pages. The image displayed for a featured page is the one set as “featured image” for your page. Note: If you did not set any featured image, the theme will select the first image included or associated with the page. If there are no images at all associated to the page, then a holder picture will be displayed.

3 Edit the button text. Hint : If you don’t want to display any button, then delete the default text.

4 Select the pages for each featured pages block

5 Edit the text displayed below the image. By default, this is the page excerpt.



Pages & posts layout

Customizr offers four differents column layouts out of the box :

1 One column full width. See full width layout demo.
2 Two columns with sidebar on the left. See left sidebar layout demo.
3 Two columns with sidebar on the right. See right sidebar layout demo.
4 Three columns with two sidebars. See three columns layout demo.

You can define your page and post layout at two levels : in the main options screen (the live customizer) and for each single post or page.

Setting the global layout options

In the main option screen you can define the global default layout for the different screens of your website.

Global default layout. This layout will apply for the following pages :

      • Archives : categories, tags, author page, archive by dates (day, month, years)
      • Search pages
      • Error 404 page

Hint : if you check the Force default layout everywhere, the global default layout will be applied on all your website, including front page and will also overrides the specific layout set for pages and posts (see below).

Posts default layout. This layout will be the default layout for all your single posts. This can be overriden by a specific layout set for a post  (see below).

Note : The maximum number of posts per page selected below the post layout will be applied to all posts list : home page, blog page, archives (categories, tags, authors, dates), search page.

Pages default layout. This layout will be the default layout for all your pages. This can be overriden by a specific layout set for a page  (see below).


Setting a single post or page layout


In the edit screen of each post or page you can define a particular layout in a dedicated box (on the top right corner of the screen). This will override the default layout set in Customizr options but can be overriden if you check the force default layout everywhere option.

Post lists : blog, archives, …

Content options


Thumbnails options


Thumbnails shape


Thumbnails position



Default : round thumbnail with expand effect on hover an alternate position


Round thumbnails on the left


Large thumbnails on top with blur effect on hover


Single posts



Post metas




Threaded comments

In the WordPress admin Settings > Discussion you can enable the threaded (nested) comments option and define a maximum deep for dicussions. If you run a blog you probably know that this is a very good way to visually organize the comments for your posts.


Customizr handles this feature nicely, see the screenshot picture below.


Enable/Disable page comments

In WordPress, there is no quick option to disable comments only for pages. The Customizr theme includes an option for this in the comments section.



Advanced options

Custom CSS

This is going to take a little bit of knowledge of CSS. This is where the Custom CSS Panel comes into its own and provides a really powerful tool for applying CSS changes and seeing the effect immediately. Just remember to click the Save & Publish button to keep your changes.

Hint : escape all single and double quotes if you need to insert some (example selector:before {content: \Hello\;}  )

Further reading : guide to CSS and HTML in the Customizr theme



The Customizr theme includes a very handy ajax powered slider generator making slider creation easy as breeze. You can create an unlimited numbers of sliders with unlimited slides choosen from your media library.

Sliders are an efficient way to engage your visitors on your website, therefore the Customizr slider can also display call to actions buttons with link to any page or post of your site.

For a quick introduction on sliders in Customizr, check out this video : creating sliders with Customizr


1  From the Media Library, click on an image that you want to add to your slider
2  Click on the “Edit more details” link on the right of the screen (not the Edit button)
3 Scroll down and find the Slider Options box

4  Check “Add to a slider”
5  Set the optional call to action fields : title, description, text of the button, color and link to page/post


6 Select a slider in the dropdown list or write a name and click on the “Add a slider” button : this will automatically add the current media to your slider (no need to refresh)


Adding images to an existing slider

1 Go to the edit screen of any image
2 Find the Slider options box
3 Check “Add to a slider”
4 Set the optional call to action fields : title, description, text of the button and link to page/post
5 Select a slider in the list

Reordering the slides (drag and drop)


The slides can be manually reordered with a drag and drop feature. Just put your mouse over any slides and once you see this icon : cursor_drag_arrow, just left click on the slide and drag it anywhere in your slider.

This will be automatically saved, no need to refresh.

Adding a slider to any post/page

1 Go to the edit screen of any page/post
2 Find the slider options box


3 Check “Add a slider to this post/page”
4 Select a slider

5 Change the delay and layout field if needed
6 Update the page

Changing the delay between each slides

Below this label : “Delay between each slides in milliseconds (default : 5000 ms)“, set your custom delay in the field. For example, if you want to have a 3 seconds delay between each slides, set this value to 3000.

Setting the layout of the slider : full width or boxed

Below this label : “Slider Layout : set the slider in full width”, click on the iphone like button to set your slider layout to full width or boxed.

By default, the layout is set to “full width”, wich means that the slider will occupy the full width of the browser screen. If you choose the boxed layout, the slider will have a maximum width of 1170 pixels.

Deleting a slider


In the Slider options box, at the top of the slides table, click on “Delete this slider”.

This action will delete the slider but of course will not delete the images from your media library.

Post Formats and Navigation

Posts formats


On the left sidebar of the edit post screen, you will find the post format box (see the screenshot above). Just select a format the post format you want. In Customizr, you can choose up to 10 post formats for your posts. Each post format is dispalyed with a particular style and icon.

Post formats are very useful to visually distinguish the type of content and they add a nice webdesign and color touch to your website.

Demo : see all Customizr post formats in action



















Post navigation

Single post


At the bottom of a single post, the theme displays a block of navigation links to the previous and next post (sorted by dates).

Post list


For lists of posts like home, archives (categories, tags, dates, author), search pages, Customizr displays a navigation block at the bottom of the list, with links to the previous and next pages of posts.

Customizr offers five “widgetized” areas :

  • 2 for sidebars : sidebar left and right
  • 3 in footer : left, middle, right

If you want to customize those areas, go to Appearance > Widgets and drag’n drop your desired widgets in any of the widget areas.

Image Galleries


The Customizr theme uses the native WordPress Gallery that you can include in your pages and posts. Acool slow motion zoom effect is activated (with modern browsers only) when hovering the picture thumbnails.

Infos : More information about the WordPress Gallery.

Demo : See the live demo of the Customizr Gallery.


On the web, speed is key!

High performance web sites lead to higher visitor engagement, retention and conversions


Each time a web page has to get an external ressource (stylesheet, javascript file, image, …) , it increases the loading time of the page. However, since browsers cache the css and javascript it is better for performance standpoint to make those ressources external than to embed them directly in your webpage.
To minimze the number of http requests to get all external ressources, the best solution is then to compile them into compressed files (one for CSS and one for js for example).

There are good plugins to handle this : Total Cache and Super Cache are your friends. I use W3 Total Cache on most of my WordPress websites. Very good, free and highly reliable. Must used!

Have you checked if your website loads fast? If not then test it with the following online tools and see what kind of improvements you can make :

Before implementing any performance plugins on your website try to compress your pictures as much as possible. There are many ways to do that but some online tools like are doing it very well.


The web is not a safe place. As of 2013, WordPress powers almost 20% of all websites. Every WordPress install are similars, and hackers are well aware of that! You must protect your WordPress install. Here are two interesting plugins to do reinforce your security :

Good practice 1 : Always keep all your active WordPress components (themes and plugins) up-to-date, including WordPress itself of course.

Good practice 2 : Delete inactive themes and plugins in your install. Always.


To become Google’s best friend, I recommend WordPress SEO by Yoast : the best SEO plugin for WordPress to me,  and very easy to configure.


      • Regenerates thumbnails : the plugin to generates Customizr specific image sizes
      • Unveil Lazy Load.  Drastically improve page loading time.  Load an image when it’s visible in the viewport.


      • Lazy load for videos. another good plugin to boost page loading performances. the plugin basically replace the quite heavy Youtube / Vimeo ifram by a screenshot. On click, the video is loaded and replace the screenshot.
      • Custom sidebars :  Great and fully Customizr compatible plugins. Allows to create your own widgetized areas and custom sidebars, and select what sidebars to use for each post or page.

Child Theme



If you face problems with the theme and you are not sure what to do , then:
1) Watch the Introduction video again
2) Watch the Creating A Slider video again

Hint : get the basics working before you try to do anything further.

If you still can’t fix your issue, we’ll try to get you going in the user forum on the platform. Just to help us, please check the following before jumping into the forum.

Search for your symptoms, as there may already be a solution to your problem in either the Forum or the Code Snippets.

Check your plugins

Many issues are caused by conflicts between the Theme and Plugins. If you consider the combinations, there could be an infinite number of root causes for such problems. We are not flawless and we have been known to find bugs our code. Our solutions are easy and we can ‘fix in next release’.

Beside, we have NO control over plugins. You must take responsibility for reporting any conflicts to the Plugin Author, or you may have (in extreme cases) to choose another Theme if the Plugin is the most important part of your solution.

The easiest way of diagnosing if a Plugin is the root cause, is to Deactivate them all and then Activate each in turn. Test after each one is re-activated until the error happens – that’s the culprit. To quickly Deactivate all Plugins, rename the wp-content/plugins folder to anything else (eg _plugins, oldplugins). Do the Zero-Plugin test and if it looks OK, rename back to wp-content/plugins and start to manually Deactivate them all, then Activate one at a time.

Check your configuration

Check your configuration is setup correctly. Some problems (eg White Screen of Death – WSOD) are typically caused by problems with the .htaccess and wp-config.php files. If you have a localhost system, did you ftp the latest files back to the Server?
Hint : I resist deleting files until I’m sure I have a solution. So you will find .htaccess.notworking, .htaccess.saved, wp-config.old etc on my hard drive.


Guess what, we’re waiting to hear about your problem now! When you raise a new Topic in the Forum, give it a meaningful description that may be searched for in the future. Please do not latch on to an existing Post and add further questions. Typically, these are already marked [resolved] and do not get any urgent attention. If you have a site that is accessible, please remember to include a url so we can take a look at the problem.

And when we have sorted your problem out, please be courteous and mark it [resolved] in the right hand sidebar. We then know we have another satisfied user.


If you appreciate the theme and want to give back in return, your contribution is welcome of course! I always need help in the support forum. So if you think you can share your skills, that’s just great! It is also a very good way to learn as we faces new problems and code challenges everyday.

I take the occasion to thank three Customizr users here who became part of the story :  Electricfeet,RdellConsulting and Acub. They all started by answering questions in the forum and quickly became expert with the theme. Now they also share their knowledges in the snippets section of this website.

We are here to help you, and request nothing in return. Please, take the time to identify clearly your problem and check if it is not already solved on this site or on the forum. That way, we can focus more on the theme continuous improvements, to make Customizr the best free theme for you!

 Customizr support forum.


If you need to dive a bit more in the code for your customizations, the theme offers tools that will make your life easier.

Image sizes

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

Width Height Cropped Used for


270 pixels 250  pixels yes
  • Thumbnails
  • Featured pages


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


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.


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.


 All informations about how to embed the Genericons font here :


More information on how to embed the Entypo font here :


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 :

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 Themes & Co 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


gpl_logo_smallCustomizr is licensed under the GNU GPL v2 or later.

You can use it for commercial or non commercial projects.


First of all, Customizr would never have existed if WordPress had not been created, 10 years from now, by the very inspired Matt Mullenweg. Thanks to him for developing the best CMS in the world! The people below are all volunteers or developers who share their amazing code with the world.

WordPress Review Team

Those guys are doing an awesome job! They are a bunch a volunteers, WordPress experts, reviewing every single theme submitted to the platform. They carrefully check if each theme is compliant with the guidelines (which is quite a big task to do believe me!). So thanks to them, and especially to the guys who reviewed and approved Customizr :

Customizr contributors

Customizr core code contributors


      • Joris Dutmer (nl_NL)
      • Evgeny Sudakov (ru_RU)
      • Igor (ru_RU)
      • Marcin Paweł Sadowski (pl_PL)
      • Johnny Nyström (sv_SE)
      • Andrea (it_IT)
      • Roner Marcelo (pt_BR)
      • Rodrigo Stuchi (pt_BR)
      • María (es_ES)
      • Pia Wiche (es_ES)
      • Martin Bangemann (de_DE)
      • Luckie Joy (zh_CN)
      • Ramez Bdiwi (ar)
      • Andrei Georghiu (ro_RO)
      • Ferencz Székely (hu_HU)
      • Jaume Albaigès (ca_ES)
      • Ahmet Hakan Ergün (tr)
      • Martin Filák (cs_CZ)

Documentation credits : Thanks to Dave Bardell for his kind help and advices to write this documentation