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.

Global settings

Skin

Social links

Links style and effect

Titles icons settings

Image settings

Responsive settings

Header

Design and layout

Site title & tagline

Logo & Favicon

Navigation

Content

Front page

Pages & Posts Layout

Post lists : blog, archives, …

Singles posts

Breadcrumb

Post metas

Comments

Footer

Widgets

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)

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 ? 🙂

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 :

51 thoughts on “Customizr theme v3.2.1 : the WordPress customizer is getting a lot of love”

I love the theme but can not figure out how to make the Social Media Icons and the Menu Items to be closer or have the Social Media icons above the Menu items so there is not so much space between them?

Hi Michael, we are currently handling those update support request in the Customizr support forum.
Would you mind to open a new thread in the forum ? It will be useful for other users facing the same issue.
Thanks for your understanding,
Nicolas.

Hi Nicolas,
Thanks for this new version but I have trouble updating from 3.1.10 to 3.2.5: It seems that there’s a conflict with the Customizr Child Theme.
After Customizr update, I had the message : Warning: array_merge() [function.array-merge ]: Argument #1 is not an array in /../wp-content/themes/customizr-child/inc/admin/class-admin-customize.php on line 127.
And updating to WP 4.0.1, this message : Fatal error: Class ‘TC_customize’ not found in /../wp-content/themes/customizr-child/inc/class-fire-utils.php on line 132
I didn’t find anything on the support about that. Do you know where it comes from? Thanks in advance for your help.

Hoping for a little help, since the last update, when viewing in smaller view ports my left sidebars are appearing above the content rather than below even though I have checked and ensured that I have set them to appear below the main content in the “Responsive settings” options. Before I updated to the latest version all sidebars always dropped below the main content…

Thanks for the theme. It was simple enough for a novice like me to pursue. I was just about ready to publish my site when this version was released. In the previous version I modified my theme skin using Method 1 as described here: http://presscustomizr.com/snippet/create-new-skin-color/ However, with the new version, the Header content (logo, social icons, navigation) are no longer visible – simply blank. I’m happy to create a new skin as you’ve described above but, that goes beyond my skill level. Can you provide any assistance with how to get my header content functional again?

Hi Matt, thanks for this comment.
About your assistance request : may I ask you to create a new thread in the Customizr support forum where it will make more senses than in this announcement post?
We’ll do our best to help and it will benefit to everyone.
Thanks

It looks like you’ve added some really cool stuff! Thanks for all your hard work! On a practice site ( http://www.artdesignsneed.com/newboxffg/ ) which I use to test stuff before going live I updated Customizr to the latest version.. the nav bar only spans 9 and not 12. I had a function that addressed this which originally helped the work I did to center the logo but now the navbar won’t span the entire width of the header.

I used the below code:

CSS

1

I tried using the updated hook of tc_new_menu_view but that didn’t work.

Would you know which hook I could use to help change the navbar span9 to span12?

I´m a newbie and I Updated my Customizr theme to 3.2.1 version, it seems to be beatiful!, however the snippet that I had in my last version´s CustomCSS are not working! specially the one which changed the background color in the navigation menu bar, shaded the menu items and the multilevel submenus. I got it in my child theme css style too and nothing happens! now are the same original fonts and colors; but the snippet was working perfectly with the last version.

Hi Miguel and thanks for this nice feedback!
We are currently updating the snippets impacted by the update, there might be disruptions in a few snippets before the complete check has been done.
Thanks,
Nicolas.

Hi John, I just cheked your website and could not reproduce this issue. On this page for example, it works as expected : in responsive mode, the sidebars are moved after the main content.
Did you change something since you reported this problem ?
Thanks

I’ve not changed anything – though still see the LHS sidebar “Archives” missing from the bottom when in Mobile size view. The RHS Sidebar with “Events” and “Teams” display just fine.
Firefox ver 32.03 & IE 11.0.9600 – same on mobile – I moved teams menu to RHS and it displays OK – so no drama.

I really appreciate all your hard work that went into making this theme.
Cheers
John

First may I commend you on a theme that is absolutely brilliant. It has enabled me to create club websites which look great, and which I maintain on a voluntary basis.

I would like to draw your attention to the fact that the side bars disappear when reducing the width of the browser to test responsiveness for mobile display in Ver 3.2.1. Same when viewing on a smart phone.

I’m enjoying the new improved theme but have found an issue with menu selection when viewing on an iPad. When I select the menu button navbar .btn-navbar on the right hand side, the page menu drops down as expected, but when I select the button again to close the list, the list closes but then drops-down again. I can see that it looks like I am double-tapping the menu button – which I’m not. It either gets stuck in the state with the menu list dropped down or it opens the list and closes the list.
Is this the right place to be reporting this?

I am of the opinion you increase the footer menu widgets area from three to four–since highly commercial websites need and use footer widgets more and more to put different link options. Again I think the theme could be more beautiful if it has the possibility of inserting a border frame.

Hi, thanks for this feedback.
-Footer : I agree, I am planning to make it more customizable in the next release.
-Border frame : I don’t really see what’s on your mind, could you provide an example ?
Thanks!

Many thanks for your prompt reply, I’ve got it sorted now But a couple of other issues on the CDN.

I’ve had to add the genericon’d plugin to get the genericons font to work without the plugin I get errors finding the fonts in the CDN at wp-content/themes/customizr/inc/assets/css/fonts/fonts.

Also the logo and the favicon are not being accessed from the CDN copy – how can I change this please.

I have a slider on the home page but WebPagetest says I should be serving scaled images – what should the slider image size be as a maximum – is it 1024 x 500px and how can I serve scaled images?

I use Woocommerce and I notice that your drop down menu drops down behind the main product image in Woo, despite some attempt to increase the z-index I have not been able to rectify the problem – any ideas please?

If I change a colour in blue.css can I just do the same in the blue.min.css – this used to work before but seems to stuff up the .css when I select ‘use the minified css’ in options…

Despite a few issues, I think your update is really good and as I’ve been working through things the theme is fast and powerful and with great responsiveness – well done.

Hello Nicolas,
Since it’s my first comment on your Customizer theme, I would like, first, to thank you so much for this outstanding theme. It’s easy to use, convenient to adjust, & it doesn’t need an advanced user to customize. In fact, I installed it easily & modified many things in a blast. And to support you, I purchased the two plugins: 1) WordPress Font Customizer, & 2) Featured Pages Unlimited. And this is why I am commenting on this new major update.

Since I used these two plugins to make major changes on my website & blog, will this new theme update affect the current modifications I have? I am not using a child theme, since I think the plugins are actually modifying the CSS codes for me automatically. Your immediate help is appreciated before I update.

Again, amazing theme, thank you so much & keep up this outstanding work.

I received the email you sent out about this update, and I had the impression that this could impact use of child themes but I can’t see any reference to this in this post. The new updates look great, some of which look like they’ll make easy options for some things I’m currently managing in Custom CSS, wondering if conflicts between the new options and CSS customisation is where I might run into issues?

Hi Dominic and thanks for your feedback. The risks are quite weak that you have a major conflict between your custom CSS and the new version. Most of the changes in v3.2.1 are additions to the previous version : the base CSS has been untouched, then there’s no regression threat.
Hope this will answer your question, cheers

can i add fonts to wp font customizer (HEB lang fonts for ex…) like in “font it” wp plugin ?

if not …….. will you add it to the plugin sometime in the future ?

i have a small stock of HEB lang fonts i like/designed and i prepared them for web use and now i am looking for a WP plugin like yours that conect to goole fonts or what ever plus giving you the possibility to upload fonts of your choice with or without conversion.

I’ve just installed 3.2.1 and can’t see the menu anymore
I see this in IE Inspect Element:
.resp.navbar {
display: none;
}
If I change it to something else e.g. block the menu appears
and am getting these errors in IE developers console:
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: genericons-regular-webfont.eot
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: Genericons.eot
I get this for 8 instances of various fonts

Hi Guy,
First I would advise to disable temporarily the CDN and see what you get.
Then, you might want to re-upload the CSS + javascript files of the updated version of Customizr to your CDN.
It will fix those issues.
Thanks

In 3.2 version is a little bug. First I have that your theme is astonishing and if my business will start to produce money I’ll buy your support..

Anyway, the bug is that I’ve tried to change my logo, but it doesn’t work.
I entered in cusomizing->Header->logo&favicon and upload a png picture. Still it doesn’t show on page but I have the option “Remove”.

Also, maybe you can help with the following customization
– I want to change the size of logo to height 50px, and to put the menu low in it’s box.

Hi Keos,
Thanks for this feedback. You should be able to upload your logo without problem. This feature has been successfully tested in the new version.
Would you mind to contact me with this form to grant me access to your website, I need to check your website to fix this issue.
Thanks and I look forward to reading from you,
Nicolas.

I really like your theme. It was easy to use and I’m looking forward to seeing how the updates change things. I’m still building my site and have come across some snafu’s, but have enjoyed the process so far.