[Solved] WordPress Single Full Post On Front Page

[DeathStarDarth]

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

[DeathStarDarth]

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:

“>Title:

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

[Luminated]

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?

[DeathStarDarth]

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:

ID, “customStyles”, true);
if (!empty($customStyles)) { ?>

#69577

olliekav

Member

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:

id=”post-“>

Sorry, no posts matched your criteria.

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.

#69542

DeathStarDarth

Member

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.

#69594

olliekav

Member

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:

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.

#69599

DeathStarDarth

Member

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.

#69639

olliekav

Member

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)"

#69715

DeathStarDarth

Member

very nice. thank you very much!

#72224

DeathStarDarth

Member

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:

• ” rel=”prev”>previous

and for header-single, it’s

Code:

Cheers.

DsD

[olliekav]

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:

id=”post-“>

Sorry, no posts matched your criteria.

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.

[DeathStarDarth]

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.

[olliekav]

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:

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.

[DeathStarDarth]

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.

[olliekav]

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)"

[DeathStarDarth]

very nice. thank you very much!

[DeathStarDarth]

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:

• ” rel=”prev”>previous

and for header-single, it’s

Code:

Cheers.

DsD

[Author]

Posts