Tabbed categories

I would have thought that would probably come down to template design than a plugin, but I might be wrong.

There’s a very good article over on nettuts about this:

https://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/

Hope that helps..

hey thanks but I wanted it to be automated the above tutorials I have to manually update the links.

Anyways I have found a better one a plugin actually. See https://www.ads-software.com/extend/plugins/posttabs/

But can someone tell me how I make post specific category post titles appear in these tabs… For example on the post of category world news in “world”, Sports news post in “Sports” etc

If I’m understanding you right you’re wanting something that will have:

Tab 1: World
Display list of posts in World Category

Tab 2: Sports
Display list of posts in Sports Category

Is that right?

yes absolutely… but only their title link not the whole post. How to do that??

Ah right. Well yeah, this is definitely a template issue here, and despite the looks of that first tutorial, you can absolutely use it as a basis for your needs (and it will look awfully smart).

What you need to do is use exactly the same system that they use but incorporate some WP code to list posts from each category.

I’m just going to grab the HTML example that they’ve done (with static html) and apply some WordPress template tags etc to it.

<div id="tabvanilla" class="widget">

<ul class="tabnav">
 <li><a href="#world">World</a></li>
 <li><a href="#recent">Sports</a></li>
</ul>

<!-- BEGIN FIRST TAB -->
<div id="world" class="tabdiv">
<?php
// Start a new query
$worldPosts = new WP_query();
// Designate what parameters the query should contain
$worldPosts->query(array('showposts' => 5, 'orderby' => "date", 'cat' => 1));
?>
<ul>
<?php
// Begin a loop using the previously assigned parameters
while ($worldPosts->have_posts()) : $worldPosts->the_post();
?>
	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php
// End the loop
endwhile;
?>
</ul>

</div>
<!-- END OF THE FIRST TAB -->

<!-- BEGIN SECOND TAB -->
<div id="sports" class="tabdiv">
<?php
// Start a new query
$sportsPosts = new WP_query();
// Designate what parameters the query should contain
$sportsPosts->query(array('showposts' => 5, 'orderby' => "date", 'cat' => 1));
?>
<ul>
<?php
// Begin a loop using the previously assigned parameters
while ($sportsPosts->have_posts()) : $sportsPosts->the_post();
?>
	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php
// End the loop
endwhile;
?>
</ul>

</div><!-- END OF THE SECOND TAB -->

</div><!--END OF WHOLE TAB SYSTEM-->

If you’re not familiar with editing your theme template files, I would suggest reading the Codex article introducing them: https://codex.www.ads-software.com/Templates

Hope that’s of some help.

thanks again… But I would like to do this in a page not in the template

Hi Icekid,

The thing is that you can do this in a page, with a template ??

Say you have a specific page you want this applied to (not a post right?).

The you create a page template – say called template-special.php

A rough layout would be:

<?php
/*
Template Name: Special
*/
?>

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Do stuff to display your normal page content -->
<?php endwhile; endif; ?>

<!-- Now display your special tabbed section for categories -->

<?php get_footer(); ?>

That’s your page template created. You upload this to your theme folder on your server, and when you create the page that you want the tabs to appear on, you select the “Special” template from the page templates drop down menu in the advanced section of the “write page” area.

Otherwise I’m not sure how you can get dynamic updating list for writing into the actual page – unless there’s some shortcode for listing posts from a category.

Do you have an example URL so that I can see what you’re trying to do exactly?

ok forget the above query… Are there any plugins which show a list particular category’s post.

Something like this https://www.dagondesign.com/articles/drop-down-post-list-plugin-for-wordpress/

But instead of drop down a simple list.

Thanks again and sorry for the trouble.

Dude, if you want to get down and dirty with WordPress, you need to understand the way themes work. Not everything is possible with plugins since there is no “if user=icekid do ….” routine in them ??
Plugins offer gerneral solutions, but the layouting needs to be done in html/php.
Take a few minutes and actually READ what alexleonard wrote. You’ll be amazed ??

EDIT: post a link to your site. Then we can tell you what code you need to put in what file.

Well, I decided that I’m still not sure exactly what you’re looking for, but I thought I’d implement my own suggestions in a site I’m helping a friend out with at the moment.

You can see the result here:

https://devel.invisibleagent.com/artist/corrugated/

If you scroll down to the end of the page you’ll see a tabbed box showing different information in each tab.

Templates are great ??

oooh, fancy ??

thanks alexleonard, your code worked great. as soon as we switch to the our new them i’ll post let you know.

Deadly! Glad it’s been of some help. Looking forward to seeing the results ??

I did it
Please take a look at this:
https://www.disneyfanclub.org/blog/tabbed-categories-list

It’s the combination of two plugins https://www.ads-software.com/extend/plugins/posttabs/

and https://www.dagondesign.com/articles/drop-down-post-list-plugin-for-wordpress/

But I had to modify the second pulgin and thanks to Dagon Design I managed to pull it off. Please modify the pulgin with this:

<?php
/*
Plugin Name: Drop-Down Post List
Plugin URI: https://www.dagondesign.com/articles/drop-down-post-list-plugin-for-wordpress/
Description: Generates a list of posts for a particular category.
Author: Dagon Design
Version: 1.31
Author URI: https://www.dagondesign.com
*/

$ddpl_version = '1.31';

// Setup defaults if options do not exist
add_option('ddpl_type', 'jump');
add_option('ddpl_button', 'View');
add_option('ddpl_default', '(select a post)');
add_option('ddpl_sort', 'date_desc');
add_option('ddpl_limit', 0);
add_option('ddpl_before_form', '');
add_option('ddpl_after_form', '');
add_option('ddpl_before_list', '');
add_option('ddpl_after_list', ''); 

function ddpl_add_option_pages() {
	if (function_exists('add_options_page')) {
		add_options_page('Drop-Down Post List', 'DDPostList', 8, __FILE__, 'ddpl_options_page');
	}
}

function ddpl_options_page() {

	global $ddpl_version;

	if (isset($_POST['set_defaults'])) {
		echo '<div id="message" class="updated fade"><strong>';

		update_option('ddpl_type', 'jump');
		update_option('ddpl_button', 'View');
		update_option('ddpl_default', '(select a post)');
		update_option('ddpl_sort', 'date_desc');
		update_option('ddpl_limit', 0);
		update_option('ddpl_before_form', '');
		update_option('ddpl_after_form', '');
		update_option('ddpl_before_list', '');
		update_option('ddpl_after_list', ''); 

		echo 'Default Options Loaded!';
		echo '</strong>
</div>';

	} else if (isset($_POST['info_update'])) {

		echo '<div id="message" class="updated fade"><strong>';

		update_option('ddpl_type', (string)$_POST["ddpl_type"]);
		update_option('ddpl_button', (string)$_POST["ddpl_button"]);
		update_option('ddpl_default', (string)$_POST["ddpl_default"]);
		update_option('ddpl_sort', (string)$_POST["ddpl_sort"]);
		update_option('ddpl_limit', (int)$_POST["ddpl_limit"]);
		update_option('ddpl_before_form', (string)$_POST["ddpl_before_form"]);
		update_option('ddpl_after_form', (string)$_POST["ddpl_after_form"]);
		update_option('ddpl_before_list', (string)$_POST["ddpl_before_list"]);
		update_option('ddpl_after_list', (string)$_POST["ddpl_after_list"]);

		echo 'Configuration Updated!';
		echo '</strong>
</div>';

	} ?>

	<div class=wrap>

	<h2>Drop-Down Post List v<?php echo $ddpl_version; ?></h2>

	For information and updates, please visit:
	<a href="https://www.dagondesign.com/articles/drop-down-post-list-plugin-for-wordpress/">https://www.dagondesign.com/articles/drop-down-post-list-plugin-for-wordpress/</a>

	<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
	<input type="hidden" name="info_update" id="info_update" value="true" />

	<fieldset class="options">
	<legend>Options</legend>
	<table width="100%" border="0" cellspacing="0" cellpadding="6">

	<tr valign="top"><td width="35%" align="right">
		Form Type
	</td><td align="left">
		<input name="ddpl_type" type="radio" value="jump" <?php if (get_option('ddpl_type') == "jump") echo "checked='checked'"; ?> />&nbsp;&nbsp; Jump menu
		<input name="ddpl_type" type="radio" value="list" <?php if (get_option('ddpl_type') == "list") echo "checked='checked'"; ?> />&nbsp;&nbsp; List with button
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Default Option
	</td><td align="left">
		<input name="ddpl_default" type="text" size="20" value="<?php echo stripslashes(htmlspecialchars(get_option('ddpl_default'))) ?>"/>
		<i>If entered, this will be the default list option (does not link to anything)</i>
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Button Text
	</td><td align="left">
		<input name="ddpl_button" type="text" size="20" value="<?php echo stripslashes(htmlspecialchars(get_option('ddpl_button'))) ?>"/>
		<i>Button is only shown if using 'list with button' form type</i>
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Sorting Method
	</td><td align="left">
		<input name="ddpl_sort" type="radio" value="date_desc" <?php if (get_option('ddpl_sort') == "date_desc") echo "checked='checked'"; ?> />&nbsp;&nbsp; By date - newest first
		<input name="ddpl_sort" type="radio" value="date_asc" <?php if (get_option('ddpl_sort') == "date_asc") echo "checked='checked'"; ?> />&nbsp;&nbsp; By date - oldest first
		<input name="ddpl_sort" type="radio" value="title" <?php if (get_option('ddpl_sort') == "title") echo "checked='checked'"; ?> />&nbsp;&nbsp; By title
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Post Limit
	</td><td align="left">
		<input name="ddpl_limit" type="text" size="5" value="<?php echo get_option('ddpl_limit') ?>"/>
		<i>Limits the number of posts in the list (0 = no limit)</i>
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Add Before Form
	</td><td align="left">
		<textarea name="ddpl_before_form" cols="40" rows="4"><?php echo stripslashes(htmlspecialchars(get_option('ddpl_before_form'))) ?></textarea>
		<i>Code to display before the form</i>
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Add After Form
	</td><td align="left">
		<textarea name="ddpl_after_form" cols="40" rows="4"><?php echo stripslashes(htmlspecialchars(get_option('ddpl_after_form'))) ?></textarea>
		<i>Code to display after the form</i>
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Add Before List
	</td><td align="left">
		<textarea name="ddpl_before_list" cols="40" rows="4"><?php echo stripslashes(htmlspecialchars(get_option('ddpl_before_list'))) ?></textarea>
		<i>Code to display before the list</i>
	</td></tr>

	<tr valign="top"><td width="35%" align="right">
		Add After List
	</td><td align="left">
		<textarea name="ddpl_after_list" cols="40" rows="4"><?php echo stripslashes(htmlspecialchars(get_option('ddpl_after_list'))) ?></textarea>
		<i>Code to display after the list</i>
	</td></tr>

	</table>
	</fieldset>

	<div class="submit">
		<input type="submit" name="set_defaults" value="<?php _e('Load Default Options'); ?> &raquo;" />
		<input type="submit" name="info_update" value="<?php _e('Update options'); ?> &raquo;" />
	</div>

	</form>
	</div><?php
}

function ddpl_list($catID) {

	global $wpdb, $wp_version;

	$ver = (float)$wp_version;

	$ddpl_type = get_option('ddpl_type');
	$ddpl_button = trim(get_option('ddpl_button'));
	$ddpl_default = stripslashes(trim(get_option('ddpl_default')));
	$ddpl_sort = get_option('ddpl_sort');
	$ddpl_limit = (int)get_option('ddpl_limit');
	$ddpl_before_form = stripslashes(get_option('ddpl_before_form'));
	$ddpl_after_form = stripslashes(get_option('ddpl_after_form'));
	$ddpl_before_list = stripslashes(get_option('ddpl_before_list'));
	$ddpl_after_list = stripslashes(get_option('ddpl_after_list')); 

	$t_out = '';

	$table_prefix = $wpdb->prefix;

	$sort_code = 'ORDER BY post_date DESC';
	switch ($ddpl_sort) {
		case 'date_desc':
			$sort_code = 'ORDER BY post_date DESC';
			break;
		case 'date_asc':
			$sort_code = 'ORDER BY post_date ASC';
			break;
		case 'title':
			$sort_code = 'ORDER BY post_title ASC';
			break;
	}

	$limit_code = '';
	if ($ddpl_limit > 0) {
		$limit_code = ' LIMIT ' . $ddpl_limit;
	}

	if ($ver < 2.3) {

		$post_list = (array)$wpdb->get_results("
			SELECT ID, post_title, post_date
			FROM {$table_prefix}posts, {$table_prefix}post2cat
			WHERE {$table_prefix}posts.ID = {$table_prefix}post2cat.post_id
			AND {$table_prefix}post2cat.category_id = {$catID}
			AND post_status = 'publish'
			AND post_type != 'page'
			{$sort_code}
			{$limit_code}
		");

	} else { // post 2.3

		$post_list = (array)$wpdb->get_results("
			SELECT ID,
				post_title,
				post_date
			FROM {$table_prefix}posts, {$table_prefix}term_relationships, {$table_prefix}term_taxonomy
			WHERE {$table_prefix}posts.ID = {$table_prefix}term_relationships.object_id
			AND {$table_prefix}term_relationships.term_taxonomy_id = {$table_prefix}term_taxonomy.term_taxonomy_id
			AND {$table_prefix}term_taxonomy.taxonomy = 'category'
			AND {$table_prefix}term_taxonomy.term_id = {$catID}
			AND post_status = 'publish'
			AND post_type != 'page'
			{$sort_code}
			{$limit_code}
		");

	}

	//Code given by Dagon Design
	//this code displays a list instead of drop-down
	// Idea by Larkins Dsouza www.myspace.com/larkinsdsouza
	// Lakins Says: this is my first contribution to Opensource community it feels great. Well the code was written by Dagon Design but I gave the idea.
	$t_out .= $ddpl_before_list . '<ul>';
foreach ($post_list as $p) {
	$t_out .= '<li><a href="' . get_permalink($p->ID) . '">' . $p->post_title . '</a></li>';
}
$t_out .= '</ul>' . $ddpl_after_list;
return $t_out;

//code ends

	if ($ddpl_type == 'jump') {

		$t_out .= '<form class="ddpl-form" name="catform' . $catID. '" id="catform' . $catID. '" action="">';
		$t_out .= $ddpl_before_list;
		$t_out .= '<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu(\'parent\',this,0)">';

		if ($ddpl_default != '') {
			$t_out .= '<option value="">' . $ddpl_default . '</option>';
		}

		foreach ($post_list as $p) {
			$t_out .= '<option value="' . get_permalink($p->ID) . '">' . $p->post_title . '</option>';
		}

		$t_out .= '</select>';
		$t_out .= $ddpl_after_list;
		$t_out .= '</form>';

	} else {

		$t_out .= '<form class="ddpl-form" name="catform' . $catID. '" id="catform' . $catID. '">';
		$t_out .= $ddpl_before_list;
		$t_out .= '<select>';

		foreach ($post_list as $p) {
			$t_out .= '<option value="' . get_permalink($p->ID) . '">' . $p->post_title . '</option>';
		}

		$t_out .= '</select>';
		$t_out .= $ddpl_after_list;
		$t_out .= '<input type="button" value="' . stripslashes(htmlspecialchars($ddpl_button)) . '" onClick="MM_jumpMenu(\'parent\', this.form.elements[0], 0)"></form>';

	}

	return $ddpl_before_form . $t_out . $ddpl_after_form;
}

function ddpl_check($content) {

	// remove P tags around html comments (comment out to disable)
	$content = preg_replace('/\s*<!--(.*)-->\s*<\/p>/i', "<!--$1-->", $content); 

	$results = array();

	preg_match_all("/<!--\s?ddpl\s?(.*)\s?-->/", $content, $results);

	$i = 0;
	foreach ($results[0] as $r) {
		$content = str_replace($r, ddpl_list($results[1][$i]), $content);
		$i++;
	}

	return $content;
}

function ddpl_head() {
	echo "
	<script type=\"text/javascript\">
	<!--
	function MM_jumpMenu(targ,selObj,restore){ //v3.0
	  eval(targ+\".location='\"+selObj.options[selObj.selectedIndex].value+\"'\");
	  if (restore) selObj.selectedIndex=0;
	}
	//-->
	</script>
	";
}

add_action('admin_menu', 'ddpl_add_option_pages');
add_filter('the_content', 'ddpl_check');
add_action('wp_head', 'ddpl_head');

?>

Just copy the whole thing and paste it on the second pulgin.

Cheers