WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] howto? monthly featured article in sidebar (7 posts)

  1. zoblue
    Member
    Posted 6 years ago #

    Hi, I'm freelancing for a company and am setting up a blog for them to use for posting magazine articles. A bit like Wired does on their web site.

    Here's the site right now in it's early phase:
    http://journal.ahima.org

    What they'd like to do is have a "current issue" feature on the top of sidebar where it would show the magazine cover and link to a page with that particular magazine's table of contents and such. How do I do this so that each month it can be updated without having to hard code the sidebar with a new image and url each month?

    I'm thinking this could be a widget of some sort? Where it could grab the current magazine cover upload and link it to the new page? Let me know if I'm not making sense!

  2. Joni
    Member
    Posted 6 years ago #

    You can create a category, "feature". Make a note of its ID, you'll need this in a minute.

    Then, in your sidebar, put something like this (your template may be slightly different):

    <?php query_posts('cat=X&showposts=1'); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <img src="/your/path/to/image/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" class="magcover" /><?php the_excerpt(__()); ?>
    <?php endwhile; else: ?>
    <?php endif; ?>

    This tells WP to look for only posts in the category of "Feature" (whatever that ID is) and only show the latest post from that category.

    You'll also have to use a custom field where you put the magazine image and you'll need to further revise that sidebar code to pull that image in. Read more about that here:
    http://codex.wordpress.org/Using_Custom_Fields

    And particularly to do what you want, which is to add images:
    http://justintadlock.com/archives/2007/10/27/wordpress-custom-fields-adding-images-to-posts

    <img src="/your/path/to/image/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" class="magcover" />

    See that I've placed that code above in the sidebar code that you'll need to use. I separated it out just so you could see how it works a bit better. All you need to do when you post is declare your custom field to be Image and upload your magazine cover via the posting page. Substitute the actual path to your image uploads that you normally use, and you can use a styling hook, in this case the class "magcover" -- or whatever you want to call that style class -- to style the appearance of that image. Put that path in the "variable" box in the custom field and WP will insert it into the sidebar code.

    HTH.

  3. zoblue
    Member
    Posted 6 years ago #

    Thank you so so much! I'm going to try it and will let you know if it works, which I'm sure it will! :D

  4. zoblue
    Member
    Posted 6 years ago #

    Success! Not exactly on the ball but dang close enough. It doesn't look like there's a way to add a category to a Page and then run a query_pages.

    After following your instructions and adding the necessary custom fields, the coded ends up looking like this:

    <div id="current_issue">
        <?php query_posts('cat=Feature&showposts=1'); ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="post-<?php the_ID(); ?>">
        <a href="<?php the_permalink() ?>" rel="bookmark">
        <?php // check for thumbnail
        $thumb = get_post_meta($post->ID, 'thumbnail', $single = true);
        // check for thumbnail class
        $thumb_class = get_post_meta($post->ID, 'thumbnail_class', $single = true); ?>
        <?php // if there's a thumbnail
        if($thumb !== '') { ?>
        <img src="<?php echo $thumb; ?>" class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>" alt="<?php echo the_title(); ?>" title="<?php echo the_title(); ?>" /><?php } // end if statement
        // if there's not a thumbnail
        else { echo ''; } ?>
        <br />
        <small>in current issue</small></a>
        <?php endwhile; else: ?>
        <?php endif; ?>
        </div></div>

    Thank you! Now, I'll just write out instructions for the future authors of the blog about adding custom keys and what not.

  5. Joni
    Member
    Posted 6 years ago #

    Great!

  6. johnnywhee
    Member
    Posted 6 years ago #

    Ok - I've tried this and I'm lost. I read the linked post on how to upload images so they can be used as excerpts, and this post, and now I have two code samples. None of it is working.

    I'm confused. Can someone please help me figure out what I'm doing wrong?

    I have created the style tag. I can insert an image into the post. But the post shows up in the center column and not where I've put code into the sidebar.

    I think the problem is in setting the custom field. Do I make two?
    One post says to create the Key and then use the image url, the other says to put in magcover?

    Help!

    This seems like it should be simple.

  7. zoblue
    Member
    Posted 6 years ago #

    I've updated the code a bit, the only change was in the second line. I used 'category_name' instead of 'cat' and moved the end of the link tag up a few lines...

    <?php query_posts('category_name=In the magazine&showposts=1'); ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="post-<?php the_ID(); ?>">
        <a href="<?php the_permalink() ?>" rel="bookmark">
        <?php // check for thumbnail
        $thumb = get_post_meta($post->ID, 'thumbnail', $single = true);
        // check for thumbnail class
        $thumb_class = get_post_meta($post->ID, 'thumbnail_class', $single = true); ?>
        <?php // if there's a thumbnail
        if($thumb !== '') { ?>
        <img src="<?php echo $thumb; ?>" class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>" alt="<?php echo the_title(); ?>" title="<?php echo the_title(); ?>" />
        <small>in current issue</small></a>
    	<?php } // end if statement
        // if there's not a thumbnail
        else { echo ''; } ?>
        <?php endwhile; else: ?>
        <?php endif; ?>

    @johnnywhee, I hope this helps:
    Copy/pasta the above code into your sidebar and customize the first line of code where it says:
    category_name=your super special category

    and spaces are ok too. Then when you write your post, customize the following three items for the it.

    1. Category: your super special category
      and it must match what's in the php code!
    2. Add two key/value combos:
      1. Key: thumbnail
        Value: http://url/to/thumbnail
      2. Key: thumbnail_class
        Value: css_class
        The css_class can be whatever you want and it allows you to style the image

    I hope that helps!

Topic Closed

This topic has been closed to new replies.

About this Topic