CSS/List & Conditional Tag Help WordPress
- SOLVED
I have a simple question again, lol, that I can't figure out...
On my side bar in my website:
http://theurbantwist.com/columns/from-the-bottom-up-fernando-quijano/2010/05/28/goodbye-gary/
There's a section that I have called "most discussed stories of the week" and I was wondering how can I add pictures of numbers that I would design myself i.e. "1,2,3,4,5" instead of the textual versions of the numerals.
An example could be found on Mashable's website:
http://mashable.com
in their "top 5 mashable list" on the sidebar.
I know that CSS can get what I'm looking for but I've tried and tried and researched and researched and can't find the answer. I've been building my site bit by bit with the help of sites like this and I really appreciate the help.
Here's the code:
<div id="most-popular">
<ul>
<?php
$week = date('W');
$year = date('Y');
$popular = new WP_Query("orderby=comment_count&posts_per_page=5&w=$week&year=$year"); ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<li>
<?php $justanimage = get_post_meta($post->ID, 'image', true);
if ($justanimage) {
?>
<img align="left" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&w=75&h=63&zc=1" alt="<?php the_title(); ?>" />
<?php } else { ?>
<img align="left" src="<?php bloginfo('template_directory'); ?>/images/no-thumb.png" width="75px" height="63px" alt="<?php the_title(); ?>" />
<?php } ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</li>
<?php endwhile; ?>
</ul>
<img alt="" src="<?php bloginfo("template_url"); ?>/images/most-read-bottom.gif"/>
</div>
Also another small problem that I have is that I'm using conditional tags to show content that only pertains to the audio section of my website.
Example pages:
Regular page: http://theurbantwist.com/columns/from-the-bottom-up-fernando-quijano/2010/05/28/goodbye-gary/
Audio page: http://theurbantwist.com/music/audio/2010/05/28/neyo-beautiful-monster/
Notice how on the audio post page, there's a little section where I have a "quick play" and I ask people to vote for the artist.
Then also notice the tags. For some reason the tags are being pulled from the last post to the right in my "quick play" when the tags should be pulled from the current post.
I thought I had everything figured out because after all I do have the audio post page looking the way that I want it to other than this minor detail.
The code is below that I used in my single.php file. Can someone take a look?
<?php if (in_category('audio')) { ?>
<div id="audio_extras"><h1>HELP MAKE OR KEEP THIS SONG #1, VOTE FOR IT BELOW MINIMUM OF 25 VOTES NEEDED TO BE COUNTED IN
THE TOP 10 OF OUR CHARTS</h1>
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
</div>
<div style="padding:2px 5px 2px 5px; width:100%; background-color:#000; color:#fff; font-size:20px; font-weight:bold;">Quick Play</div>
<style>
#relatedaudio li {
display:block;
width:120px;
}
#relatedaudio li a{
text-decoration:none;
}
#relatedaudio div {background-image:url('http://theurbantwist.com/online/wp-content/themes/yamidoo/images/playicon.jpg');
background-repeat:no-repeat; width:120px; height:120px; float: left; margin: 0; padding:0; text-align:left; line-height:5px;
font-size:12px; padding:0 5px 0 5px; }
#relatedaudio div a {line-height:12px; position:relative; padding:47px 10px 0 10px; font-weight:bold; display:block; color:#111; width:120px; text-decoration:none;}
#relatedaudio div a:hover {color:#555; text-decoration:none;}
</style>
<div id="relatedaudio">
<?php $the_query = new WP_Query('showposts=4 && category_name=audio');
while ($the_query->have_posts()) : $the_query->the_post();
?>
<div>
<ul>
<li>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</li>
</ul>
</div>
<?php endwhile; ?>
</div>
<?php } ?>
<div style="clear:both;"></div>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; margin-top:25px; margin-bottom:10px;width:100%; height:25px;"></iframe>
<small><?php the_tags( __( '<span class="tag-links">Tags: ', 'wpbx' ), ", ", "</span>\n" ) ?></small>
Answers (2)
Bill Hunt answers:
For the first part, you just need to have images named appropriately and then count through them:
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<?php $counter++; ?>
<li>
<img src="/path/to/my/image_<?php print $counter ?>">
...
For the second, it looks there's a bug in your version of WP and your WP_Query on the inside is overriding the outside Loop, so you need to store that somewhere temporarily:
<?php $temp_query = $wp_query; ?>
<?php $the_query = new WP_Query('showposts=4 && category_name=audio');
while ($the_query->have_posts()) : $the_query->the_post();
?>
...
<?php endwhile; ?>
<?php $wp_query = $temp_query; ?>
Brennen Jones comments:
Your first hint worked as a charm.
I altered the code as suggested in second box but still the same. Any other suggestions?
Bill Hunt comments:
Oh, maybe $post is getting overridden, too:
<?php $temp_post = $post;
$the_query = new WP_Query('showposts=4 && category_name=audio');
while ($the_query->have_posts()) : $the_query->the_post();
?>
...
<?php endwhile; ?>
$post = $temp_post;
?>
Bill Hunt comments:
Sorry, that *should* be:
<?php $temp_post = $post;
$the_query = new WP_Query('showposts=4 && category_name=audio');
while ($the_query->have_posts()) : $the_query->the_post();
?>
...
<?php endwhile;
$post = $temp_post;
?>
Brennen Jones comments:
Aha! That worked!
Thanks my friend...
Was there a reason why other query wasn't working?
Svilen Popov answers:
Here is an example of using CSS style
<div id="most-popular">
<ul>
<?php
$week = date('W');
$year = date('Y');
$i = 1;
$popular = new WP_Query("orderby=comment_count&posts_per_page=5&w=$week&year=$year"); ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<li class="recent-<?php echo $i; ?>">
<?php
$justanimage = get_post_meta($post->ID, 'image', true);
if ($justanimage) {
?>
<img align="left" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&w=75&h=63&zc=1" alt="<?php the_title(); ?>" />
<?php } else { ?>
<img align="left" src="<?php bloginfo('template_directory'); ?>/images/no-thumb.png" width="75px" height="63px" alt="<?php the_title(); ?>" />
<?php } ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</li>
<?php $i++; endwhile; ?>
</ul>
<img alt="" src="<?php bloginfo("template_url"); ?>/images/most-read-bottom.gif"/>
</div>
And these styles into <strong>style.css</strong>
li.recent-1 { bacgkround: url(" your image №1") no-repeat top left;
li.recent-2 { bacgkround: url(" your image №2") no-repeat top left;
li.recent-3 { bacgkround: url(" your image №3") no-repeat top left;
li.recent-4 { bacgkround: url(" your image №4") no-repeat top left;
li.recent-5 { bacgkround: url(" your image №5") no-repeat top left;