WordPress Theme Creation 4: Footer Options

This is the fourth in a series of posts in which I give you detailed instructions to create a WordPress theme with many theme options. You can find the first three parts here: Part 1, Part 2, Part 3. This post deals with all the options for our footer.

Because we are giving our users so many choices and customization options for the footer, I decided to deal with the it in its own separate tutorial.

This time we will:

  1. Add a Footer section to the customizer
  2. Add controls to customize the footer text
  3. Give users a textarea option in the footer
  4. Style the lines in the footer with a color control
  5. Add 3 equal widget areas to the footer

Add a Footer section to the customizer

The first thing we will do here is to add a new Footer section to the customizer. This section will hold all of our fields that apply to everything in the footer.

/**
 * Add the footer text section
 */
mooi_Kirki::add_section( 'footer_text', array(
	'title'      => esc_attr__( 'Footer', 'mooi' ),
	'priority'   => 110,
	'capability' => 'edit_theme_options',
) );

As you can see this looks pretty similar to the sections we have created so far, except that I gave it a priority of 110. This will place it just under Widgets in the customizer.

Add controls to customize the footer text

Next, we start creating the fields. The first one will be where they enter the text in the footer. Our default here is All rights reserved

/**
 * Add the footer text control
 */
mooi_Kirki::add_field( 'mooi_theme', array(
	'type'        => 'text',
	'settings'    => 'footer_start_text',
	'label'       => esc_attr__( 'Enter some text', 'mooi' ),
	'description' => esc_attr__( 'This will replace the All rights reserved text in the footer.', 'mooi' ),
	'section'     => 'footer_text',
	'default'     => 'All rights reserved',
) );

Now, we have to use this control. So, open footer.php:

<div class="site-info text-center">
			
	<?php 
		$footer_start_text = get_theme_mod( 'footer_start_text' ); 
		echo '<span class="footer_text">' . $footer_start_text . '</span>'; 

	?>
			
</div><!-- .site-info -->	

This line gets our theme mod and assigns it to a variable so that we can use that variable: $footer_start_text = get_theme_mod( 'footer_start_text' );

echo '<p class="footer_text">' . $footer_start_text . '</p>'; is the output using the variable we just created. I have also assigned a class to the element so that our users can style it separately. Also note that I added the Bootstrap class text-center to the site-info div, for obvious reasons.

wordpress footer

I’m also adding a typography control, because as per our design, the text in the footer is styled differently than all the other typography elements. I’m going to be adding this to our Footer section, instead of the Typography, to keep all our footer options together

/**
 * Add the footer_text-typography control
 */
mooi_Kirki::add_field( 'mooi_theme', array(
	'type'        => 'typography',
	'settings'    => 'footer_typography',
	'label'       => esc_attr__( 'Footer Typography', 'mooi' ),
	'description' => esc_attr__( 'Select the typography options for the text in your footer.', 'mooi' ),
	'help'        => esc_attr__( 'The typography options you set here apply to the All rights reserved and date in your footer.', 'mooi' ),
	'section'     => 'footer_text',
	'priority'    => 10,
	'default'     => array(
		'font-family'    => 'Open Sans Condensed',
		'variant'        => '400',
		'font-size'      => '25px',
		// 'letter-spacing' => '0',
		'color'          => '#ffffff',
	),
	'output' => array(
		array(
			'element' => array ( '.footer_text' ),
		),
	),
) );

Next, let’s add the control so users can easily change the year. I am using a new kind of Kirki field here i.e. number:

/**
* Add the footer year control
*/
mooi_Kirki::add_field( 'mooi_theme', array(
    	'type'=> 'number',
    	'settings'=> 'footer_year',
    	'label'   => esc_attr__( 'Enter a year', 'mooi' ),
    	'description' => esc_attr__( 'This will be the year in your footer.', 'mooi' ),
    	'section' => 'footer_text',
    	'default' => 2016,
    	'choices' => array(
		'min'  => 1900,
		'max'  => 2100,
		'step' => 1,
	),
    ) );

I also want to add the copyright icon. We will give it its own typography control. We will give it its own class called icon, so that we can style it separately from all other font awesome icons.

/**
 * Add the font awesome copyright icon control
 */
mooi_Kirki::add_field( 'mooi_theme', array(
	'type'        => 'typography',
	'settings'    => 'fa_typography',
	'label'       => esc_attr__( 'Copyright Icon', 'mooi' ),
	'description' => esc_attr__( 'Select the font size and color for your copyright icon.', 'mooi' ),
	'help'        => esc_attr__( 'The typography options you set here will only apply to the font awesome copyright icon.', 'mooi' ),
	'section'     => 'footer_text',
	'priority'    => 10,
	'default'     => array(
		'variant'        => '700',
		'font-size'      => '28px',
		'line-height'    => '1.5',
		'color'          => '#fdd017',
	),
	'output' => array(
		array(
			'element' => array( '.icon' ),
		),
	),
) );

Now, let’s add the changes we have made so far to our footer.php:

<div class="site-info text-center">
	<?php 
		$footer_start_text = get_theme_mod( 'footer_start_text' );
		// get the year control and assign it to a variable 
		$footer_year = get_theme_mod( 'footer_year' );

		// change this line to display the font awesome icon and the year
		echo '<span class="footer_text">' . $footer_start_text . '</span>' . " " . '<span class="icon"><i class="fa fa-copyright"></i></span>' . '<span class="footer_text">' . $footer_year . '</span>'; ?>
	?>	
</div><!-- .site-info -->

The next thing we need to do is to create two controls: one where they can add a link and another where they can add the text for this link. We will also create a typography control, so that they can style this separately.

/**
 * Add the footer link control
 */
mooi_Kirki::add_field( 'mooi_theme', array(
	'type'        => 'text',
	'settings'    => 'footer_link',
	'label'       => esc_attr__( 'Enter your website URL', 'mooi' ),
	'description' => esc_attr__( 'This is the link in the footer.', 'mooi' ),
	'section'     => 'footer_text',
	'default'     => 'http://lanigouws.co.za',
) );

/**
 * Add the footer name control
 */
mooi_Kirki::add_field( 'mooi_theme', array(
	'type'        => 'text',
	'settings'    => 'footer_name',
	'label'       => esc_attr__( 'Enter your website/business name', 'mooi' ),
	'description' => esc_attr__( 'This will be the website name in the footer.', 'mooi' ),
	'section'     => 'footer_text',
	'default'     => 'Lani Gouws',
) );

/**
 * Add the footer link's name typography control
 */
mooi_Kirki::add_field( 'mooi_theme', array(
	'type'        => 'typography',
	'settings'    => 'footer_name_typography',
	'label'       => esc_attr__( 'Footer Website Name', 'mooi' ),
	'description' => esc_attr__( 'Select the typography options for your website/business name link in the footer.', 'mooi' ),
	'help'        => esc_attr__( 'The typography options you set here will apply to only the link in the footer.', 'mooi' ),
	'section'     => 'footer_text',
	'priority'    => 10,
	'default'     => array(
		'font-family'    => 'Open Sans Condensed',
		'variant'        => '900',
		'font-size'      => '28px',
		'color'          => '#ffffff',
	),
	'output' => array(
		array(
			'element' => ('.footer_name'),
		),
	),
) );

Now we can add this to our footer.php template. We assign the controls to variables again and then we use those in the template to display.

<div class="site-info text-center">
	<?php 
		$footer_start_text = get_theme_mod( 'footer_start_text' ); 
		$footer_year = get_theme_mod( 'footer_year' );
					
		// get the link and text controls and assign to variables
		$footer_link = get_theme_mod( 'footer_link' );
		$footer_name = get_theme_mod( 'footer_name' );

		echo '<span class="footer_text">' . $footer_start_text . '</span>'	. " " . '<span class="icon"><i class="fa fa-copyright"></i></span>' . '<span class="footer_text">' . $footer_year . '</span>'; ?>
					
		<!-- output the link and related name here-->
		<a href=<?php echo esc_url( $footer_link ); ?>>
			<?php echo '<span class="footer_name">' . $footer_name . '</span>'; ?>
		</a>
	?>
			
</div><!-- .site-info -->

Good stuff! Now your users can change any part of the footer text.

Give users a textarea option in the footer

I also want to give them the option to put in their own text. So, what we’re going to do is to use a new kind of control. We are going to create a nice toggle switch and use an if statement which will allow them to switch this default footer text off and switch on a textarea where the can write anything they want. So, let’s create the control in customizer.php

/**
 * Add the footer toggle switch control
 */
Kirki::add_field( 'mooi_theme', array(
	'type'        => 'toggle',
	'settings'    => 'footer_toggle',
	'label'       => esc_attr__( 'Switch the default footer off', 'my_textdomain' ),
	'description' => esc_attr__( 'Switch this off to write your own text in the footer .', 'mooi' ),
	'section'     => 'footer_text',
	'default'     => '1',
	'priority'    => 10,
) );

Now, let’s add this to our footer.php:

<div class="site-info text-center">
	<!-- if switched on, display the default footer -->
	<?php if ( true == get_theme_mod( 'footer_toggle', true ) ) : ?>
	
	<?php 
		$footer_start_text = get_theme_mod( 'footer_start_text' ); 
		// get the year control and assign it to a variable 
		$footer_year = get_theme_mod( 'footer_year' );
					
		// get the link and text controls and assign to variables
		$footer_link = get_theme_mod( 'footer_link' );
		$footer_name = get_theme_mod( 'footer_name' );

		// change this line to display the font awesome icon and the year
		echo '<span class="footer_text">' . $footer_start_text . '</span>'	. " " . '<span class="icon"><i class="fa fa-copyright"></i></span>' . '<span class="footer_text">' . $footer_year . '</span>'; ?>
					
		<!-- output the link and related name here-->
		<a href=<?php echo esc_url( $footer_link ); ?>>
			 <?php echo '<span class="footer_name">' . $footer_name . '</span>'; ?>
		</a>
	?>

	<?php else : ?>
		<?php 
		 	// The code for our textarea will go here 
		?>
	<?php endif; ?>	

Next, let’s add the control for our textarea, back in customizer.php, of course.

/**
 * Add the footer textarea control
 */
Kirki::add_field( 'mooi_theme', array(
	'type'     => 'textarea',
	'settings' => 'footer_textarea',
	'label'    => __( 'Footer Textarea', 'my_textdomain' ),
	'section'  => 'footer_text',
	'default'  => esc_attr__( 'The text you write here will be displayed at the bottom of your footer.', 'my_textdomain' ),
	'priority' => 10,
) );

I also want to give it its own typography control.

/**
 * Add the footer textarea's typography control
 */
mooi_Kirki::add_field( 'mooi_theme', array(
	'type'        => 'typography',
	'settings'    => 'footer_textarea_typography',
	'label'       => esc_attr__( 'Footer Textarea Typography', 'mooi' ),
	'description' => esc_attr__( 'Select the typography options for your footer textarea.', 'mooi' ),
	'help'        => esc_attr__( 'The typography options you set here will apply only if you have switched off your default footer and entered some text in the textarea.', 'mooi' ),
	'section'     => 'footer_text',
	'priority'    => 10,
	'default'     => array(
		'font-family'    => 'Open Sans Condensed',
		'variant'        => '400',
		'font-size'      => '22px',
		'color'          => '#ffffff',
	),
	'output' => array(
		array(
			'element' => ('.footer_textarea'),
		),
	),
) );

Let’s add it in our footer.php:

<div class="site-info text-center">
	<!-- if switched on, display the default footer -->
		<?php if ( true == get_theme_mod( 'footer_toggle', true ) ) : ?>
			<?php 
				$footer_start_text = get_theme_mod( 'footer_start_text' ); 
				// get the year control and assign it to a variable 
				$footer_year = get_theme_mod( 'footer_year' );
				// get the link and text controls and assign to variables
				$footer_link = get_theme_mod( 'footer_link' );
				$footer_name = get_theme_mod( 'footer_name' );
				// change this line to display the font awesome icon and the year
				echo '<span class="footer_text">' . $footer_start_text . '</span>'	. " " . '<span class="icon"><i class="fa fa-copyright"></i></span>' . '<span class="footer_text">' . $footer_year . '</span>'; ?>
				<!-- output the link and related name here-->
				<a href=<?php echo esc_url( $footer_link ); ?>>
					<?php echo '<span class="footer_name">' . $footer_name . '</span>'; ?>
				</a>
			?>

			<!-- if switched off, display the text from the textarea -->
			<?php else : ?>
				<?php 
				 	// get the textarea control and assign it to a variable 
					$footer_textarea = get_theme_mod( 'footer_textarea' );

					echo '<span class="footer_textarea">' . $footer_textarea . '</span>'; 

				?>
			<?php endif; ?>			
		</div><!-- .site-info -->

Cool! Go play with this toggle switch and textarea to make sure your options function as expected. If not, go back and check your code.

wordpress footer

When all this is done, you should now have a variety of options in the Footer section:

wordpress footer

Style the line in the footer with a color control

Right. We know have most of the stuff we need to make up the bottom of the footer. There is just one thing I left out: the yellow horizontal line. So, I am going to add a <div> here instead of an obvious hr element, since it will just be easier to style on its own. Then we’ll give it a class(.foot-line) and also it’s own color control.

First add this styling in style.css under #Footer. .

.foot-line {
	height: 2px;
	width: 100%;
}

Next, let’s add the actual div in footer.php.

<div class="site-info text-center">
	<div class="foot-line" style="background-color:<?php echo get_theme_mod( 'foot_line', '#fdd017' ); ?>"></div>

Now we can give it a color control. It makes more sense to me to have this control at the very top of all the footer controls. So, let’s add its control just after where we created the Footer section.

/**
 * Add the footer line color control
 */
Kirki::add_field( 'mooi_theme', array(
	'type'        => 'color',
	'settings'    => 'foot_line',
	'label'       => esc_attr__( 'Change the color of the horizontal line in the footer', 'mooi' ),
	'section'     => 'footer_text',
	'default'     => '#fdd017',
	'priority'    => 10,
	'output'      => '.foot-line'
) );

Play with all the options that we have created to make sure they all function as expected. If not, go back and check your code again.

wordpress footer

Add 3 equal widget areas to the footer

I do not know if you can gather this from our design, but we will have three widget ready areas, of equal width, in the footer: The Left Footer, Middle Footer and Right Footer will be three areas where you can drag and drop any of our widgets.

To create these we have to go edit our function.php. Find this code:

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function mooi_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'mooi' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', 'mooi' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'mooi_widgets_init' );

This is the code that created the sidebar you can use when you go to Appearance->Widgets:

wordpress footer

Let’s add our own. Be careful! Make sure you add all three INSIDE the mooi_widgets_init() function:

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function mooi_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'mooi' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', 'mooi' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

	/*
	* The left footer sidebar
	*/
	register_sidebar( array(
		'name'          => esc_html__( 'Footer Left', 'mooi' ),
		'id'            => 'footer-left',
		'description'   => esc_html__( 'Widgets you add here will appear in the left column of the footer.', 'mooi' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

	/*
	* The middle footer sidebar
	*/
	register_sidebar( array(
		'name'          => esc_html__( 'Footer Middle', 'mooi' ),
		'id'            => 'footer-middle',
		'description'   => esc_html__( 'Widgets you add here will appear in the middle column of the footer.', 'mooi' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

	/*
	* The right footer sidebar
	*/
	register_sidebar( array(
		'name'          => esc_html__( 'Footer Right', 'mooi' ),
		'id'            => 'footer-right',
		'description'   => esc_html__( 'Widgets you add here will appear in the right column of the footer.', 'mooi' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'mooi_widgets_init' );

When you go back to Appearance->Widgets, you will see our new widget areas.

wordpress footer

You can even drag widgets into them. However, they don’t output anything yet. We have to use them in our footer.php first.

<footer id="colophon" class="site-footer" role="contentinfo">
	<div class="site-info text-center">
	<div class="foot-line" style="background-color:<?php echo get_theme_mod( 'foot_line', '#fdd017' ); ?>"></div>
		
	<!-- add the 3 footer widget areas -->
	<div class="row">
        	<div class="col-sm-4">
            		<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('footer-left') ) ?>
        	</div>
        	<div class="col-sm-4">
            		<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('footer-middle') ) ?>
        	</div>
        	<div class="col-sm-4">
            		<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('footer-right') ) ?>
        	</div>
     	</div><!-- /main footer widget areas -->

	<div class="foot-line" style="background-color:<?php echo get_theme_mod( 'foot_line', '#fdd017' ); ?>"></div>

Here we added the other line at the top of our footer (as per our design). Next, we created a Bootstrap row to contain our widget areas. Then we create three Bootstrap sections, each 4 columns wide, and add our widget code to each. Now, you can go test it by dragging widgets into the widget areas.

wordpress footer

Yes, we clearly need some widget styling. We’ll attend to that later. At last we have a complete header and footer with loads of user-pleasing options.

You can find the complete code for our theme up until this point in its Github repo.

We have learned a lot. Better prepare yourself, because this was just the beginning. The hard work will really only start in the next part 😉 But, if you’ve enjoyed the learning journey so far, you’ll love the rest.

Until then,

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *