Wanted to Share: Custom Homepage Wordpress Mod
Hi,
I am working on a Wordpress theme and on the home page, I want the excerpt of one post the full content area width, and then the excerpt of two additional posts in columns below. This is easy to do in Joomla, but a little tricky in Wordpress.
I have an options panel for the theme where the ID for each of the posts can be specified.
Options panel code
Add to your functions.php file.
Template Code
Put this in whatever template file you want to use it on. I created a home.php template, but you could use it in index.php with a conditional tag as well.
Three loops are used on the page. Remember to replace "shortcode" with whatever the short code for your theme is.
First post display. Add this where ever you have your main loop.
Third Post
At the beginning of the second and third loops, the query is moved to a temporary query and a new one starts.
The one thing with this is that it has to be a post, not a page. If you want one of the sections to display a page, replace the 'p= with 'page_id=.
Add the post ID in the admin area, style the divisions to match your theme, and you're set!
I am working on a Wordpress theme and on the home page, I want the excerpt of one post the full content area width, and then the excerpt of two additional posts in columns below. This is easy to do in Joomla, but a little tricky in Wordpress.
I have an options panel for the theme where the ID for each of the posts can be specified.
Options panel code
Add to your functions.php file.
Code:
/* theme control panel */
$themename = "theme name";
$shortname = "theme";
$categories = get_categories('hide_empty=0&orderby=name');
$wp_cats = array();
foreach ($categories as $category_list ) {
$wp_cats[$category_list->cat_ID] = $category_list->cat_name;
}
array_unshift($wp_cats, "Choose a category");
$template_path = get_bloginfo('template_directory');
$options = array (
array( "name" => "Front Page Settings",
"type" => "heading"),
array( "type" => "open"),
array( "name" => "Main Post/Page ID",
"desc" => 'Enter the post id for the main excerpt post to display on the home page',
"id" => $shortname."_mainpost",
"std" => "",
"type" => "text"),
array( "name" => "Spotlight 1",
"desc" => 'Enter the post id to display in the first spotlight area on main page',
"id" => $shortname."_spotlight1",
"std" => "",
"type" => "text"),
array( "name" => "Spotlight 2",
"desc" => 'Enter the post id to display in the second spotlight area on the main page',
"id" => $shortname."_spotlight2",
"std" => "",
"type" => "text"),
);
function mytheme_add_admin() {
global $themename, $shortname, $options;
if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }
header("Location: themes.php?page=functions.php&saved=true");
die;
} else if( 'reset' == $_REQUEST['action'] ) {
foreach ($options as $value) {
delete_option( $value['id'] ); }
header("Location: themes.php?page=functions.php&reset=true");
die;
}
}
add_theme_page($themename." Options", $themename ." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}
function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
function option_wrapper_header($values){
?>
<tr>
<th align="left" width="150" scope="row"><?php echo $values['name']; ?>:</th>
<td>
<?php
}
function option_wrapper_footer($values){
?>
</td>
</tr>
<tr valign="top">
<td> </td><td width="195" style="padding: 10px 5px 20px 5px;"><small><?php echo $values['desc']; ?></small></td>
</tr>
<?php
}
?>
<div class="wrap">
<h2><?php echo $themename; ?> settings</h2>
<form method="post">
<table class="optiontable">
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
case 'text':
option_wrapper_header($value);
?>
<input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" />
<?php
option_wrapper_footer($value);
break;
case 'select':
option_wrapper_header($value);
?>
<select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
<option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option>
<?php } ?>
</select>
<?php
option_wrapper_footer($value);
break;
case 'textarea':
$ta_options = $value['options'];
option_wrapper_header($value);
?>
<textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" cols="<?php echo $ta_options['cols']; ?>" rows="<?php echo $ta_options['rows']; ?>"><?php
if( get_settings($value['id']) != "") {
echo get_settings($value['id']);
}else{
echo $value['std'];
}?></textarea>
<?php
option_wrapper_footer($value);
break;
case "radio":
option_wrapper_header($value);
foreach ($value['options'] as $key=>$option) {
$radio_setting = get_settings($value['id']);
if($radio_setting != ''){
if ($key == get_settings($value['id']) ) {
$checked = "checked=\"checked\"";
} else {
$checked = "";
}
}else{
if($key == $value['std']){
$checked = "checked=\"checked\"";
}else{
$checked = "";
}
}?>
<input type="radio" name="<?php echo $value['id']; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><?php echo $option; ?><br />
<?php
}
option_wrapper_footer($value);
break;
case "checkbox":
option_wrapper_header($value);
if(get_settings($value['id'])){
$checked = "checked=\"checked\"";
}else{
$checked = "";
}
?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
<?php
option_wrapper_footer($value);
break;
case "multicheck":
option_wrapper_header($value);
foreach ($value['options'] as $key=>$option) {
$pn_key = $value['id'] . '_' . $key;
$checkbox_setting = get_settings($pn_key);
if($checkbox_setting != ''){
if (get_settings($pn_key) ) {
$checked = "checked=\"checked\"";
} else {
$checked = "";
}
}else{
if($key == $value['std']){
$checked = "checked=\"checked\"";
}else{
$checked = "";
}
}?>
<input type="checkbox" name="<?php echo $pn_key; ?>" id="<?php echo $pn_key; ?>" value="true" <?php echo $checked; ?> /><label for="<?php echo $pn_key; ?>"><?php echo $option; ?></label><br />
<?php
}
option_wrapper_footer($value);
break;
case "heading":
?>
<tr valign="top">
<td colspan="2"><h3 style="text-transform:uppercase;font-size: 18px;padding-bottom: 5px;border-bottom: 1px dotted #a2a2a2"><?php echo $value['name']; ?>:</h3></td>
</tr>
<?php
break;
default:
break;
}
}
?>
</table>
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<?php
}
add_action('admin_menu', 'mytheme_add_admin');?> Put this in whatever template file you want to use it on. I created a home.php template, but you could use it in index.php with a conditional tag as well.
Three loops are used on the page. Remember to replace "shortcode" with whatever the short code for your theme is.
First post display. Add this where ever you have your main loop.
Code:
<?php
// retrieve one post with an ID
$mainpost = get_option('shortcode_mainpost');
query_posts('p= '. $mainpost .'');
global $more;
// set $more to 0 in order to only get the first part of the post
$more = 0;
// the Loop
while (have_posts()) : the_post();
?> Code:
<?php
// retrieve spotlight1
$temp_query = clone $wp_query;
$spotlight1 = get_option('shortcode_spotlight1');
//query_posts('p= '. $spotlight1 .'');
query_posts('p=3');
global $more;
// set $more to 0 in order to only get the first part of the post
$more = 0;
// the Loop
while (have_posts()) : the_post();
?>
<div id="spotlight1">
<?php the_content('Read more »'); ?>
</div>
<?php endwhile; ?>
<?php $wp_query = clone $temp_query; ?> Code:
<?php
// retrieve spotlight2
$temp_query = clone $wp_query;
$spotlight2 = get_option('shortcode_spotlight2');
query_posts('p= '. $spotlight2 .'');
global $more;
// set $more to 0 in order to only get the first part of the post
$more = 0;
// the Loop
while (have_posts()) : the_post();
?>
<div id="spotlight2">
<?php the_content('Read more »'); ?>
</div>
<?php endwhile; ?>
<?php $wp_query = clone $temp_query; ?> The one thing with this is that it has to be a post, not a page. If you want one of the sections to display a page, replace the 'p= with 'page_id=.
Add the post ID in the admin area, style the divisions to match your theme, and you're set!