Sparkling Theme - Second blog page (include slider)

taro · January 12, 2016, 9:29am

I like to know if its possible to make two separate blog pages, with the slider included. I know how to make a separate page with just one category but this page has no slider with the category.

So i think i have to clear the basic wordpress functions. And make two pages with a custom template. I found the code for the slider in the header <?php sparkling_featured_slider(); ?>

How do i add a category to this php code?

After that i can make a custom menu item from a page. This page is made from the catagory template(cant find this category php file so should be archive.php?) and has the new header.

taro · January 12, 2016, 9:54am

I found the following link maybe this works like a charm for me…: custom-post-types

taro · January 12, 2016, 12:09pm

Ok my new code is not working correctly. I can select a category, but the layout is messed up.

  //////////////nieuw code to replace  <?php sparkling_featured_slider(); ?>              
<div class="flexslider">
<ul class="slides">

<?php
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );

$cat1 = get_term_by('name','news','category')->term_id;
$args = array(
	'numberposts' => 15,
	'category__in' => array( $cat1 )
		);
	$postQuery = get_posts($args);

	foreach( $postQuery as $post ) : setup_postdata($post);

	if ( has_post_thumbnail() ) { ?>
<li>
<a href="<?php echo get_permalink(); ?>"
title="Go to <?php echo the_title(); ?>" rel="bookmark">
<?php the_post_thumbnail('feature-slider'); ?>
<p class="flex-caption"><?php the_title(); ?></p></a>
</li>
			<?php
			}
		endforeach; ?>

	</ul>
</div>

//////////////this code works for a single image

	<div class="flexslider">
	<ul class="slides">
		<li>
			<img width="1920" height="550" src="https://colorlib.com/dazzling/wp-content/uploads/sites/6/2013/01/homev_updated1_02.jpg">
			<div class="flex-caption">
				<a href="https://colorlib.com/dazzling/title-with-special-characters/">
					<h2 class="entry-title">Slide #1 Title</h2>
					<div class="excerpt">Description text for slide #1</div>
				</a>
			</div>
		</li>
	</ul>
</div>

//////////////this code is currently in extras.php

<php
function sparkling_featured_slider() {
  if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
    echo '<div class="flexslider">';
      echo '<ul class="slides">';

        $count = of_get_option( 'sparkling_slide_number' );
        $slidecat =of_get_option( 'sparkling_slide_categories' );

        $query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
        if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();

          echo '<li><a href="'. get_permalink() .'">';
            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail();
            endif;

              echo '<div class="flex-caption">';
                  if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                  if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
              echo '</div>';
              echo '</a></li>';
              endwhile;
            endif;

      echo '</ul>';
    echo ' </div>';
  }
  endif;

movin · January 15, 2016, 11:51am

Hi @taro,

I hope you are well today and thank you for your question.

I like to know if its possible to make two separate blog pages, with the slider included. I know how to make a separate page with just one category but this page has no slider with the category.

Do you want to create two separate blog pages having same slider on both pages or having different slider displaying different posts from different categories?

Are the both blog pages same?

Please advise.

Kind Regards,
Movin

taro · January 15, 2016, 11:58am

I like to have a diffrent slide displaying post from a different categorie.

Both blog pages are not the same.

1: Example = Jeans
2: Example = Shirts

i’d rather do this with the current inbuilt slider. I already got too many plugins activated and every new plugin is a risk.

movin · January 20, 2016, 8:58am

Then to achieve this create a different slider function by using the code of sparkling_featured_slider function which you have shared and in both of these functions pass category ids of categories Jeans & Shirts in place of $slidecat value in the below code.

$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count )

taro · January 28, 2016, 10:19am

i removed <?php sparkling_featured_slider(); ?> in the custom header

When i add the following custom code in the header it gives me a syntax error:

<?php
function sparkling_featured_slider() {
  if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
    echo '<div class="flexslider">';
      echo '<ul class="slides">';

        $count = of_get_option( 'sparkling_slide_number' );
        $slidecat =of_get_option( 'sparkling_slide_categories' );

        $query = new WP_Query( array( 'cat' =>'126','posts_per_page' =>$count ) );
        if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();

          echo '<li><a href="'. get_permalink() .'">';
            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail();
            endif;

              echo '<div class="flex-caption">';
                  if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                  if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
              echo '</div>';
              echo '</a></li>';
              endwhile;
            endif;

      echo '</ul>';
    echo ' </div>';
  }
  endif; ?>

movin · January 29, 2016, 6:52am

You should declare the slider function in the functions.php file of theme and call it in the header.php file. If there is already opening or closing PHP tags in the file then you should not add it again with your custom slider function.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. We recommend the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

taro · March 18, 2016, 2:52pm

Ok fixed! If you want a custom category page with the slider included like me…

Information for others:

First let’s say we gonna use the category “clothing”. You have to change “clothing” for your category.

Step 1:

Copy the header.php and paste it in your child theme.
Rename the php file example: header-slider2.php (you can rename “slider2” to whatever you like)
Open the header-slider2.php and find “<?php sparkling_featured_slider(); ?>” and replace it with “<?php clothing_featured_slider(); ?>” save and done.

Step 2:

Copy the page.php and paste it in your child theme.
Rename the php file example clothing.php
Make it a Template file by adding: (Template name: Clothing) or just copy the following…

<?php
/**
 * Custom template for category Clothing
 * 
 * Template name: Clothing
 *
 * @package sparkling
 */

get_header('slider2'); ?> 

	<div id="primary" class="content-area">

		<main id="main" class="site-main" role="main">

			<?php 
            $args = array( 'post_type' =>   'post',                        
                           'category_name' =>    'clothing',                    
                           'posts_per_page' =>  6, 
                           'paged' =>  $paged   );
            query_posts( $args );
            ?>
        
		<?php /* Start the Loop */ ?>   
		<?php while ( have_posts() ) : the_post(); ?>
        
				<?php get_template_part( 'content', get_post_format() ); ?>

			<?php endwhile; // end of the loop. ?>

				<?php sparkling_paging_nav(); ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Step 3:

Add the folowing code to your child function.php to register the new slider.
Don’t forget to change the id(12345) to your category id from clothing.

function clothing_featured_slider() {
    echo '<div class="flexslider">';
      echo '<ul class="slides">';

        $count = of_get_option( 'sparkling_slide_number' );
        $slidecat =of_get_option( 'sparkling_slide_categories' );

        $query = new WP_Query( array( 'cat' =>'12345','posts_per_page' =>$count ) );
        if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();

          echo '<li><a href="'. get_permalink() .'">';
            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail();
            endif;

              echo '<div class="flex-caption">';
                  if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                  if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
              echo '</div>';
              echo '</a></li>';
              endwhile;
            endif;

      echo '</ul>';
    echo ' </div>';
  }

Step 4:

If you already load the template file to your custom page for this category, then you can see that its working but your missing the js and css to show the slider correct.
Add the following code to the funtion.php in your child theme to activate the js and css

function clothing_scripts() {

 	wp_dequeue_script( 'flexslider-js' );
	wp_dequeue_script( 'flexslider-customization' );

	wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/inc/js/flexslider.min.js', array('jquery'), '20140222', true );
    // Flexslider customization
    wp_enqueue_script( 'flexslider-customization', get_template_directory_uri() . '/inc/js/flexslider-custom.js', array('jquery', 'flexslider-js'), '20140716', true );

  	// Add slider CSS for pages 
    wp_enqueue_style( 'flexslider-css', get_template_directory_uri().'/inc/css/flexslider.css' );
  
}
add_action( 'wp_enqueue_scripts', 'clothing_scripts' );

movin · March 21, 2016, 7:20am

@taro Thanks for sharing the information for others here.

Your help here is really appreciated.

codeoner · March 21, 2016, 2:51pm

Hello, I would like to add different featured sliders with different images in different pages of my site using the integrated slider.

I used the instructions of the friend above and i managed to get a diferent slider in one page BUT it shows images from posts of several categories! also, how you can edit the code to show all the featured posts of the selected category and not the selected number?

taro · March 21, 2016, 2:57pm

Hi Codeoner,

To only show images from one category you should change the numer 12345 (Step 3) to the category number that you like to select from your website.

codeoner · March 21, 2016, 3:14pm

sorry, i should put the category ID there i misunderstood! thank you again!

category number? i used category name. where can I find the number?
thanks for the quick reply!

taro · March 21, 2016, 3:19pm

Go to te backend from wordpress
Left side you see posts
select Categories
Press the desired category that you want to use
You can find the ID in the address bar

Example:
http://website.com/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=228&post_type=post&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dcategory

The id = 228

codeoner · March 21, 2016, 3:32pm

as i editted above i got a little confused with the whole process… i am new to wordpress and i have very small experience in coding…

so now it is working how it should

only one problem. the page content dissapeared! all i can see is the slider. did you experienced the same?

taro · March 21, 2016, 3:35pm

Im not sure what you did wrong. Maybe you changed the category name like in step 2?

codeoner · March 21, 2016, 3:39pm

I fixed the problem, i just had to copy my page.php code to my custom page.php and only change the get_header() value to the header i made

Thanks for all your help it was really valuable!

taro · March 21, 2016, 3:42pm

i’m glad i could help

movin · March 22, 2016, 7:02am

@taro Thanks again for your help here

taro · March 22, 2016, 9:15am

Np Movin; i already thought there would be help needed when i posted this.