Customizr code snippets

The Customizr WordPress theme is entirely built on an extensible WordPress filter and action hooks API, which makes customizations safe and easy, without ever needing to modify the core structure. To some extents, the theme’s code acts like a collection of plugins that can be enabled, disabled or extended.

The following snippets can really help beginners and advanced developers to extend the Customizr core code and create any kind of websites. You’ll find snippets in the following web coding languages : CSS, HTML, Javascript, PHP.

If you are not familiar with the WordPress hooks API, I really recommend that you start with this quick and easy guide : WordPress Actions, Filters, and Hooks : A guide for non-developers.

Happy customizing 😀 !

Show random posts on front page

By default, the latest posts list on the front page gets displayed in reverse chronological order and that is what […]

Change title of time-based archives

If you want to change the titles of daily,monthly or yearly archives, add this to your child theme’s functions.php and […]

Move Post Meta before Title

If you want to have the post metas of your single posts displayed before the title and not after the […]

Replace tagline with buttons

If you want the tagline to be replaced with a button similar to the demo site, all you have to […]

Change the Menu label

The Hamburger Menu or the 3-bar Menu of the Customizr theme has the default label ‘Menu’ next to it. To […]

Display full-width pages

Last Reviewed: 24-Aug-15 (3.4.6) 3.3-3.4.* A common request on the Support Forum is for information on how to change the […]

Moving Header Block items (3.3)

Last Reviewed: 12-May-15 (3.3.23) 3.3.* If you need to move Header Block Items, 3.3.* release created more options for doing […]

Adjust 3.2+ Sticky Header

Last Reviewed: 30-Mar-15 (3.3.13) 3.1.* 3.2.* 3.3.* The new Sticky Header in 3.2 may need some adjustments. Where to copy/paste […]

Adding a widget area on home

In this simple example, I ‘ll show you how to widgetized the home page of the Customizr theme by placing a […]

Add Scrollspy to the Navbar

Last Reviewed: 8-Jun-15 (3.3.23) 3.1.* 3.2.* 3.3.* If you need to add Scrollspy to the Navbar: Where to copy/paste this […]

Some Customizr layout examples

In this snippet, we’ll show you some concrete examples of page layouts that use Customizr’s underlying Bootstrap 2.3.2 scaffolding

Make the Footer ‘Sticky‘

Notice:: Since Customizr 3.4.6 and Customizr-Pro 1.2.0 a new option has been added to make the footer sticky. Navigate through […]

Add new custom socials icons

Since Customizr v3.5+ Since Customizr v3.5, you can add a social link by adding this type of code to your […]

Change the post title tag to h2

In the Customizr WordPress theme, you can easily change the default h1 html tag of the post or page title […]

Stop slider pausing

Here’s a quick snippet to stop your slider pausing when you hover your mouse over it.

Move the Slider Titles/Button with CSS

Last Reviewed: 4-Apr-15 (3.3.13) 3.1.* 3.2.* 3.3.* There are many different solutions to repositioning elements using CSS. This snippet uses […]

Create a new Skin color

Last Reviewed: 11-Sep-15 (3.4.8) 3.1-3.4.* IMPORTANT! Customizer 3.1.11 added a new feature in the Skin Panel to use the minified […]

Rounded user avatars

Hi there ! If you like to follow the look and styling of the Customizr rounded images for featured pages […]

Customize logo link

Use this function in your child theme’s functions.php to change the default link on your logo to another, custom link. […]

Avoid wrapping of Menu items

Last Reviewed: 29-Mar-14 If you need to avoid wrapping of Menu items: Where to copy/paste this code? The simplest way […]

Remove the Tagline on Mobile

Last Reviewed: 22-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Moving the slider anywhere

Howdy, Here’s a quick recipe to change the slider position in Customizr (and Customizr-Pro), with only two lines of code! […]

Change the FB icon to Blue style

Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.* Where to copy/paste this code? NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes […]

Remove Navbar Box

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Customizr introduced built-in feature changes in v3.3. Go to Customize>Header>Design and layout. Uncheck […]

Add a border underneath the Slider

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Reduce the height of the Slider

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Customizr introduced built-in feature changes in v3.3. Go to Customize>Content>Front Page. Adjust the […]

Change Sidebar borders

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Move Menu below Navbar Box

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* This code does work in 3.3. But not one of my favourites! I […]

Adjust Navbar Box Settings

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Hide the Slider Controls

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Align the Featured Pages buttons

Last Reviewed: 29-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Change the size of the Social Icons

Last Reviewed: 29-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Change the Navbar Colors/Font/Size

Last Reviewed: 29-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Adding a multi-line tagline

Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.* Your site’s tagline is used to explain, in a few words, what the site is […]

Change the features of the Tagline

Last Reviewed: 29-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Change the Divider Bar

Last Reviewed: 29-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Center Header Block Items (3.1/3.2)

Last Reviewed: 25-Aug-15 3.1 3.23.3-3.4.* If you need to center Header Block Items, 3.2.* release created more options for doing […]

Move the Social Icons and Tagline

Last Reviewed: 1-May-15 (3.3.20) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Add “MENU” text to 3-bar Menu button

Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.* Where to copy/paste this code? NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes […]

Make the Header ‘Sticky’

Last Reviewed: 2-May-15 (3.3.20) 3.1.* 3.2.* 3.3.* Customizr introduced built-in feature changes in v3.2. Go to Customize>Header>Design and layout. Adjust […]

Remove Header Block Items

Last Reviewed: 7-May-15 (3.3.20) 3.1.* 3.2.* 3.3.* Customizr introduced built-in feature changes in v3.3. See this Snippet for 3.3 approach […]

Change Post/Page Icon & Title

Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.* Where to copy/paste this code? NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes […]

Change the Footer Widget Area

Last Reviewed: 7-May-15 (3.3.20) 3.1.* 3.2.* 3.3.* The default Footer area can be easily modified – see Snippet. I prefer […]

@media queries Responsiveness

Last Reviewed: 7-May-15 (3.3.20) 3.1.* 3.2.* 3.3.* A complexity for newbies to understand is that of ‘Responsiveness’. As the www […]

Add content below slider

Add this function in your child theme’s functions.php add_filter(‘tc_slider_display’, ‘content_after_slider’); function content_after_slider($html) { $after_slider = ”; //Put your HTML inside […]

Adding a logo in the footer credits

Notice for  Customiz-Pro (<1.2.5) users: In order to use this code you have to uncheck Enable the footer copyrights and […]

Adding Google Analytics to Customizr

For Customizr-Pro and Hueman-Pro users: You can paste your Google Analytics tracking code in a specific field designed for that. […]

Change Slider to Fader

Last Reviewed: 7-May-15 (3.3.20) 3.1.* 3.2.* 3.3.* One of the striking things with Customizr is the Front Page – the […]

Remove Post Meta Details

Last Reviewed: 7-May-15 (3.3.20) 3.1.* 3.2.* 3.3.* Customizr introduced built-in feature changes in v3.3. For more details, read the Documentation […]

Remove Post/Page Navigation (CSS)

Last Reviewed: 8-May-15 (3.3.23) 3.1.* 3.2.* 3.3.* Where to copy/paste this code? The simplest way is to use the Custom […]

Searching the WordPress Users Forum

Last Reviewed: 8-May-15 (3.3.23) 3.1.* 3.2.* 3.3.* We’d probably all agree that searching the Forum can be a frustrating task. […]

Altering/adding footer credits

New ! in Customizr Pro, you can easily customize your footer credits in live preview. If you’re a Customizr Pro (versions […]

Center the logo

Add this in your child theme’s functions.php: add_filter(‘tc_logo_text_display’, ‘your_logo_display’); add_filter(‘tc_logo_img_display’, ‘your_logo_display’); function your_logo_display($output) { return preg_replace(‘/brand span3/’, ‘brand span10 offset1’, […]

Move/Hide Post Images

Last Reviewed: 8-May-15 (3.3.23) 3.1.* 3.2.* 3.3.* Customizr introduced built-in feature changes in v3.3. Go to Customize>Content>Post lists. The following […]

Changing the footer background color

1) Click on Customiz’it! button and open the Custom CSS panel. 2) Copy/paste the following code and replace #f0f0f0 by your […]

Sub-menu drop down on mouse hover

Note: While this snippet is still valid for Twitter Bootstrap menu based, Customizr and Customizr-Pro now embed a new option […]

Adding a button to the menu

Howdy developer, here is a quick snippet to add a button to the Customizr theme menu. Example: the green button on […]