displaying a teaser or excerpt with read more in wordpress

In my previous post I was working on how to limit the number of post on worpress the code below also does the same thing but let me explain them line by line.


<?php $my_query = new WP_Query('category_name=f_art&showposts=50');

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>



<?php the_content('Read More...', strip_teaser, 'more_file'); ?>

<?php endwhile; ?>


THE CODE BY LINE

<?php $my_query = new WP_Query('category_name=f_art&showposts=50');

This code calls for a specific category name which is f_cart and will display 50 posts maximum if you remove the &showposts and of course the equal sign and the number; this will display all posts categorized under the category slug f_art.

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

Here we have three lines of code I guess this is quite straight forward this will just display the post title which is also a link under the category specified before it.

<?php the_content('Read More...', strip_teaser, 'more_file'); ?>

This line tells wordpress to display the post or article under the category specified above it, what is more it displays a read more link if you need an excerpt or teaser. There is actually a more button on the wordpress admin. If you are adding or editing a post look above the wysiwig editor you should find this image:

Just look for a desired point in your post where you want to add the more link and click on the button. This link is a further explanation http://codex.wordpress.org/Customizing_the_Read_More.

displaying: number of recent posts

I was recently working on the boxingbulletin.net site, the template or the theme isn't mine the name is actual classigMagRed but the skin is mine. I was asked to change the number of recent posts to 20 but now the writer wants it back down to 8, it took me about an hour or two to figure it out again.

I found the file to edit "plugins.php" it was under the theme's includes folder. The code to look for should be something like this:

function mdv_recent_posts($no_posts = 20...

This should help me document what I did with this template.

IE 7, Chrome, Safari, and Old FireFox hacks

A few or I think it was last year, anyway I was working on a project, all was well, it worked fine both IE7 and IE6 and FireFox. The rest of the other browsers well, there was no need for them at the moment but this particular project called for Chrome and Safari as well. Now, that really hit a snag, it has always been my SOP not to hack the CSS yet, as much as possible no hacks, because it gets kind of hairy when you have to come back on it later to adjust for newer and more standardized version of the browsers. You'll get stuck working on it like you started from scratch, and sometimes or most of the time you don't exactly remember what you did. So I found this site that shows you how to hack Chrome and Safari.

Here is a sample of the CSS code:

/*\*/  html*#test1 {
[color:red;/*Affects older Firefox and Netscape browsers only. Seen also by IE5-6 and Safari for Macintosh, which is addressed below.*/
color:blue;/*Affects Google Chrome amd Safari for Macintosh only (v1-3). See also by IE5-6, but thats addressed below. Also hidden from older Firefox and Netscape browsers.*/
]color:green;/*Affects IE 7 only. Seen by IE5-6 but thats addressed below. Hidden from Safari and all Firefox and Netscape browsers.*/  }/**/


.dummyend[id]{
clear:both/*end hack using dummy attribute selector for IE5 mac, else error in CSS occurs!*/
}  


/*The above rule is hidden from IE for MAC,
and read only by older Firefox and Netscape 6-7 and IE5-7 for PC, and Chrome/Safari, in general.*/


/*Newer Firefox and Netscape agents reads rule, but does not read any properties set within [],
so is unaffected by it, probably because it sees these as part of an attribute selector.
Those will be hidden.*/


/*IE 7 on PC will correctly read all rules as it will ignore many characters before a property*/


/*Safari, as well as Chrome, see each [] as a character and not part of a selector,
if one falls before a property.
These cause the property name following the character to not be read,
but next line without "[]" property is  parsed.*/


/*use of [] will break all css selectors following the rule,
if all are not closed, as Mozilla-Netscape read the [] as part of a selector rule,
so make sure they are all closed, using dummy selector.*/  


/*\*/
* html #test1 {
color:green;/*Finally, be sure to reapply a fix that affects IE 5-6 only here.
IE for Mac and IE 7 for PC are not affected here,
which means purple above should work only in IE 7 above!*/
}  /**/  

And this is the html code:
<div id="test1">
If you see black, you are using a newer Standarized browser like Opera or Mozilla.
If you see red, you are using an older version of Mozilla (< version 1.01).
If you see blue, you are using Google Chrome and Macintosh/PC Safari (versions 1 through 3).
If you see purple, you are using Internet Explorer 7!
If you see green, you are using Internet Explorer 6!
If you see orange, you are using a Internet Explorer 5!.
</div>


The code above worked pretty well if I had searched for it earlier I guess I wouldn't have had wasted time by trying not to hack. But I still avoid hacks, I only use the hack above as a last resort. These days I test my CSS against IE7, IE6, IE8, FireFox, Safari and Chrome. Okay so no opera, well Opera is quite similar to FireFox and I usually do not find any errors with Opera.

MANY THANKS TO GiantIsland for this hack.
CREDITS: http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx

Word Press: number of blogs displayed

Today was quite a confusing day; while working on a mockup, our resident writer complained that he can't see the blogs he published on boxingbulletin.net. Naturally, I went in and checked for the codes compared it how it was running on the local machine and live, but I couldn't find what was wrong with these codes:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php if (in_category('excerpts') && is_home() ) continue; ?>

<div id="post-<?php the_ID(); ?>" class="post">

<h3 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>

<div class="meta">



<p><span class="date-post icon"><?php the_time('F j Y') ?></span><span class="comment-post icon"><?php comments_number('No Comments','one Commented','% Commented'); ?></span></p>

<p><span class="categories-post icon">Categorized Under: <?php the_category(', ') ?></span></p><div class="clearleft"></div>

</div>

<div class="entry">

<?php the_content(); ?>

</div>

</div>

<?php endwhile; ?>

What this block of code does is display the blogs on WordPress but restricts the display of the 'excerpts' category articles, because I had it display somewhere else on the page with this block of code:


<?php $my_query = new WP_Query('category_name=excerpts&showposts=10');

while ($my_query->have_posts()) : $my_query->the_post();

$do_not_duplicate = $post->ID;?>

<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

Finally, I gave up because its been awhile since I last worked on WordPress themes, I consulted one of my developer colleague who used to work with it. His diagnosis was the logic was right and that I should check the settings first of which I already did. It turned out that only 3 posts were set to display, what I didn't know was that WordPress also counts the articles under the Excerpts Category, although the code above skips the articles from displaying (under the Excerpts Category), again it does not display the articles under excerpts but counts the articles.

The solution was add more blog articles to display, and alternate the articles under the Excerpts with the other cateogries.

Browser Different output on different servers

This is a lot confusing eh... Has anyone ever tried having a different output of their XHTML/CSS locally and publishing it live it looks different... well slightly different. That happened to me again, anyway I'm going to fix it tomorrow and see how it will go. 

Right now I better get some zzssss and wake up in an hour or two and back to work again.