[zenzinoParticipant]

I found this thread on putting the Posts Slider on a custom page: https://community.theme.co/forums/topic/display-ethos-post-slider-on-a-custom-page/#post-712745

I added the new code to the _post-slider.php file in my child theme. I was hoping that I could put the code intended for the header.php file in a Raw HTML container to call up the slider on the page but it did not work. The code checks for front page and my page is the front page but I’m thinking that designation is only available to the header.

My intent is to have some content before and after the slider rather than have it at the top of the page.

Here is the page: http://memorializeme.com/

I would like the slider under the “Resources” header, before the recent posts.

Is there any modification I can do to to either the _post-slider.php file or header.php file that would allow me to put the slider in a container wherever I choose? I’m not a noob but also not a great coder.

Any help would be greatly appreciated.

[LelyModerator]

Hello There,

Thanks for posting in and giving us your site URL.
Upon checking the code, the slider will only display for archive pages, home page and on your blog index page.
To display it aside from the pages listed above, please update _post-slider.php code to this:

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-SLIDER.PHP
// -----------------------------------------------------------------------------
// Outputs the post slider that appears at the top of the blog.
// =============================================================================

$is_blog    = is_home();
$is_archive = is_category() || is_tag();

if ( $is_blog || $is_archive || is_front_page() || is_page(12)  ) :

  if ( $is_blog || is_page(12) ) {
    $info = array( 'blog', NULL, NULL, '_x_ethos_post_slider_blog_display' );
  } elseif ( $is_archive ) {
    $type = ( is_category() ) ? 'cat' : 'tag_id';
    $info = array( 'archive', $type, get_queried_object_id(), '_x_ethos_post_slider_archives_display' );
  }

  $slider_enabled = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_enable', '' ) == '1';
  $count          = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_count' );
  $display        = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_display' );

  $blog_slider_is_enabled    = $slider_enabled && $is_blog;
  $archive_slider_is_enabled = $slider_enabled && $is_archive;
  $is_enabled                = $blog_slider_is_enabled || $archive_slider_is_enabled || is_front_page();

  switch ( $display ) {
    case 'most-commented' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'comment_count',
        'order'          => 'DESC',
        $info[1]         => $info[2]
      );
      break;
    case 'random' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'rand',
        $info[1]         => $info[2]
      );
      break;
    case 'featured' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'date',
        'meta_key'       => $info[3],
        'meta_value'     => 'on'
      );
      break;
  }

  if (is_front_page()) {
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand',
      $info[1]         => $info[2]
    );
  }

  ?>

  <?php if ( $is_enabled ) : ?>

    <div class="x-flexslider x-post-slider">
      <ul class="x-slides">

        <?php $wp_query = new WP_Query( $args ); ?>

        <?php if ( $wp_query->have_posts() ) : ?>
          <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

            <li class="x-slide">
              <article id="post-<?php the_ID(); ?>" <?php post_class( 'x-post-slider-entry' ); ?> style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
                <a href="<?php the_permalink(); ?>">
                  <div class="cover">
                    <div class="middle">
                      <span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>
                      <h2 class="h-featured"><span><?php x_the_alternate_title(); ?></span></h2>
                      <span class="featured-view"><?php _e( 'View Post', '__x__' ); ?></span>
                    </div>
                  </div>
                </a>
              </article>
            </li>

          <?php endwhile; ?>
        <?php endif; ?>

        <?php wp_reset_query(); ?>

      </ul>
    </div>

    <script>
      jQuery(window).load(function() {
        jQuery('.x-post-slider').flexslider({
          controlNav   : false,
          selector     : '.x-slides > li',
          prevText     : '<i class="x-icon-chevron-left"></i>',
          nextText     : '<i class="x-icon-chevron-right"></i>',
          animation    : 'fade',
          smoothHeight : true,
          slideshow    : true
        });
      });
    </script>

  <?php endif; ?>

<?php endif; ?>

As you can see, I’ve added is_page(12) on the following two lines of code:

if ( $is_blog || $is_archive || is_front_page() || is_page(12)  ) :

  if ( $is_blog || is_page(12) ) {

Please change 12 to the page id where you want it to display:
These link might help:
https://codex.wordpress.org/Function_Reference/is_page
https://wordpress.org/support/topic/whats-my-page-id

We can add the slider, on the very top of the page, or below the navigation or below the page content by adding a new code on your functions.php file. Unfortunately, putting it in the middle of your page content is only possible via custom development and it is outside to scope of support we can offer. To achieve that you need to create custom template for that specific page.

Although, if you’re using revolution slider, you can also create a post based slider there. Then you can use it’s generated shortcode and put it inside a RAW CONTENT element above the Resources header.

Hope this helps.

[zenzinoParticipant]

Thanks for the quick response.

I thought about using the Revolution Slider and copy the style but I wanted it to mimic the Featured posts from the blog page. Mostly because I have the recent posts already listed below.

Is there any way to set up the Revolution Slider for the same Featured posts as on the blog?

[LelyModerator]

Hello There,

You’re welcome!

As you see here: http://www.themepunch.com/revslider-doc/post-based-slider/ you can set the featured image as slide background and then add Category, Date, Title and button as layers same with Ethos post slider. Other custom style can be achieve using custom CSS. Let us how we can help if you have setup the slider already.

Always.
X

[zenzinoParticipant]

Many thanks.

I set up a post-based slider on my home page. I will manually select the featured posts based on the blog page.

I can’t seem to figure out why the categories are coming up orange when I have them defined as white on the layer. How can I get those white like the rest of the text.

[LelyModerator]

Hello There,

I did check your site to see the issue regarding categories. Unfortunately, it is currently down. The following error occurs:Error establishing a database connection. Please check in with your hosting about it.

Always,
X

[zenzinoParticipant]

It’s back up now (whew).

[JadeModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

.tp-caption a {
    color: #fff !important;
}

Hope this helps.

[Author]

Posts