Footer

Hello copyoppy,

There is already a footer that is not designed. Try below css that design the footer little bit.
(Add below css code into your current active child theme’s style.css file or you can add it additional css option into theme customizer.)


footer.site-footer {
background: #fff !important;
margin-top: 25px;
border-top-right-radius: 18px;
border-top-left-radius: 18px;
box-shadow: 0 0 16px #85969f ;
}


Hope this will helps you.

Thanks!

Thanks a lot. Let me do that now

It worked fine. Please permit me to ask
1: How can I add widgets to the footer?
2: How to change the color of the footer text?
Thanks once again!

Hello copyoppy,

1: How can I add widgets to the footer?

Ans: You have to create additional widget area for it.
Follow below instruction for it:

=> First of all you need to register widget area. So you have to add below code into your current child themes functions.php file.


function myCustomFooterWidget() {
register_sidebar( array(
'name' => 'My Footer Widget',
'id' => 'my_footer_widget',
'before_widget' => '<div class="footer-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'myCustomFooterWidget' );


=> Now you have to add that registered widget area into your theme’s footer.php file.Add below code into footer.php file.


<?php if ( is_active_sidebar( 'my_footer_widget' ) ) : ?>
<div id="footer-sidebar" class="footer-sidebar widget-area">
<?php dynamic_sidebar( 'my_footer_widget' ); ?>
</div>
<?php endif; ?>


=> Then check My Footer Widget into widget menu (Dasboard >> Appearance >> Widgets) and any widget to into it.

For more details follow Widgetizing Theme Link.

2: How to change the color of the footer text?

Try below css code.


footer.site-footer,
footer.site-footer a {
color: #ff0000
}


Hope this will helps you.

Thanks !

Am sorry if am being a bother.
The code you gave me worked fine but really don’t know where exactly to put the code in the footer.php file.

2: I want the footer to be divided into 3 columns

Screenshot
Thanks a lot.

Hello @copyoppy,

=> Register three widget areas.Add below code into functions.php file.


function myCustomFooterWidget() {
//Footer widget 1
register_sidebar( array(
'name' => 'My Footer Widget 1',
'id' => 'my_footer_widget_one',
'before_widget' => '<div class="footer-widget footer-wdget-1">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
//Footer widget 2
register_sidebar( array(
'name' => 'My Footer Widget 2',
'id' => 'my_footer_widget_two',
'before_widget' => '<div class="footer-widget footer-wdget-2">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
//Footer widget 3
register_sidebar( array(
'name' => 'My Footer Widget 3',
'id' => 'my_footer_widget_three',
'before_widget' => '<div class="footer-widget footer-wdget-3">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'myCustomFooterWidget' );


=> Add widget area into footer.php after <footer id="colophon" class="site-footer" role="contentinfo"> line.

Example.


<footer id="colophon" class="site-footer" role="contentinfo">
<?php
// Footer widget 1
if ( is_active_sidebar( 'my_footer_widget_one' ) ) :
dynamic_sidebar( 'my_footer_widget' );
endif;
// Footer widget 2
if ( is_active_sidebar( 'my_footer_widget_two' ) ) :
dynamic_sidebar( 'my_footer_widget_two' );
endif;
// Footer widget 3
if ( is_active_sidebar( 'my_footer_widget_three' ) ) :
dynamic_sidebar( 'my_footer_widget_three' );
endif;
?>


=> Add differet widgets into three footer widget area My Footer Widget 1, My Footer Widget 2, My Footer Widget 3.

=> Add below css for widget design.


.site-footer .footer-widget {
float: left;
width: 33%;
padding: 5px 38px;
}
.site-footer .footer-widget ul {
list-style: none;
}
.site-footer .footer-widget .widget-title {
color: #ff8800 ;
min-height: 35px;
line-height: 26px;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-indent: 15px;
padding: 10px;
text-shadow: -1px -1px 1px #545c2b ;
background: #aabd4b url(images/widget-title-bg.png) left bottom repeat-x;
}


Hope this will helps you.

Thanks !

I have done exactly what you said in trying to add the 3 column widgets but didn’t work. Here’s how my codes look

The footer.php file code:

<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the #content div and all content after
*
* @package Kindergarten

*/
?>

</div><!– #content –>

<footer id=”colophon” class=”site-footer” role=”contentinfo”>

<?php
// Footer widget 1
if ( is_active_sidebar( ‘my_footer_widget_one’ ) ) :
dynamic_sidebar( ‘my_footer_widget’ );
endif;
// Footer widget 2
if ( is_active_sidebar( ‘my_footer_widget_two’ ) ) :
dynamic_sidebar( ‘my_footer_widget_two’ );
endif;
// Footer widget 3
if ( is_active_sidebar( ‘my_footer_widget_three’ ) ) :
dynamic_sidebar( ‘my_footer_widget_three’ );
endif;
?>

<div class=”site-info”>
<?php printf( __( ‘Copyright © 2017 %s’, ‘kindergarten’ ), ‘The Sultana School’ ); ?>
<span class=”sep”>                       </span>
<?php printf(
__( ‘%1$s by %2$s.’, ‘smartsford’ ),
__(‘ Designed and Developed’, ‘smartsford’),
‘‘.__(‘Smartsford Solutions’, ‘smartsford’ ).’‘ );?>
</div><!– .site-info –>
</footer><!– #colophon –>

<div id=”back_top”><i class=”fa fa-angle-up”></i></div>
</div><!– #page –>

<?php wp_footer(); ?>

</body>
</html>

The functions.php file code:

<?php
// Exit if accessed directly
if ( !defined( ‘ABSPATH’ ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED – Do not modify or remove comment markers above or below:

if ( !function_exists( ‘chld_thm_cfg_parent_css’ ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( ‘chld_thm_cfg_parent’, trailingslashit( get_template_directory_uri() ) . ‘style.css’, array( ) );
}
endif;
add_action( ‘wp_enqueue_scripts’, ‘chld_thm_cfg_parent_css’, 10 );

if ( !function_exists( ‘child_theme_configurator_css’ ) ):
function child_theme_configurator_css() {
wp_enqueue_style( ‘chld_thm_cfg_child’, trailingslashit( get_stylesheet_directory_uri() ) . ‘style.css’, array( ‘chld_thm_cfg_parent’ ) );
}
endif;
add_action( ‘wp_enqueue_scripts’, ‘child_theme_configurator_css’ );

function myCustomFooterWidget() {
register_sidebar( array(
‘name’ => ‘My Footer Widget’,
‘id’ => ‘my_footer_widget’,
‘before_widget’ => ‘<div class=”footer-widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
) );
//Footer widget 2
register_sidebar( array(
‘name’ => ‘My Footer Widget 2’,
‘id’ => ‘my_footer_widget_two’,
‘before_widget’ => ‘<div class=”footer-widget footer-wdget-2″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
) );
//Footer widget 3
register_sidebar( array(
‘name’ => ‘My Footer Widget 3’,
‘id’ => ‘my_footer_widget_three’,
‘before_widget’ => ‘<div class=”footer-widget footer-wdget-3″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
) );
}
add_action( ‘widgets_init’, ‘myCustomFooterWidget’ );

// END ENQUEUE PARENT ACTION