Move Ethos Carousel on Homepage

Support
#1

Hey,

I’d like to move the Ethos post carousel to right above the footer on my homepage only, but can’t seem to figure it out. I followed this thread https://theme.co/apex/forums/topic/move-post-carousel-to-bottom-of-page/#post-265633 (it’s kinda old), so maybe there’s a different solution today?

Thanks!

Ann

#2

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

All the best!

#3

Sure!

I’ll send it in a secure note.

Thanks Joao!

One more thing, is there a way to decide what page the carousel is on? I’d make sense to only have the it on the homepage and post pages for us. Right now it also appear on our woocmmerce product page, looks kinda weird.

Thanks again!

#4

Hello @fikasem,

Thanks for asking. :slight_smile:

Yes you can do that by using WordPress conditional tags.

https://codex.wordpress.org/Conditional_Tags

Next, what you need to do is copy wp-footer.php file from /wp-content/themes/x/framework/legacy/cranium/footer/views/ethos/ to /wp-content/themes/x-child/framework/views/ethos/. Please note that you might have to create Ethos folder under child theme directory.

Last step is to wrap the slider code inside conditional tags to showcase post slider on homepage and post page. For that I would suggest you to please refer following posts on how to use conditional tags.

https://codex.wordpress.org/Function_Reference/is_front_page


https://codex.wordpress.org/Conditional_Tags#A_Single_Post_Page

For ease of use I am sharing the code that will display post slider to be wrapped inside conditional tags.

<?php x_get_view( 'ethos', '_post', 'carousel' ); ?>

I am also sharing few additional link that will help you to get started with Conditional Tags.


Thanks.

#5

Thanks Prasant!

That stuff is way out of my league! But I really appreciate the help, I just don’t know how to do that so I decided to hide the slider on the homepage instead using CSS. For some reason, it’s not working on one page added through LearnDash.

Here’s what I added based on another Themeco thread I found:

/* Ethos Carousel */
.x-post-carousel {
display: none;
}
.blog .x-post-carousel {
display: block;
}
.single .x-post-carousel {
display: block;
}
.woocommerce .x-post-carousel {
display: none;
}
.sfwd-courses .x-post-carousel,
.sfwd-lessons .x-post-carousel,
.sfwd-topic .x-post-carousel,
.sfwd-quiz .x-post-carousel {
display: none !important;
}
.post-id-4507 .x-post-carousel {
display: none !important;
}

The problem is the last page http://dev.moveu.com/assessment/introduction/, it’s still showing the carousel. Any idea how to solve that? (Must be logged in to see that page).

Thansk!

Ann

#6

Hi Ann,

You can try dding single to your css code.

eg

.single-sfwd-courses .x-post-carousel, 
.single-sfwd-lessons .x-post-carousel,
.single-sfwd-topic .x-post-carousel,
.single-sfwd-quiz .x-post-carousel {
       display: none !important;
}

Hope that helps

#7

Hi Paul,

Thanks, that worked! Question, I ended up with a lot of CSS ‘hiding’ the carousel now, is there a way to add a function that will only display the carousel on the blog page and single blog posts? Right now, it is downloading unnecessary data which will slow down the speed.

Thanks!

Ann

#8

Hi Anne,

We can do it the other way.

.x-post-carousel{
       display: none; /* Hide it on all pages and post including courses*/
}
.blog .x-post-carousel,
.single-post .x-post-carousel{
       display: block; /* Override that CSS and show it only on blog and single post*/
}

Hope this helps.

#9

That’s actually what I had in the beginning :slight_smile:

Wouldn’t be better to change it with a function over CSS?

How would I hide the carousel on mobile? I tried the below, but nothing happened.

@media only screen and (max-width : 320px) {
.x-post-carousel {
display: none;
}
}

Thanks!
Ann

#10

Hi there,

You may try this workaround, please add this code to your child theme’s functions.php

add_filter('x_option_x_ethos_post_carousel_enable', 'post_carousel_visibility');

function post_carousel_visibility ($enabled) {

if ( is_home() || is_singular('post') ) {
return '1';
}

return '0';

}

Then remove all the above CSS, then to hide it form mobile, there is no other solutions than CSS.

@media only screen and (max-width : 767px) {
.x-post-carousel {
display: none !important;
}
}

Thanks.

#11

Hi Rad,

That didn’t do anything. The carousel is showing on all pages now. Any other idea?

The CSS worked to hide it on mobile though!

Thanks,
Ann

#12

Hey Ann,

You may want to stick the the CSS then as provided above:

.x-post-carousel{
       display: none; /* Hide it on all pages and post including courses*/
}
.blog .x-post-carousel,
.single-post .x-post-carousel{
       display: block; /* Override that CSS and show it only on blog and single post*/
}

Hope this helps!

#13

Hey Nasbeel,

Will this kind of CSS (hiding elements) slow the page down? If so, I’d really prefer to remove it in another way. I can see that you guys provided support to do this in other threads, is there a special reason you can’t do it now?

Thanks,
Ann

#14

Hi,

Another way to remove it is to create a file wp-header.php in wp-content/themes/pro-child/framework/legacy/cranium/headers/views/ethos and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>

  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php 
    if(is_home() || is_singular('post')) {
        x_get_view( 'ethos', '_post', 'carousel' ); 
    }
    ?>
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

After that, you may remove all your css codes that pertains to removing your post carousel.

Hope that helps.

#15

Do I simply created this path: /legacy/cranium/headers/views/ethos ? It ends at “framework” for me :slight_smile:

Thanks!

Ann

#16

Hi there,

Yes, you’ll have to create that path. Should be /framework/legacy/cranium/headers/views/ethos/.

Thanks!