Conceiving the default likeness
Before we do any thing, proceed to the topics folder of your WordPress installation (wp-content/topics/) and make a backup of the "default" folder. This is the Kubrik theme we will be revising. The backup is in case you desire to revert back to the initial, unmodified topic.
First, we’re going to make a default likeness in the happening no boasted mail image is specified. Let’s hold it sugary and easy for this tutorial. Open up your preferred image editor and conceive a 233x130px rectangle with 10px radius circular corners. I made the backdrop a white to grey radial gradient and put some text on peak. This is what I have:
Add the PHP code
Now for the cipher. Open the “header.php” document interior the “default” folder. At the end of the document, you will glimpse a div impede and an hr tag like this:
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
Between the ending div tag and the hr, insert the following code:
<div id="featured">
<ul id="carousel">
<?php
$featured_posts = get_posts('numberposts=3&category=1');
foreach( $featured_posts as $post ) {
$custom_image = get_post_custom_values('featured_image', $post->ID);
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
}
?>
</ul>
<div class="clear"></div>
</div>
Style with CSS
Next we need to add some CSS styles. Open up the “style.css” document and put the following code below at the end of the document. All this does is float the register elements to the left and space them out equally.
/* Featured Post Carousel */
#featured {
padding: 10px 10px 0 20px;
}
#carousel {
list-style: none;
margin: 0;
padding: 0;
}
#carousel li {
float: left;
padding: 0;
margin-right: 10px;
Comprehending the code
Let’s take a look at what the cipher we added does. Inside the canister div (id=”featured”) we have an unordered list and some PHP cipher to develop register elements.
$featured_posts = get_posts('numberposts=3&category=<strong>1</strong>');
The first line shown above retrieves the mail data using the get_mails() function and assigns the mail data to the $featured_posts variable. The get_posts() function excepts a single parameter in the form of a query string similar to what you might glimpse at the end of a URL (sans the primary inquiry mark). The first parameter is “numberposts” which we’ve set to 3 for this tutorial. This parameter sets how numerous boasted posts we will be showing. The second parameter is “category” which we’ve set to 1. The worth of the “category” parameter should be the ID of the category you are utilising for your boasted posts. You can find the ID of a class by going to the class administration sheet and hovering your mouse over a class title. The rank bar will display a link. The last number is the class ID.
The next line is a foreach loop that will loop through the mails we’ve retrieved utilising the get_mails() function. The first line interior the foreach loop retrieves the URL of the image utilising the get_post_custom_values() function and shops the URL in the $custom_image variable. The first parameter identifies the key of the made-to-order value we’re utilising, “featured_image”. The second parameter identifies what post we’re getting the worth from.
$custom_image = get_post_custom_values('featured_image', $post->ID);
In the next line we do a quick check to see if an image was indeed specified. If no image was specified, we assign the $image variable the URL of the default image. If an image was specified, we use that.
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
In the last line we actually output the list elements. Each element is an image that links to the featured post.
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
Creating Featured Posts
That’s it! Now, whenever you want to feature a post, assign it to the featured category and create a custom value with a key of “featured_image” and a value of the image URL. Images should be 233x130px.
Before we do any thing, proceed to the topics folder of your WordPress installation (wp-content/topics/) and make a backup of the "default" folder. This is the Kubrik theme we will be revising. The backup is in case you desire to revert back to the initial, unmodified topic.
First, we’re going to make a default likeness in the happening no boasted mail image is specified. Let’s hold it sugary and easy for this tutorial. Open up your preferred image editor and conceive a 233x130px rectangle with 10px radius circular corners. I made the backdrop a white to grey radial gradient and put some text on peak. This is what I have:
Add the PHP code
Now for the cipher. Open the “header.php” document interior the “default” folder. At the end of the document, you will glimpse a div impede and an hr tag like this:
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
Between the ending div tag and the hr, insert the following code:
<div id="featured">
<ul id="carousel">
<?php
$featured_posts = get_posts('numberposts=3&category=1');
foreach( $featured_posts as $post ) {
$custom_image = get_post_custom_values('featured_image', $post->ID);
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
}
?>
</ul>
<div class="clear"></div>
</div>
Style with CSS
Next we need to add some CSS styles. Open up the “style.css” document and put the following code below at the end of the document. All this does is float the register elements to the left and space them out equally.
/* Featured Post Carousel */
#featured {
padding: 10px 10px 0 20px;
}
#carousel {
list-style: none;
margin: 0;
padding: 0;
}
#carousel li {
float: left;
padding: 0;
margin-right: 10px;
Comprehending the code
Let’s take a look at what the cipher we added does. Inside the canister div (id=”featured”) we have an unordered list and some PHP cipher to develop register elements.
$featured_posts = get_posts('numberposts=3&category=<strong>1</strong>');
The first line shown above retrieves the mail data using the get_mails() function and assigns the mail data to the $featured_posts variable. The get_posts() function excepts a single parameter in the form of a query string similar to what you might glimpse at the end of a URL (sans the primary inquiry mark). The first parameter is “numberposts” which we’ve set to 3 for this tutorial. This parameter sets how numerous boasted posts we will be showing. The second parameter is “category” which we’ve set to 1. The worth of the “category” parameter should be the ID of the category you are utilising for your boasted posts. You can find the ID of a class by going to the class administration sheet and hovering your mouse over a class title. The rank bar will display a link. The last number is the class ID.
The next line is a foreach loop that will loop through the mails we’ve retrieved utilising the get_mails() function. The first line interior the foreach loop retrieves the URL of the image utilising the get_post_custom_values() function and shops the URL in the $custom_image variable. The first parameter identifies the key of the made-to-order value we’re utilising, “featured_image”. The second parameter identifies what post we’re getting the worth from.
$custom_image = get_post_custom_values('featured_image', $post->ID);
In the next line we do a quick check to see if an image was indeed specified. If no image was specified, we assign the $image variable the URL of the default image. If an image was specified, we use that.
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
In the last line we actually output the list elements. Each element is an image that links to the featured post.
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
Creating Featured Posts
That’s it! Now, whenever you want to feature a post, assign it to the featured category and create a custom value with a key of “featured_image” and a value of the image URL. Images should be 233x130px.
