Modify Eureka Post Slider

Yesterday, i got several e-mails asking about this great theme by ColorLabs & Company, the theme is an e-commerce theme named Eureka.

If you check the screen shot of Eureka, at the top section of this theme there is a slider available to displaying your products. Tons of e-mails delivered yesterday asked about how to modify the slider to displaying a posts or a post type. What they want, maybe you also want to displaying a promotion like discount message or something.

This time i will show you how modify the slider to displaying a post rather than a products.

This modification affect files named:

  • theme-options.php
  • index.php

Part #1

This first part explain how to modify a file named theme-options.php. At this file we will create a meta-post into your post. This meta-post will be used to be a trigger, so when this meta-post is ticked, the post will be displayed on the slider.

Open this file and find out this code (you can find this file at wp-content → themes → eureka → includes):

if ( ( get_post_type() == 'post') || ( !get_post_type() ) ) {
	$colabs_metaboxes[] = array (  "name"  => $shortname."_single_top",
					            "std"  => "Image",
					            "label" => "Item to Show",
					            "type" => "radio",
					            "desc" => "Choose Image/Embed Code to appear at the single top.",
								"options" => array(	"none" => "None",
													"single_image" => "Image",
													"single_video" => "Embed" ));
	$colabs_metaboxes[] = array (	"name" => "image",
								"label" => "Post Custom Image",
								"type" => "upload",
                                "class" => "single_image",
								"desc" => "Upload an image or enter an URL.");

	$colabs_metaboxes[] = array (  "name"  => $shortname."_embed",
					            "std"  => "",
					            "label" => "Video Embed Code",
					            "type" => "textarea",
                                "class" => "single_video",
					            "desc" => "Enter the video embed code for your video (YouTube, Vimeo or similar)");

	$colabs_metaboxes[] = array (  "name"  => "map",
					            "std"  => "",
					            "label" => "Google Maps Location",
					            "type" => "text",
					            "desc" => "The map should ly using previously entered data.");

} // End post

Edit that code become:

if ( ( get_post_type() == 'post') || ( !get_post_type() ) ) {
	$colabs_metaboxes[] = array (  "name"  => $shortname."_single_top",
					            "std"  => "Image",
					            "label" => "Item to Show",
					            "type" => "radio",
					            "desc" => "Choose Image/Embed Code to appear at the single top.",
								"options" => array(	"none" => "None",
													"single_image" => "Image",
													"single_video" => "Embed" ));
	$colabs_metaboxes[] = array (	"name" => "image",
								"label" => "Post Custom Image",
								"type" => "upload",
                                "class" => "single_image",
								"desc" => "Upload an image or enter an URL.");

	$colabs_metaboxes[] = array (  "name"  => $shortname."_embed",
					            "std"  => "",
					            "label" => "Video Embed Code",
					            "type" => "textarea",
                                "class" => "single_video",
					            "desc" => "Enter the video embed code for your video (YouTube, Vimeo or similar)");

	$colabs_metaboxes[] = array (  "name"  => "map",
					            "std"  => "",
					            "label" => "Google Maps Location",
					            "type" => "text",
					            "desc" => "The map should ly using previously entered data.");

	$colabs_metaboxes[] = array (	"name" => $shortname."_post_featured",
								"label" => __( "Add To Slider", "colabsthemes" ),
								"std"  => "false",
								"type" => "checkbox",
								"desc" => __( "Check featured box and this page will show at your slider", "colabsthemes" ));

} // End post

After you edit this file, you can go to WordPress dashboard → Posts → Add New, then you will see if there is a check box below your content editor.

Part #2

This second part will explain how to edit file index.php, at this part we will call the meta-box information. At this part we will modify the looping at the slider to check the meta-box value at every posts you have, if the value is true (checked) the posts will be displayed at the slider and vice-versa.

Open a file named index.php and find out this code:

<?php

		$headline = get_option('colabs_headline_product');
		$headline_limit= get_option('colabs_headline_limit');
		if($headline_limit=='')$headline_limit=3;
		$headline_query = new WP_Query( array(
			'showposts' => $headline_limit,
			'post_type' => $colabs_posttype,
			'tax_query' => array(
								array(
								'taxonomy' => $colabs_taxonomy,
								'field' => 'id',
								'terms' => $headline
								)
							)
		) );

		if ( $headline_query->have_posts() ):
		?>

Edit that code become:

<?php

		$headline = get_option('colabs_headline_product');
		$headline_limit= get_option('colabs_headline_limit');
		if($headline_limit=='')$headline_limit=3;
		$headline_query = new WP_Query( array(
			'showposts' => $headline_limit,
			'post_type' => $colabs_posttype,
			'post_type' => 'post',
			'meta_key'  => 'colabs_post_featured',
			'meta_value' => 'true'
		) );

		if ( $headline_query->have_posts() ):
		?>

And done, congratulations!

Advertisements

6 thoughts on “Modify Eureka Post Slider

  1. I was wanting to know if you ever considered changing the design of your blog? It is well written; I really like what you have got to state. But maybe you can include a a bit more in the way of written content so people might connect with it better. Youve got a great deal of text for only having one or two photos. Maybe you can space it out better?

  2. Thank you for your help.
    The syntax to display multiple post types is:
    WP_Query( array( …
    ‘post_type’ => array( $colabs_posttype,”post” ),

    )

    and not:

    WP_Query( array( …
    ‘post_type’ => $colabs_posttype,
    ‘post_type’ => ‘post’,

    )

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s