by HostMonster Reviews

Wordpress Tutorial: how to replace the header image with a slider part2

Published: Tuesday, 14 October 2014

Please refer to the first part of this tutorial titled: Wordpress Tutorial: how to replace the header image with a slider

example-1) Restore the site-title and tagline, edit header.php(inside the child-theme) and paste the following code:

<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>

just after the site description. Note the highlighted line below:

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<a href="/<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>
// Compatibility with versions of WordPress prior to 3.4.

Sample screenshot:



example-2) Now let us move the slider / slideshow below the navigation menu. Paste the code:

<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>

just before the closing of the header-tag (refer below):

</div><!-- #access -->
</div><!-- #masthead -->
<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>
</div><!-- #header -->
<div id="main">

sample screenshot:



example-3) We can even place it in our footer:

Copy footer.php from parent-theme into child-theme. Edit and paste the slider's php code just a couple of lines just after the beginning of footer.php file as follows: (note highlighted code below):

* Template for displaying the footer
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
</div><!-- #main -->

<div id="footer" role="contentinfo">
<div id="colophon">
<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>

* A sidebar in the footer? Yep. You can can customize
* your footer with four columns of widgets.
get_sidebar( 'footer' );

sample screenshot:


The above technique can be used to add EasingSlider slider to any page on your wordpress website.

Just edit the correct file and paste the code where it needs to be.


Add comment

Security code