Create a better options page with the theme customizer

Posted on 4th March, 2014 5 Comments

Since WordPress version 3.4, there has been a rather underused theme customizer, which allows the end user to view any changes made to the theme in a window next to the customizer! Now that’s super cool.

You can grab this options.php page from the WPtricks starter theme on GitHub, along with a contact page template, post navigation with thumbnails plus a bunch of other stuff you could learn from. Click here https://github.com/aaronsummers/wptricks-starter-theme

functions.php

Create a blank PHP document and save it as options.php, then place it in to your theme folder.

Now we just need to call our options.php into our theme by including it into our functions.php.

/*
 *	INCLUDE OPTIONS
 **/
require_once dirname( __FILE__ ) . '/options.php';

options.php

Add this function which will hold about 80% of the code we’re about to add.

<?php function wptricks_customize_register( $wp_customize ) {
	$template_dir = get_bloginfo('template_directory');
	// ADD THE OPTIONS CODE HERE...
} add_action( 'customize_register', 'wptricks_customize_register' ); ?>
	// OTHER OPTIONS RELATED CODE BELOW THE ADD_ACTION

What are we adding?

These are the items we’re going to add in this tutorial. I think from these four main options you’ll be able to change and adjust any part of your theme from the customizer.
If you like you can make a selection to scroll it into view.

  1. Add an image uploader for the header logo
  2. Provide some theme colour options
  3. Sidebar Positioning
  4. Social Media

1. Add an image uploader for the header logo

include this in our function we created above, this will show our current option in the WordPress theme customizer page. We’re giving the section a title, a priority (which will set the position of the section amongst our other options in the theme customizer page.), the higher the number the lower down the page the section will appear as an option and a brief description with useful information for the end user.

options.php

	
/*
* ADD IMAGE UPLOADERS FOR THE HEADER AND FOOTER LOGOS
 **/
$wp_customize->add_section( 'header_logo' , array(
	'title'       => __( 'Header Logo', 'WPtricks' ),
	'priority'    => 30, 
	'description' => 'Upload a logo to replace the default site name and description in the header, I recommend using an image that has a maximum height of 80px!',
) );

Then we’ll include a default setting for the logo which will include the default theme logo.
I’ve added my logo image to my themes images folder with a name of logo.png.

$wp_customize->add_setting( 'header_logo', array ( 'default'    => $template_dir . '/images/logo.png', ) );

The final section for our options.php is to add_control(). Controls serve two purposes: they create a “physical” control that allows a user to manipulate a setting, and it also binds a pre-defined setting to a pre-defined section.

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'header_logo', array(
	'label'    => __( 'Header Logo', 'WPtricks' ),
	'section'  => 'header_logo',
	'settings' => 'header_logo',
) ) );

header.php

Open up your header.php. My current header looks like this:

	
<header>
	<hgroup>
	<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
	<h2><?php bloginfo('description'); ?></h2>
	</hgroup>
</header>

I’m going to add my code in an if statement to only show the logo if it has been selected in the theme customizer page, but to show the default blog info if the selection hasn’t been made.

	
<header>
	<?php if ( get_theme_mod( 'header_logo' ) ) : ?>
	<!-- IF HEADER LOGO IS ACTIVE SHOW THIS -->
	<?php else : ?>
	<!-- ORIGINAL HEADER IN THE ELSE : STATEMENT -->
	<hgroup>	
	<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
	<h2><?php bloginfo('description'); ?></h2>
	</hgroup>		
	<?php endif; ?>
</header>

Then we just include our new logo… Replace the <!– IF HEADER LOGO IS ACTIVE SHOW THIS –> with the following snippet.

<header>
<hgroup class="logo-image"> 
	// WRAP OUR LOGO IN AN ANCHOR TAG
	<a href='<?php bloginfo('url'); ?>/' title='<?php bloginfo('name'); ?>' rel='home'>
		// THEN ADD OUR LOGO
		<img src='<?php echo esc_url( get_theme_mod( 'header_logo' ) ); ?>' alt='<?php bloginfo('name'); ?>'>
	</a>
	//KEEP OUR TITLE AND DESCRIPTION FOR SEO PURPOSES, WE'LL JUST POSITION THEM OFF SCREEN IN OUR CSS.
	<h1><?php bloginfo('name'); ?></h1>
	<h2><?php bloginfo('description'); ?></h2>
	</hgroup>
</header>

You’ll notice that we’re hooking into get_theme_mod() to call the logo.

WordPress says: “Retrieves a modification setting for the current theme. Along with set_theme_mod() this function can sometimes offer theme developers a simpler alternative to the Settings API when there is a need to handle basic theme-specific settings.”

style.css

Finally we’ll add our CSS, keeping with tradition I wanted to add my logo to the top left. But you can add your logo wherever you like, you could even modify the sidebar position options (below ) to be used with this logo. I wanted a sticky navigation to have used position:fixed, so change this to suit your own requirements.

/*
 *  HEADER + LOGO
 **************************************************/

body>header {
	background: #fff;
	color: #ccc;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 9999;
}
body>header h1, 
body>header h1 a, 
body>header h1 a:hover {
	margin: 0;
	padding: 0;
	font-size: 25px;
	color: #fff;
	border: none;
}
body>header h2 {
	color: #fff;
	margin: 0;
	padding: 0;
}
body>header hgroup {
	float: left;
	padding: 20px;
	background: #ff3b12;
	color: #fff;
}
/* SEPARATE STYLES FOR OUR LOGO VERSION... */
hgroup.logo-image {
	padding: 0;
}
hgroup.logo-image h1, 
hgroup.logo-image h2 {
	position: absolute;
	left: -9999px;
}

2. Add Colour Options

This can cover quite a broad area, so be creative with your ideas, I’m going to use a title font colour in my example but this could easily be used to alter any colour used on your site. I have added a couple of other options below to make it clear how you’d add more than one colour to your options, the process of using each of these colours is exactly the same.

options.php

If you’ve been following along then you can just add this below our add_control() function above in our options.php.

/*
 *  PROVIDE COLOUR OPTIONS
 **/
$colors = array();
/* ADD AS MANY ITEMS AS YOU WANT OR NEED TO OFFER FOR CUSTOMIZATION, JUST COPY AND ALTER AS NEEDED.
 * Ex. 
	$colors[] = array(
		'slug'=>'background_colour', 
		'default' => '#eee',
		'label' => __('Background Colour', 'WPtricks')
	);
	$colors[] = array(
		'slug'=>'footer_colour', 
		'default' => '#eee',
		'label' => __('Footer Colour', 'WPtricks')
	);
**/
$colors[] = array(
	'slug'=>'title_colour', 
	'default' => '#ff3b12',
	'label' => __('Title Colours', 'WPtricks')
);

Then below the colour options above, add the settings and controls.

foreach( $colors as $color ) {
	// SETTINGS
	$wp_customize->add_setting(
		$color['slug'], array(
			'default' => $color['default'],
			'type' => 'option', 
			'capability' => 
			'edit_theme_options'
		)
	);
	// CONTROLS
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			$color['slug'], 
			array('label' => $color['label'], 
			'section' => 'colors',
			'settings' => $color['slug'])
		)
	);
}

header.php

Now we’ve created the colour option/s we’ll need to call them in our theme, to do this we’ll use our title_color slug that we first added above when we created the colors array.
We’ll store the chosen colour as a php variable then just echo that into some CSS.

Open your header.php file and just above the closing </head> tag we’ll add the following snippet.

I am placing this below the wp_enqueue_script() and wp_head() calls.

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<!-- Below this add... -->

<?php	// SAVE OUR COLOUR AS A VARIABLE
	 $title_color = get_option('title_color'); 

	// ECHO THAT VARIABLE INTO SOME CSS ?>
	<style type="text/css">
		h1, h2, h3, h4 { color:  <?php echo $title_color; ?> !important; }
	</style>

<!-- Add before the closing head tag -->
</head>

That was pretty simple right? Next Sidebar Positioning…

3. Sidebar Positioning

optionsThis is probably the simplest of the bunch, despite being one of the most useful as it has the capability to completely modify your sites layout. We’re simply adding a css class to the body tag. You’ll need to download these images so you’ll have some nice image tiles instead of a radio button.

This is the third on the list, We’re going to allow user defined positioning of the sidebar, this is achieved through adding a class to the <body> tag which we’ll use in our CSS to adjust the layout of our page. Again have a think of how this could be used, you could use the body tag to completely change the whole colour scheme of a site, position a logo, navigation or a sidebar like we are about to do.

options.php

Back into your options.php and below the colour controls we added above, add this:

/*
 * CUSTOM SIDEBAR POSITIONING
 **/
$wp_customize->add_setting('sidebar_position', array());
$wp_customize->add_control('sidebar_position', array(
	'label'      => __('Sidebar Position', 'WPtricks'),
	'section'    => 'layout',
	'settings'   => 'sidebar_position',
	'type'       => 'radio',
	'choices'    => array(
		'sidebar-right'  => 'Right',
		'sidebar-left'   => 'Left',
		'sidebar-none'  => 'None',
	),
));
$wp_customize->add_section('layout' , array(
	'title' => __('Layout','WPtricks'),
));

Don’t forget our sidebar-positioning icons!!

Keep our options.php open and if you haven’t already add the icons you downloaded earlier to your main theme folder.
Then at the very bottom of our options.php we’ll add our sidebar icons, we are doing this by adding CSS to the theme customizer page.

Add this outside our main customizer function, below the // OTHER OPTIONS RELATED CODE.

 
/*
 * MAKE IT PRETTY ~ load styles only on the customizer
 ***/
 
add_action('customize_controls_print_styles', 'my_custom_styles');
function my_custom_styles() {
	$bloginfo = get_bloginfo( 'template_directory' );
  echo '<style>
			/* Theme customizer styles */
		#customize-control-sidebar_position > label {
			display: block;
			margin-bottom: 7px;
			width: 230px;
			height: 60px;
			background-position: top right;
			background-repeat: no-repeat;
		}
		#customize-control-sidebar_position > label {
			background-image: url( '. $bloginfo .'/images/options/2cr.png);
		}
		#customize-control-sidebar_position > label:nth-of-type(2) {
			background-image: url('. $bloginfo .'/images/options/2cl.png);
		}
		#customize-control-sidebar_position > label:nth-of-type(3) {
			background-image: url('. $bloginfo .'/images/options/1col.png);
		}
  </style>';
}

header.php

All this will do is save an array ‘sidebar-right’, ‘sidebar-left’ or ‘sidebar-none’. To use this we’ll need to add this in our header.php

<?php // ADD THIS TO JUST BEFORE THE </head> TAG...
  add_filter('body_class','my_class_names');	
  function my_class_names($classes) {
	  $classes[] = get_theme_mod('sidebar_position');
	  return $classes;
  }	
?>

	</head>

	<body <?php body_class($class); /*ADD THIS TO YOUR <BODY> TAG*/ ?>>

styles.css

Before you copy these styles you should see the structure of my page. if yours is different then adjust the CSS to suite your own theme.

<header></header>
<div class="content-wrapper"> <!-- WRAPS MY CONTENT IN A DIV WITH ~ MAX-WIDTH: 1150PX; -->
	<section> <!-- SECTION IS SET TO ~ WIDTH: 75%;-->
		<article></article>
	</section>
	<aside> SIDEBAR </aside> <!-- ASIDE IS SET TO ~ WIDTH: 25%; -->
</div>
<footer></footer>
/* THEME CUSTOMIZER - ALT LAYOUT STYLES */

.sidebar-left aside {
	padding: 0 45px 0 0;
	float: left;
}
.sidebar-right aside {
	padding: 0 0 0 45px;
	float: right;
}
.sidebar-none aside {
	display: none;
}
.sidebar-none .content-wrapper > section {
	width: 100%;
}

4. Social Media

Finally I’d like to share how to add social media to the customizer, for this I’ll be using fontAwesome so we show some nice little icons which I think you’ll agree is a lot smarter than showing an ugly text link.

So first things first and download fontAwesome. Then simply add it to your theme.

  1. Add the fonts folder to your theme folder.
  2. Add the css folder to your theme folder
  3. Open your styles.css and add at the top
     @import url(fonts/font-awesome.min.css);

options.php

Add the social media options to the customizer and register all of the options to be used in our theme.

/*
 * INCLUDE SOCIAL MEDIA
 **/
$wp_customize->add_section( 'my_social_settings', array(
		'title'		=> 'Social Media',
		'priority'     => 50,
	) );
 
$social_sites = my_customizer_social_media_array();
 
foreach($social_sites as $social_site) {
 
		$wp_customize->add_setting( "$social_site", array(
		'default' => '',
	) );

$wp_customize->add_control( $social_site, array(
		'label'   => __( "$social_site url:", 'social_icon' ),
		'section' => 'my_social_settings',
		'type'    => 'text',
		'priority'=> 10,
	) );
} // THE FINAL ADD ACTION BELOW WILL REGISTER ALL OF OUR ABOVE OPTIONS WITH WORDPRESS
	
add_action( 'customize_register', 'wptricks_customize_register' ); // REGISTER CUSTOMIZER END

Add another function

We’re almost there… With the options all registered lets add a function that will add our social media to the front end. Below the // OTHER OPTIONS RELATED CODE action we’ll add this function.

/*
 * THIS IS THE OTHER FUNC... SOCIAL MEDIA FUNCTION
 **/
function my_customizer_social_media_array() {
 	// ADD THE SOCIAL SITES
	// store social site names in array
	$social_sites = array('twitter', 'facebook', 'google-plus', 'flickr', 'pinterest', 'youtube', 'vimeo', 'tumblr', 'dribbble', 'rss', 'linkedin', 'instagram');
 
	return $social_sites;
	}
	// NEEDED FOR FONTAWESOME 
	// takes user input from the customizer and outputs linked social media icons
	function my_social_media_icons() {
 
	$social_sites = my_customizer_social_media_array();
 
	// any inputs that aren't empty are stored in $active_sites array
	foreach($social_sites as $social_site) {
		if( strlen( get_theme_mod( $social_site ) ) > 0 ) {
			$active_sites[] = $social_site;
		}
	}
 
 
	// CREATE THE OUTPUT
	// for each active social site, add it as a list item
	if($active_sites) {
		echo "<ul class='social-media-icons'>";
		foreach ($active_sites as $active_site) {?>
	<li>
	<a href="<?php echo get_theme_mod( $active_site ); ?>" target="new">
	<?php if( $active_site == "vimeo") { ?>
			<i class="fa fa-<?php echo $active_site; ?>-square"></i> <?php
		} else { ?>
			<i class="fa fa-<?php echo $active_site; ?>"></i><?php
		} ?>
	</a>
	</li><?php
	}
	echo "</ul>";
	}
	}

BOOM! We’re completely finished with our options.php now we can move on to the CSS.

style.css

I’m positioning my social icons left to right, If you’ve copy pasted from above you should be OK using this CSS.

ul.social-media-icons {
	float: right;
}
.social-media-icons li {
	float: left;
	font-size: 18px;
	margin: 0 2px;
}
.social-media-icons li a {
	padding: 0 5px;
	color: #aaa;
}

How to call our social media in our theme?

I’m calling this in the footer of my theme but you could add these wherever you want them…
Simply add this where you’d like the social icons to appear:

 <?php my_social_media_icons(); ?>

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]

Aure

10th, Nov, 14

Hi admin, nice article, thanks for effort, but i am facing problems in sidebar positioning. The section is displaying in customizer but not working.

I add the above code along css but what to do with ”

SIDEBAR


where to add this code and with what customizations

thanks….. hope reply soon

Aaron

11th, Nov, 14

I’m not sure I understand your question Aure?

Did you add all the sections required for the sidebar positioning?
Are you positive the CSS reflects your site structure?

Aure

12th, Nov, 14

Ya, CSS reflecting my site, but not working properly, i am facing problem in Style.css section where you said ..
………

thanks…

Aure

12th, Nov, 14


SIDEBAR

/* THEME CUSTOMIZER - ALT LAYOUT STYLES */

.sidebar-left aside {
	padding: 0 45px 0 0;
	float: left;
}
.sidebar-right aside {
	padding: 0 0 0 45px;
	float: right;
}
.sidebar-none aside {
	display: none;
}
.sidebar-none .content-wrapper &gt; section {
	width: 100%;
}

my template uses — div id primary-sidebar —

Aaron

13th, Nov, 14

Then you’ve found the problem, adjust the css to fit your theme. Without seeing the theme structure I’m unable to give your the exact css styles your going to need.
What theme are you using?

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]