Customizr theme v3.2.1 : the WordPress customizer is getting a lot of love

With v3.2.1, designing a website with the Customizr theme has never been so enjoyable, and there’s  much more to come!

Developers : check the changes and some good news!

 

Customizer improvements

Since its very inception back in may 2013, the Customizr theme has been different from most of the other WP theme by the fact that it has no admin options panel. Everything (excluding the WP built in options) is done in live preview from the WordPress Customizer screen.

With v3.2.x, the customizer has been entirely rethought and redesigned to provide the best webdesign experience.

In v4.0, WordPress core developers have brought many improvements to the customizer UI, in particular the panel idea. Panels are a way to group sections of settings : just like a section is a container for controls, a panel is a container for sections.

This feature was just what the Customizr theme needed to organize its growing numbers of settings (more than 94 settings to choose from as of v3.2.1). Navigating through the sections and panels of the customizer has never been so smooth and easy. I really hope you’ll enjoy this implementation!

 

 

 

6 panels to organize the options of the theme.

1. Global settings
   • Skin
   • Social links
   • Links style and effect
   • Titles icons settings
   • Image settings
   • Responsive settings
2. Header
   • Design and layout
   • Site title & tagline
   • Logo & Favicon
   • Navigation
3. Content
   • Front page
   • Pages & Posts Layout
   • Post lists : blog, archives, …
   • Singles posts
   • Breadcrumb
   • Post metas
   • Comments
4. Footer
5. Widgets
6. Advanced options
   • Custom CSS

 

Overview of the new settings

Titles icons settings

You can now decide where to display icons on the left of the titles for posts, pages, archives and widgets.

Icons are still displayed by default on the left hand side of the titles.

 

Header design and layout options

You now have way more control than before on your website’s header.

• 3 layouts are proposedfor the logo/title : left, center, right.
• The navbar box with a shadowed border can now be set to white/transparent
• The entire header can now sticks to the top of your website on scroll. This option is enabled by default on activation. You have many controls on the design of the sticky menu like in the screenshot below.

You can of course still set your title and description (tagline) and /or upload a logo and a favicon.

 

Slider’s height control and swipe on mobile

This was a recurring request from users in the forum and it’s now implemented in the theme. You’ll find this settings in Content > Front Page under the Slider Options section.

The slider’s height can only be set only for the home page in live preview. This will be improved in the future.

The custom height can optionally be applied to all your website sliders and can even use a custom image size to regenerate your thumbnails.

 

When displaying the theme on a mobile or tablet device, the slider’s controls (arrows) are not displayed anymore. You can swipe the image left and right with your finger to display your next or previous slide.

 

Thumbnail options

In posts lists, the thumbnail default shape is still rounded but you can now select other shapes and hover effects. You can also customize the relative position of the thumbnail to the post content : left, right, top, bottom.

 

In single posts, you can now display the thumbnail before or after the title.

 

My favorite location is before the title in full width, like in the screenshot below.

 

Post metas

Post metas are now always wanted; for example, there have always been disabled by default on home page in the Customizr theme. Now you can have more control on them with the new options of the customizer.

 

Custom CSS design and live customization

The Custom CSS box is now looking a bit more like a code editor and the font-size has been reduced. But more important, you don’t need to wait for the preview frame to refresh, the Custom CSS is not instantly applied to your preview frame!

 

Under the hood (for developers)

Check the full changelog here.

 

The theme now includes the less files of the skins!

If you don’t know what a less file is : less is a CSS pre-processor. In other words,  it extends CSS with helper functions allowing to standardize and optimize the front end web coding workflows. Twitter uses this technology in the Bootstrap framework included in the Customizr theme.

The good news is : you can now create any skin you want or even completely change the bootstrap grid of the Customizr theme.

How ? All the important css variables, except the skin colors, are in inc/assets/css/variables.less. To create a skin with a custom color for example, all you need to do is to copy an existing skin file like blue.less in the same folder, change the color variable at the beginning of the file and compile your less file. And boom : it will automatically shows up in the skin list of the customizer. Is’nt that awesome ? 🙂

To compile my less files, I  use the LESS build system package in Sublime Text 2 editor and a excellent software named Koala to handle the theme skins compilation and minification in batch.

 

Hammer.js

 

The theme now implements hammer.js to handle the swipe events of the slider.

The script is enqueued only with mobile devices ( uses wp_is_mobile() )

 

 

Logo getimagesize() bug fixed

For the logo, I have removed getimagesize() responsible for many bug reports in the forum. The logo width and height are now get directly from the WP attachement object which is way more reliable. Backward compatibility is ensured by testing if the option is numeric (id) and falls back to the path src type if not

 

Some hooks have changed

• tc_post_list_thumbnail has been changed to tc_display_post_thumbnail.
• tc_get_post_list_thumbnail has been change changed to tc_get_thumbnail_data

The following hooks are now handled as an array of css classes instead of a string :

• tc_logo_class
• tc_header_classes
• tc_post_list_content_class
• tc_left_sidebar_class
• tc_right_sidebar_class
• tc_slider_layout_class
• tc_footer_widget_wrapper_class
• tc_navbar_wrapper_class

 

Check the full hook list of the Customizr hooks API.

 

Main menu

The main menu is now rendered by a new function.

• Original function : TC_header::tc_navbar_display
• New function : TC_header::tc_new_menu_view

The css class notresp is not used anymore.

 

New javascript libraries in admin

To enhance the user experience in the customizer, 3 new excellent javascript libraries have been used.

• iCheck v1.0.1 by Damir Sultanov, MIT Licensed
• selecter v3.0.9 – 2014-02-10, Copyright 2014 Ben Plum, MIT Licensed
• stepper v3.0.5 – 2014-02-06, Copyright 2014 Ben Plum, MIT Licensed