Grow your CSS skills. Land your dream job.

[Solved] WordPress Single Full Post On Front Page

  • # January 12, 2010 at 3:31 pm

    Hello all,

    What I’m looking to to is display one post per page. The whole post. Example can be found here: http://www.hiphopquoted.com/.

    If someone could help me figure out how to do this, I would be seriously grateful.

    I love this site and wouldn’t have gotten past the wordpress install w/o all of chris’ video tuts.

    Thanks in advance!

    Cheers,

    DSD

    # January 13, 2010 at 12:40 am

    ok. i got it working using a variation of the "mullet" loop http://perishablepress.com/press/2007/11/14/easily-adaptable-wordpress-loop-templates/.

    this works:

    Code:

    < ?php if (have_posts()) : ?>

    < ?php $count = 0; ?>

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

    < ?php $count++; ?>

    “>Title: < ?php the_title(); ?>

    < ?php if ($count == 1) : ?>

    < ?php the_content(); ?>

    < ?php else : ?>

    < ?php endif; ?>

    i don’t know if that’s exactly right but it works.

    # January 13, 2010 at 11:35 am

    That’s basically it…and you can use WordPress Conditional Statements to determine if you want specific categories only, as well. But yeah, you got the gist of it.

    LOVE that Hip Hop website…is it yours?

    # January 13, 2010 at 1:45 pm

    Lars,

    Nope, it’s not mine. I love type and design but I’m still running through Lynda’s PHP for nitwits series, so all of this is all a learning experience for me. I just want to be able to post my content already.

    Since last night, I’ve found a ton of ways to get my content on the front page. And I’ve found many ways to style posts individually.

    I can add a class based on the post title and style that way. I can add styles with the art direction plug-in. I can use custom fields and custom classes. All these ways are great and they all give me almost the control I need.

    But the only way I seem to be able to change the header and footer content, is to create a static page with my own html code inside. I can do everything I want to, this way. Even have have some pages where I can experiment with HTML5. But I can’t syndicate the content, as pages don’t show up in RSS.

    If you view his code, you can see that he has a stylesheet based on the current post. I can do that like this:

    Code:
    < ?php $customStyles = get_post_meta($post->ID, “customStyles”, true);
    if (!empty($customStyles)) { ?>

    # January 17, 2010 at 12:28 pm

    Hi, I did the hiphopquoted.com site you mentioned, in regard to the CSS for each post I used the designate plugin for wordpress from here http://github.com/ionfish/designate .I found it a lot better that the art direction plugin as it doesn’t inject styles into the head, it links to an external stylesheet in a folder.

    I also modified it so I can pick a JS library (JQuery, SIFr, Typekit etc) for each post as well as styles for each post, let me know if you want that.

    For the single post I just used a straightforward loop…

    Code:
    < ?php query_posts('posts_per_page=1'); ?>
    < ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    id=”post-< ?php the_ID(); ?>“>

    < ?php the_title(); ?>

    < ?php the_content(); ?>

    < ?php endwhile; else: ?>

    Sorry, no posts matched your criteria.

    < ?php endif; ?>

    on index.php and used the recent-posts plugin (http://wordpress.org/extend/plugins/recent-posts/) to create the next post link on the homepage. Which then just links to the single.php for each post.

    Depending on how much you want to change the header and footer for each post you could you use the body class with the id of the post in your style sheet, unless its completely different each time.

    # January 17, 2010 at 10:31 pm

    olliekav,

    first, let me say – i love your site. i’ve been learning html/css for the past 6 months or so. yours is the site that made me want to take the leap into wordpress.

    thank you for the advice. i’ve added the designate plugin. much simpler than i had it set up before. i also added the recent posts plugin. the only problem i’m having is that it’s actually doing what it’s supposed to. showing my recent posts. how would transform those into next/prev links like yours?

    i’m integrating @fontface currently, but would be definitely interested in picking a js library per post.

    again, thanks for your help. keep up the awesome work.

    cheers.

    # January 18, 2010 at 5:33 am

    Ah okay, sorry I should have posted up that code. So for the next previous links, I just use the function from the recent-posts to create the link in the header…e.g.

    Code:
      < ?php if (is_home()) : ?>

    • < ?php mdv_recent_posts(1,'','',false,1,false,false); ?>
    • < ?php else : ?>

    • < ?php previous_post_link('%link', 'Previous', TRUE) ?>
    • < ?php next_post_link('%link', 'Next', TRUE) ?>
    • < ?php endif; ?>

    For designate I altered the plugin like so…

    Code:
    function designate_stylesheet($use_ids = false) {
    global $post;

    if (is_home() && have_posts() || is_single() || is_page()) {
    $custom = get_post_meta($post->ID, ‘stylesheet’, true);

    if ($custom && strlen($custom) > 0) {
    $slug = preg_replace(‘/.css$/’, ”, $custom);
    } elseif ($post->post_name && !$use_ids) {
    $slug = $post->post_name;
    } else {
    $slug = ‘post-style-’ . $post->ID;
    }

    if (strlen($slug) > 0) {
    $location = “/post-styles/$slug.css”;

    if (file_exists(WP_CONTENT_DIR . $location)) {
    printf(
    nn”,
    content_url($location)
    );
    }
    }
    }
    }

    add_action(‘wp_head’, ‘designate_stylesheet’);

    function designate_javascript_library($use_ids = false) {
    global $post;

    if (is_home() && have_posts() || is_single() || is_page()) {
    $custom = get_post_meta($post->ID, ‘javascript_library’, true);

    if ($custom && strlen($custom) > 0) {
    $slug = preg_replace(‘/.js$/’, ”, $custom);
    } elseif ($post->post_name && !$use_ids) {
    $slug = $post->post_name;
    } else {
    $slug = ‘post-javascript-’ . $post->ID;
    }

    if (strlen($slug) > 0) {
    $location = “/post-js/$slug.js”;

    if (file_exists(WP_CONTENT_DIR . $location)) {
    printf(
    nn”,
    content_url($location)
    );
    }
    }
    }
    }

    add_action(‘wp_head’, ‘designate_javascript_library’);

    function designate_javascript($use_ids = false) {
    global $post;

    if (is_home() && have_posts() || is_single() || is_page()) {
    $custom = get_post_meta($post->ID, ‘javascript’, true);

    if ($custom && strlen($custom) > 0) {
    $slug = preg_replace(‘/.js$/’, ”, $custom);
    } elseif ($post->post_name && !$use_ids) {
    $slug = $post->post_name;
    } else {
    $slug = ‘post-javascript-’ . $post->ID;
    }

    if (strlen($slug) > 0) {
    $location = “/post-js/$slug.js”;

    if (file_exists(WP_CONTENT_DIR . $location)) {
    printf(
    nn”,
    content_url($location)
    );
    }
    }
    }
    }

    add_action(‘wp_head’, ‘designate_javascript’);

    function designate_typekit($use_ids = false) {
    global $post;

    if (is_home() && have_posts() || is_single() || is_page()) {
    $custom = get_post_meta($post->ID, ‘typekit’, true);
    if ($custom && strlen($custom) > 0) {
    printf(

    nn”
    );
    }
    }
    }

    add_action(‘wp_head’, ‘designate_typekit’);

    ?>

    Hope that helps.

    # January 18, 2010 at 9:59 am

    that actually helps a lot.

    here’s what’s happening though. on single pages, i see next/previous. and on the front page, i see a previous link but instead of saying previous, it still has the title of the previous post. any ideas?

    thanks again for the help.

    # January 19, 2010 at 10:04 am

    Ah yeah, okay. You need to alter the recent-post plugin.

    Code:
    $output .= $before . ‘‘ . htmlspecialchars(Previous) . ‘‘;

    This line I have just changed to ‘Previous’ instead of the post title. "htmlspecialchars(Previous)"

    # January 20, 2010 at 7:15 pm

    very nice. thank you very much!

    # March 11, 2010 at 12:55 pm

    Thanks again, for all the help.

    I just wanted to let you know that, thanks to this site, I’ve been able to implement the next prev w/o the plugin. The link was originally on digwp but the answer for how to implement is here: http://jackosborne.co.uk/articles/wordpress-next-and-previous-post-link-on-index-php/. Just thought you might be interested in deactivating a plugin. I try to keep mine to a minimum.

    And, thanks again for the help implementing per-post js. It’s been dramatically helpful.

    The code I’m now using, for the main header is:

    Code:

    and for header-single, it’s

    Code:
    • < ?php previous_post_link('%link','previous') ?>
    • < ?php next_post_link('%link','next') ?>

    Cheers.

    DsD

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".