nelsontubaina

SOOOOO…NOBODY HELPED ME…so I had to help myself! (Coincidentally, that’s something I used to do A LOT when I was younger and single, LOL!!!)

Well Ill try to go step-by-step on trying to explain how I did it and maybe it will help someone else and even someone else might even improve on my solution.

SO HERE IT GOES:
Let’s see what was the problem I was facing:

I had the following files:

• category-noticias.php
• single.php
• single-noticias.php
• noticias.php
• functions.php
• functions.js

Those are A LOT of files, I supose. But they serve a purpose…let’s see what I wanted to do.

What I wanted to do was to have the same, the VERY SAME, layout both for the noticias category page AND for the page of a single noticia
(noticia = news in portuguese).

You can see the layout in the link below:
http://www.limonadaweb.com.br/eufui.jpg

OK…so how do I to do this? I mean, I had to:

• Load the category with a custom query
• have numbered pagination in that page
• display the correct single and correct pagination in the single page
• The numbered pagination has to be Ajax so I do not have to reload the entire page

Ok, so first of all I did the category-noticias.php because in the category pages I’m able to use the global var $paged, wich helps a lot with pagination.

Below follows the code for the page category-noticias.php, I’ll comment everything to help.

<?php
/*
GET HEADER is the wordpress function to load the header.php, it loads the javascripts and stylesheets and sutff.
*/
 ?>
 <?php get_header(); ?>
<section class="grid_12">
	<h2 class="red" style="margin-bottom:0.2em;">NOTÍCIAS</h2>
	<hr>
	<article class="grid_6 alpha" role="main">
        <!-- ABOVE REGULAR HTML CODING USING THE 960 GRID SYSTEM -->
	<?php
		$_category		= get_query_var('category_name');
/* I get the category name, I mean the slug-name of the category loaded at the moment, it should be 'noticias' */
		$query_single	= get_posts(array('category_name'=>$_category,'numberposts'=>1));
/*
THIS FIRST QUERY IS TO LOAD JUST ONE NEWS FROM THE CATEGORY 'NOTICIAS', in this case it is going to be the latest one published.
*/
		foreach($query_single as $post): setup_postdata($post);?>
/*
IN HERE I load the post data and display it accordingly, It may be a litle confusing because I display the first attachment (ONLY the first) and resize it using the aqua resizer code, wich is VERY good. And then I display the content but remove from it the image.
*/
			<h2 class="grey_dark"><?php the_title(); ?></h2>
			<div id="_interno">
				<?php
				$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' =>'any', 'post_parent' => $post->ID );
				$attachments = get_posts($args);
				if ($attachments) {
					$attachment = $attachments[0];//GET ONLY THE FIRST ATTACHMENT...
					$img_obj	= wp_get_attachment_image_src($attachment->ID , 'full');
					$image		= aq_resize($img_obj[0], 460,null,true,true); //resize & crop img
				?>
				<img src="<?php echo $image ?>" />
				<?php }
				//echo the_content();
				echo '<p>'.preg_replace('/<img[^>]+./','',get_the_content()).'</p>';
				?>
			</div>
		<?php endforeach; ?>
	</article>
	<article class="grid_6 omega" id="noticias_home">
		<ul class="_noticias">
			<?php
/*
IN HRERE I MAKE A NEW QUERY, this one is to display the noticias category with pagination and all...showing only 6 items per page.
*/
			$the_query = new WP_Query(array('category_name'=>'noticias','posts_per_page'=>6,'paged'=>get_query_var('paged')));
			// The Loop
			$i = 0;
			while ( $the_query->have_posts() ) :
				$the_query->the_post();
				?>
				<?php if($i%2 == 0) : ?><li class="grid_3 alpha">
				<?php else : ?><li class="grid_3 omega">
				<?php endif ?><!-- THE IF, ELSE IS TO DIFFER THE ODD COLUMN FROM THE EVEN COLUMN-->
					<h6 class="grey_light"><?php echo get_the_date('d / m / Y'); ?></h5>
					<h5 class="grey_light"><?php echo '<a href="'.get_permalink().'">'. get_the_title() . '</a>'; ?></h5>
					<!-- THE 'READ MORE' LINK-->
					<a href="<?php echo get_permalink() ?>" class="_mais">LEIA TUDO</a>
				<?php
				if($i%2 == 0) : ?></li>
					<!--  THE DIV CLEAR IS TO MAKE SURE ALL LINES ALIGN PROPERLY-->
				<?php else : ?></li><div style="clear:both"></div>
				<?php endif;
				$i++;
			endwhile;
			?>
		</ul>
		<div id="_pagination">
			<!-- THE PAGINATION DIV AND VARIABLES AND STUFF-->
			<?php
			$number_posts = intval(get_category_by_slug('noticias')->count);//COUNTING THE NUMBER OF POSTS IN A GIVEN CATEGORY BECAUSE USE THE _max_num_pages usually gives me the wrong number of pages...
			$max = ceil(($number_posts) / 6);//MAKING SURE THE $MAX NUMBER USED IN PAGINATION IS CORRECT...
			if (function_exists("pagination")) {
/*
HERE I USE THE CODE I found at I do not even remember where exactly but if you twist my arm I'd say it is probably from
http://www.kriesi.at/archives/how-to-build-a-wordpress-post-pagination-without-plugin
*/
	    		pagination($max);
			}
		?>
		</div>
	</article>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

OK then, now you can see how I managed to have my categorie page set up and working JUST FINE AND DANDY! ok then…but how about that AJAX thing I said earlier? Well the ajax thing I got from WPTuts, you can check it out at:
http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/ and in my implementation the AJAX is set up to reload the content inside the <article> with the class name ‘noticias_home’ (I will change that in a minute, I’m still writing this post).

here is the code for it:

jQuery('#_pagination a').live('click', function(e){
  e.preventDefault();
  var link = jQuery(this).attr('href');
  jQuery('#noticias_home').html('Loading...');
  jQuery('#noticias_home').load(link+' #noticias_home');
});

OK!!!! everything regarding the category is fine and dandy. now for the single part, here is where, as we say in Brazil, the pig twists its tail…

The single has pretty much the same code for the category but I had to have a way to know wich post to show on the left and main part of the layout and in what page in the pagination it would be…

SO I found this AWESOME tutorial that you can check out in the link below:
http://adambalee.com/how-to-add-pagination-to-your-wordpress-blog-without-a-plugin/

This tutorial I did not follow through BUT it gave me a real good idea, to change the PERMALINK structure so I could have the post_id and the pagination as variables my PHP code could get from the $_GET thingy (I do not know if that is a function or whatever). IN THE FOLLOWING section I will show how I changed my wordpress permalink structure to help me with that pagination…

SO without further ado…let’s see the code for the single-categorias.php

<section class="grid_12">
	<h2 class="red" style="margin-bottom:0.2em;">NOTÍCIAS</h2>
	<hr>
	<article class="grid_6 alpha" role="main">
        <!--
        IN THIS PART HERE I HAVE DIRECT ACCESS TO THE POST I SHOULD DISPLAY IN THE SINGLE, OK, FINE, DANDY...THE CODE BELOW IS TO DISPLAY THE CONTENT IN THE SAME MANNER AS IT IS IN THE CATEGORIA-NOTICIAS.PHP
        -->
		<h2 class="grey_dark"><?php the_title(); ?></h2>
		<div id="_interno">
				<?php
					the_post();
					$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' =>'any', 'post_parent' => $post->ID );
					$attachments = get_posts($args);
					if ($attachments) {
						$attachment = $attachments[0];//GET ONLY THE FIRST ATTACHMENT...
						$img_obj	= wp_get_attachment_image_src($attachment->ID , 'full');
						$image		= aq_resize( $img_obj[0], 460, null, true ); //resize & crop img
						?>
						<img src="<?php echo $image ?>" />
					<?php }
					add_filter('the_content', 'strip_images',2);
					function strip_images($content){
						return preg_replace('/<img[^>]+./','',$content);
					}
					the_content();
					//global $wp_query, $post;
				?>
		</div>
		<!--
THIS IS THE 'INTERNAL' navigation of the post, next and previous.
-->
<nav role="navigation" id="_interno_nav">
			<?php previous_post_link( '<span class="_mais prev">%link', 'NOTÍCIA ANTERIOR</span>' ); ?>
			<?php next_post_link( '<span class="_mais next">%link', 'PRÓXIMA NOTÍCIA</span>' ); ?>
		</nav>
	</article>
	<article class="grid_6 omega" id="noticias_home">
<!-- HERE I include noticias.php wich is the loop to display all the news in the category 'noticias' and it has its own navigation and loads with ajax in the same way as it is in categorias-home.php -->
		<?php include 'noticias.php' ?>
	</article>
</section>

LET’S GO NOW TO THE CODE OF NOTICIAS.PHP where the magic happens!

<div id="wrapper_2">
	<ul class="_noticias">
	<?php
	// HERE I DECLARE THE VARIABLES I WILL USE FOR THE CUSTOM
        // NAVIGATION INSIDE THE SINGLE.PHP
	$paged		= 0;/*THIS VAR HOLDS THE PAGE IN WICH MY PAGINATION IS, I GET THIS VARIABLE FROM THE URL*/
	$current_id = 0;/*THIS VARIABLE HOLDS THE ID OF THE POST I'M DISPLAYING ON SINGLE.PHP*/
	$post_index	= 0;/* THIS VARIABLE TELLS ME WHAT IS THE INDEX OF THAT POST IN REFERENCE TO THE QUERY ITSELF SO I CAN HAVE MY PAGINATION DISPLAY THE CORRECT PAGE I'M IN AND ALSO TO REMOVE THE LINK FOR THIS POST in the post list of the category*/
	$i = 0;/*THIS VARIABLE IS JUST TO HELP ME WITH LAYOUT ISSUES, ODD-EVEN THINGS*/
	$j = 0;/*THIS VARIABLE GOES INSIDE THE LOOP TO FIND THE CORRECT INDEX FOR MY POST*/
	$ppp = 6;/* POSTS-PER-PAGE variable*/
	$temp_query;

	if($_GET["page"] == '' || $_GET["page"] == null){$paged = 0;}else{$paged = $_GET["page"];}
	if($_GET["post"]){$current_id = intval($_GET["post"]);}
        /* AS YOU CAN SEE, I LOOK FOR VALUES IN THE VARIABLE 'PAGE' AND THE VARIABLE 'POST' IN THE URL, THE POST I WILL ALLWAYS HAVE BUT THE PAGE I WILL NOT ALLWAYS HAVE, SO... */
	if($paged == 0){
		//If i do not have a 'page' value...
		//I figure it out by...
		$paged = 1;
		$temp_query = new WP_Query(array('category_name'=>'noticias','posts_per_page'=>-1));
                /*GETTING MYSELF A NEW QUERY FOR THE CATEGORY NOTICIAS*/
		while ( $temp_query->have_posts() ) :
$temp_query->the_post();
/*  AND GOING through every single post in that query*/
			if(get_the_ID() == $current_id){
                                /* I CHECK IF THE CURRENT POST I'm in in the single.php is the same as this one I'm in inside the loop, if it is, I break the loop and save his index*/
				$post_index = $j;
				break;
			}
			$j++;
			//echo $j;
		endwhile;
/* KNOWING THE CORRECT INDEX for my post and the number of posts per page I wanna display I can now figure out the correct page I'm supose to be in the pagination*/
		$paged = floor($post_index/$ppp) + 1;
/* THE '+ 1' PART is because pagination does not start in page = 0, but rather in page = 1, so for instante, I'm in post with index 1. 1/6 ~= 0.1666, the floor of it is 0 but i will display the post with index 1 in the FIRST page not the ZERO page, got it? */
	}
	$the_query = new WP_Query(array('category_name'=>'noticias','posts_per_page'=>$ppp,'paged'=>$paged));
	/*THIS IS THE LOOP THAT DISPLAYS THE CATEGORY POSTS this query is paged and the pagination is figured out in the loop above...*/
	while ( $the_query->have_posts() ) :
		$the_query->the_post();
		//NORMAL LOOP, DISPLAYING THE POSTS FROM THE CATEGORY NOTICIAS
?>
		<?php if($i%2 == 0) : ?><li class="grid_3 alpha">
		<?php else : ?><li class="grid_3 omega">
		<?php endif ?><!-- THE IF, ELSE IS TO DIFFER THE ODD COLUMN FROM THE EVEN COLUMN-->
			<?php if(get_the_ID() == $current_id){
			?>
				<h6 class="red"><?php echo get_the_date('d / m / Y'); ?></h5>
				<h5 class="red"><?php echo get_the_title(); ?></h5>
			<?php
			}
			else{
			?>
				<h6 class="grey_light"><?php echo get_the_date('d / m / Y'); ?></h5>
				<h5 class="grey_light"><?php echo '<a href="'.get_permalink().$paged.'">'. get_the_title() . '</a>'; ?></h5>
				<!-- THE 'READ MORE' LINK -->
				<a href="<?php echo get_permalink().$paged ?>" class="_mais">LEIA TUDO</a>
			<?php
			}
			?>
		<?php
		if($i%2 == 0) : ?></li>
			<!--  THE DIV CLEAR IS TO MAKE SURE ALL LINES ALIGN PROPERLY-->
		<?php else : ?></li><div style="clear:both"></div>
		<?php endif;
		$i++;
	endwhile;
	?>
	</ul>
	<div id="_pagination">
		<!-- THE PAGINATION DIV AND VARIABLES AND STUFF-->
		$pagination = array(
		'base' => @add_query_arg('page','%#%'),
		'format' => '',
		'total' => $the_query->max_num_pages,
		'current' => $paged,
		'show_all' => true,
		'prev_next'    => False,
		'type' => 'plain',
		);
		echo paginate_links($pagination);
	?>
	</div>
</div>

Soooo….I guess that’s that. The code I will admit is ugly. I wish I had a better aproach to this, a more elegant one…could someone help me? Well, now At least I can say it is WORKING. thank you for you time and my wishes it helps you.

discovered something newer…if I get the code from single-noticias.php and paste it inside category-noticias.php the paging works. some lil things like the attachment display and stuff is not working properly…but still long ways to go before I get it working like a charm.

BELOW IS THE CODE FOR THE SINGLE-NOTICIAS.PHP

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package Shape
 * @since Shape 1.0
 */
 ?>
<section class="grid_12">
	<h2 class="red" style="margin-bottom:0.2em;">NOTÍCIAS</h2>
	<hr>
	<article class="grid_6 alpha" role="main">
		<h2 class="grey_dark"><?php the_title(); ?></h2>
		<div id="_interno">
				<?php
					the_post();
					$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' =>'any', 'post_parent' => $post->ID );
					$attachments = get_posts($args);
					if ($attachments) {
						$attachment = $attachments[0];//GET ONLY THE FIRST ATTACHMENT...
						$img_obj	= wp_get_attachment_image_src($attachment->ID , 'full');
						$image		= aq_resize( $img_obj[0], 460, null, true ); //resize & crop img
						?>
						<img src="<?php echo $image ?>" />
					<?php }
					add_filter('the_content', 'strip_images',2);
					function strip_images($content){
						return preg_replace('/<img[^>]+./','',$content);
					}
					the_content();
					//global $wp_query, $post;
				?>
		</div>
		<nav role="navigation" id="_interno_nav" class="">
			<?php previous_post_link( '<span class="_mais prev">%link', 'NOTÍCIA ANTERIOR</span>' ); ?>
			<?php next_post_link( '<span class="_mais next">%link', 'PRÓXIMA NOTÍCIA</span>' ); ?>
		</nav>
	</article>
	<article class="grid_6 omega" id="noticias_wrapper">
		<?php include 'noticias.php' ?>
	</article>
</section>

AND NOW THE CODE FOR THE NOTICIAS.PHP WICH LOOPS AND DISPLAYS THE CATEGORY POSTS

<div id="wrapper_2">
	<?php
			// The Query
	$the_query = new WP_Query(array('category_name'=>'noticias','posts_per_page'=>4,));

	// The Loop
	$i = 0;
	while ( $the_query->have_posts() ) :
		$the_query->the_post();
		?>
		<?php if($i%2 == 0) : ?><li class="grid_3 alpha">
		<?php else : ?><li class="grid_3 omega">
		<?php endif ?><!-- THE IF, ELSE IS TO DIFFER THE ODD COLUMN FROM THE EVEN COLUMN-->
			<h6 class="grey_light"><?php echo get_the_date('d / m / Y'); ?></h5>
			<h5 class="grey_dark"><?php echo '<a href="'.get_permalink().'">'. get_the_title() . '</a>'; ?></h5>
			<!-- THE 'READ MORE' LINK -->
			<a href="<?php echo get_permalink() ?>" class="_mais">LEIA TUDO</a>
		<?php
		if($i%2 == 0) : ?></li>
			<!--  THE DIV CLEAR IS TO MAKE SURE ALL LINES ALIGN PROPERLY-->
		<?php else : ?></li><div style="clear:both"></div>
		<?php endif;
		$i++;
	endwhile;
	?>
	<div id="home_pagination">
		<!-- THE PAGINATION DIV AND VARIABLES AND STUFF-->
		<?php
		$number_posts = intval(get_category_by_slug('noticias')->count);//COUNTING THE NUMBER OF POSTS IN A GIVEN CATEGORY...
		$max = ceil(($number_posts) / 4);//MAKING SURE THE $MAX NUMBER USED IN PAGINATION IS CORRECT...
		if (function_exists("pagination")) {
    		pagination($max);
		}
	?>
	</div>
</div>

hey just edited the code of the loop, commented it a lil bit to help you all understand it a lil bit better.

<div id="noticias_wrapper">
	<h2 class="red title">NOTÍCIAS</h2>
	<ul class="noticias_home">
	<?php
		// Posts Per Page option
		$ppp			= 4;//POSTS PER PAGE
		$init_offset	= 4;// INITIAL OFFSET
		$custom_offset	= 0;//OFFSET THAT IS CALCULATED ACCORDING PAGINATION
		if ($paged == 0) {
			$paged = 1;//RESOLVING PAGINATION BUG ISSUES
			$custom_offset = $init_offset;
		} else {
			//$paged -= 1;//faço isso por que de alguma forma o link pula de $paged = 0 para $paged = 2;
			if($init_offset == 0){$paged -= 1;}//RESOLVING PAGINATION BUG ISSUES
			$custom_offset = $ppp*($paged);
		}
		//print_r('$PAGED '.$paged.' -- ');
		//print_r('$INIT_OFFSET '.$init_offset.' -- ');
		//print_r('$CUSTOM_OFFSET '.$custom_offset);
		$args		= Array('category_name' => 'noticias', 'offset' => $custom_offset, 'posts_per_page' => 4);
		$not_home = get_posts($args);
		//GET ALL THE POSTS FROM THE CATEGORY NOTICIAS, SHOW ONLY 4 PER PAGE AND OFFSET THE
		//NUMBER OF POSTS I NEED TO OFFSET IN THE CURRENT PAGE IN THE NAVIGATION
		$i = 0;
		//BEGINNING THE LOOP...
		foreach($not_home as $post) : setup_postdata($post);
	?>
		<?php if($i%2 == 0) : ?><li class="grid_4 alpha">
		<?php else : ?><li class="grid_4 omega">
		<?php endif ?><!-- THE IF, ELSE IS TO DIFFER THE ODD COLUMN FROM THE EVEN COLUMN-->
				<h6 class="grey_light"><?php echo get_the_date('d / m / Y'); ?></h5>
				<h5 class="grey_dark">
					<a href="<?php the_permalink()?>">
						<?php the_title(); ?>
					</a>
				</h5>
				<?php
					//IN THIS LOOP SEARCH FOR THE ATTACHMENTS OF THE GIVEN POST...
					$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' =>'any', 'post_parent' => $post->ID );
					$attachments = get_posts($args);
					if ($attachments) {
							$attachment = $attachments[0];//GET ONLY THE FIRST ATTACHMENT...
							$img_url = wp_get_attachment_image_src($attachment->ID , 'thumbnail'); ?>
							<a href="<?php the_permalink()?>">
								<img src="<?php echo $img_url[0] ?>" height="<?php echo $img_url[2] ?>" width="<?php echo $img_url[1] ?>" />
							</a>
						<?php }
					else{
						//IF THERE ARE NO ATTACHMENTS (IMAGES) DISPLAY THE EXCERPT;
						echo the_excerpt();
					}
				?>
				<!-- THE 'READ MORE' LINK -->
				<a href=" <?php get_permalink() ?> " class="leia_tudo">LEIA TUDO</a>
			<?php if($i%2 == 0) : ?></li>
				<!--  THE DIV CLEAR IS TO MAKE SURE ALL LINES ALIGN PROPERLY-->
			<?php else : ?></li><div style="clear:both"></div>
			<?php endif ?>
		<?php
			$i++;
			//END OF THE LOOP...
			endforeach;
	?>
	</ul>
	<div id="home_pagination">
		<!-- THE PAGINATION DIV AND VARIABLES AND STUFF -->
		<?php
		$pages = '';// I HAVE NO IDEA WHAT THIS IS DOING HERE, PRETTY SURE I CAN DELETE THIS VAR.
		$number_posts = intval(get_category_by_slug('noticias')->count);//COUNTING THE NUMBER OF POSTS IN A GIVEN CATEGORY...
		$max = ceil(($number_posts - $init_offset) / $ppp);//MAKING SURE THE $MAX NUMBER USED IN PAGINATION IS CORRECT...
		//print_r($paged);
		if (!$current 		= get_query_var('paged')) $current = 1;//I DON'T KNOW WHAT THIS DOES...
		$args['base'] 		= str_replace(999999999, '%#%', get_pagenum_link(999999999));//I DO NOT KNOW WHAT THIS DOES...
		$args['total']		= $max;
		$args['current']	= $current;//I DO NOT KNOW WHAT THIS DOES...
		$args['mid_size'] 	= 3;//I DO NOT KNOW WHAT THIS DOES...
		$args['end_size'] 	= 2;//I DO NOT KNOW WHAT THIS DOES...
		echo paginate_links($args);//I DO NOT KNOW WHAT THIS DOES...
	?>
	</div>
</div>