Add slider to top of Categories blog bage

[BamBoom]

Hi there, I’ve added a Slider Revoution slider to the top of my Archives page below:

http://cpcorpwp.uksouth.cloudapp.azure.com/all-news/

I’d like to do the same on the blog categories pages as well, as you can see on the link below (and all the category pages) - or even just a full width image to shift the content down so it’s not cutoff by the nav bar.

I presume this can be done by modifying the categories.php template and copying into the child theme? Could you possibly let me know how to add this content to the php file if it can be done or is there another way to achieve this?

Thanks again.

[mldarshana]

Hi Mark,

Thanks for writing in! First you need to setup a child theme and activate it by following our guide here (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57).

Then you can add a slider to your category page using an action and revslider shortcode.

Please add an example code below in your child theme’s functions.php and set your parameters there.

function add_my_slider() {
      if(is_category( '78' )) {
            echo do_shortcode('[rev_slider alias="test"]');
     }
}

add_action( 'action_name', 'add_my_slider', 10 );

is_category() is a WordPress function which accepts category slug, category ID etc which you can read from here (https://developer.wordpress.org/reference/functions/is_category/).

action_name parameter can be replaced with any hooks mentioned here (https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x-pro/208). In your case, you can try the following hook x_before_the_content_begin.

Change [rev_slider alias="test"] with your slider shortcode.

Hope that helps.

[BamBoom]

Thanks for the quick help.

I’ve added the below:

<?php

function add_my_slider() {
      if(is_category( 'Audit' )) {
        echo do_shortcode('[rev_slider alias="all-news-header"]');
     }
}

add_action( 'x_before_the_content_begin', 'add_my_slider', 10 );

?>

I’m not getting anything showing on the page though for a named category or all categories. Also out of interest what does the ‘10’ do in the above?

Thanks again.

[ruenel]

Hello Mark,

Because of your condition, the slider will only display in the Audit category archive page. The slider will not display in all category pages nor in all the posts that is under Audit category. You will need to modify your condition to make sure it will display in the correct page or group of pages. Perhaps this codex will help you in changing your condition:

• https://codex.wordpress.org/Conditional_Tags

By the way, the 10 is the priority number of the function being process. For more details, you can check this out:

• https://developer.wordpress.org/reference/functions/add_action/

Hope this helps. Kindly let us know.

[BamBoom]

Hi Rue,

Yep I understand it should only show on that one Audit Archive page and that’s no problem, I’ve updated the code to show on all archive pages, but as example of the below page which is below you can see it’s not showing anything:

http://cpcorpwp.uksouth.cloudapp.azure.com/category/audit/

Any ideas what might need changing in the code?

[thai]

Hi @PKFCooperParry,

To show the slider for all category pages, please change the condition to:

if( is_category() ) {

Upon checking your website, I could see that the slider is showing for all category pages:

Could you please check again?

Thanks.

[BamBoom]

Hi, yep the code you provided wasn’t working for some reason, so I replaced it with the below which works:

if (is_category()):
echo do_shortcode(’[rev_slider alias=“all-news-header”]’);
endif;

However I’d like the slider to load ABOVE all the content on the page so it spans full width (as it does on the main archive page).

I tried adding in:
x_get_view( ‘global’, ‘_slider-below’ );
to load the slider at the top of the page above the content, and below the header but no luck (probably because I don’t know how to use the code correctly

Do you know how I can get that to trigger - we should be good once I can get it loading above all the page content full width.

Thanks again for the help, I know this is probably a bit beyond the normal theme support!

Mark

[thai]

Hi Mark,

Please update the code to this:

function add_my_slider() {
     if (is_category()): 
          echo do_shortcode('[rev_slider alias="all-news-header"]');
     endif;
}
add_action( 'x_after_view_global__slider-below', 'add_my_slider', 10 );

Let us know how it goes!

[BamBoom]

Nope I’m afraid that does nothing. Doesn’t seem to trigger the slider at all using the function code.

Instead of using the function call (which doesn’t show the slider), can we add the " ‘x_after_view_global__slider-below’ " to the below code at all as the below does work?

if (is_archive()):
echo do_shortcode(’[rev_slider alias=“all-news-header”]’);
endif;

Thanks again

[friech]

Hi Mark,

Please update your code to this:

  /**
Add custom slider on archive pages
*/
function custom_slider() { 
 if ( is_archive() ) : ?>
  <div class="custom-slider">
    <?php echo do_shortcode( '[rev_slider alias="all-news-header"]' ); ?>
  </div>
  <?php endif; 
}
add_action('x_after_view_global__slider-below','custom_slider', 10);

I’ve tested this on my end and it works. If this does not work on your site then there could be something conflicting it. Try doing a plugin conflict test.

Please be reminded that this is in the realm of customization and it is outside of the scope of support that we can offer, with that said it would ultimately be your responsibility to take it from here.

Conditional Tags
Actions and Filters in X/Pro

Thanks,

[BamBoom]

Hi, thanks again for the help, unfortunately that appears to break the php as the page no longer loads at all with that code. Not sure if it’s an issue with Pro as opposed to X.

I appreciate this is getting into loads of customisation now - so I’ll take it from here and try and figure it out using this as a starting point.

Thanks again for all the help on this!

[jade]

Hey Mark,

Our apologies, there is a syntax error in the code previously suggested.

Please change it to:

/**
* Add custom slider on archive pages
*/
function custom_slider() { 
  if ( is_archive() ) : ?>
   <div class="custom-slider">
     <?php echo do_shortcode( '[rev_slider alias="all-news-header"]' ); ?>
   </div>
   <?php endif; 
 }
 add_action('x_after_view_global__slider-below','custom_slider', 10);

Hope this helps.