Add Meta Slider to Front Page in Child Theme

Tagged: front page, slider

This topic has 9 replies, 2 voices, and was last updated 10 years, 10 months ago by Sakin.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
February 8, 2014 at 7:59 pm #20122

Websiteguy
Member

Hi

I would like to add a Meta Slider into the front of my website. Where do I put the code?

My website is Kidsguide2theworld.com .

Thanks

February 8, 2014 at 10:57 pm #20138

Sakin
Keymaster

@Websiteguy: I see that you have use Catch Everest Free theme but have hide “Theme: Catch Everest” from your footer. Please add it back as this is the only reason we provide free theme and free support. If you want to edit “Footer Text” then you can upgrade to Catch Everest Pro theme and edit the footer text from “Appearance => Theme Options => Footer Editor”.

Are you trying to Meta Slider a plugin code. Then you need to build child theme and then add it through your child theme functions.php file using action hook catcheverest_before_main

February 9, 2014 at 2:38 am #20147
Websiteguy
Member
I have made a child theme. The code is
```
<?php 
    echo do_shortcode("[metaslider id=1336]"); 
?>
```
February 9, 2014 at 9:31 am #20158
Sakin
Keymaster
@Websiteguy: You can then either copy the header.php fine in your child theme and add the code in the position that you want or just create functions.php file in your child theme and add the following code:
```
<?php
function catcheverest_child_metaslider() {
	
	 echo do_shortcode("[metaslider id=1336]");
	 
}
add_action( 'catcheverest_before_main', 'catcheverest_child_metaslider', 10 );
```
February 9, 2014 at 8:06 pm #20168
Websiteguy
Member
It worked!

You did make a little error in the code though.
```
function catcheverest_child_metaslider() {
	
	 echo do_shortcode('[metaslider id=1336]');
	 
}
add_action( 'catcheverest_before_main', 'catcheverest_child_metaslider', 10 );
```
That’s what I fixed.

Thanks
February 9, 2014 at 8:13 pm #20169

Websiteguy
Member

Is their a way to add some CSS to that? The slider is too close to the top menu, but too far from the bottom text.

You can see it here.

Thanks

February 9, 2014 at 10:11 pm #20175
Sakin
Keymaster
@Websiteguy: You can add the following css in your child theme style.css and play with the padding and margin.
```
.metaslider { padding-top: 20px; }
#homepage-message { margin-top: 20px; }
```
February 10, 2014 at 3:26 am #20197

Websiteguy
Member

Works great! Thanks for all the help.

You can view it here.

February 10, 2014 at 3:51 am #20200
Websiteguy
Member
I made one more modification.
```
function catcheverest_child_metaslider() {

if ( is_front_page() ) {
	
	 echo  do_shortcode('[metaslider id=1336]');
	} 
}
add_action( 'catcheverest_before_main', 'catcheverest_child_metaslider', 10 );
```
This will make it only display on the front page.

Thanks
February 10, 2014 at 10:21 am #20216

Sakin
Keymaster

@Websiteguy: That’s awesome. Cheers 🙂
Author

Posts