Investica Part Two

In part one we added two sizes of thumbnail image to our theme, if we look at the Investica Template we can see that there are posts in two columns with a wide image, in part two we will create the two column layout and set the wide image.

This will require two new files, the first will be home.php that will become the landing page for our website, the second will be content-home.php this will be the loop for our two column display and get our new thumbnail by passing an argument to the Artisteer thumbnail function.

Home.php

There is a lot of confusion around the home page of a WordPress blog, quite often the answer is to create a template page, create a new page, apply the template and set the home page from Admin > Settings > Reading, that is ok if the theme is being managed by the theme’s author.

Download Lesson 2 Files: Investica Part Two (856) lesson 1 are also files required

We want to control the content on the homepage, as we will be adding new sections later, first thing we want to do is recreate the two column layout with the wide image, we will use the WordPress Template Hierarchy.

If we read and understand this we will see that WordPress will load a file called home.php first, if it cannot find home.php then it will load index.php unless this has been overridden in the settings.

To create home.php we open index.php and save this in the main theme directory as home.php lets do that now and then open our new home.php and add a counter and a clear <div> for our two column display.

At line 14 we can see a comment line /* Start the Loop */ we will add and set our counter to zero before this line so we have the following lines

/* Start the Counter */
$counter=0;
/* Start the Loop */

A few lines down under the_post(); we can see a line

get_template_part(‘content’, get_post_format());

The line gets the file called content.php, content-gallery.php or content-asides.php we want it to return a new file called content-home.php,  so we change this line to.

get_template_part('content', 'home');

So we now have the following lines:

/* Start the Counter */
$counter=0;
/* Start the Loop */
while (have_posts()) {
    the_post();
    get_template_part('content', 'home');
}

One more change in our home.php for now is to add a line to clear after each pair of posts, this is where our counter comes into play, the first line increments our counter the second is a modulus condition returns true or false if the counter is divisible by two with no remainder.

//Increment our counter and clear the float after column right
$counter++;
if (!$counter % 2){
    <div class="cleared"/>
}

Our block of code now looks like this lines 14 to 30, that is it for our home.php save and close the file.

/* Start the Counter */
$counter=0;
/* Start the Loop */
while (have_posts()) {
   the_post();
   get_template_part('content', 'home');
}
//Increment our counter and clear the float after column right
$counter++;
if (!$counter % 2){
<div class="cleared"/>
}

content-home.php

To create content-home.php we open content.php and save this in the main theme directory as content-home.php lets do that now and then open our new file and add in a <div> element for our two post columns.

We add the first six lines, before the existing <?php tag, this is the opening html tag with the two-column class, and a variable array to hold the image width and height.

In the array line ‘thumbnail’ this returns the path to the thumbnail we add he $args between the parentheses, this passes the width and height to the Artisteer function overriding the default sizes, then the last line is where we add our closing </div>

<div>
<?php
/* set the thumbnail size */
$args = array('size' => array(250,170) );
?>

<?php
 global $post;
 theme_post_wrapper(
  array(
    'id' => theme_get_post_id(),
    'class' => theme_get_post_class(),
    'thumbnail' => theme_get_post_thumbnail($args), //Large Thumbnail
    'title' => '<a href="' . get_permalink( $post->ID ) . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a>',
    'before' => theme_get_metadata_icons( '', 'header' ),
    'content' => theme_get_excerpt(),
    'after' => theme_get_metadata_icons( '', 'footer' )
  )
 );
?>
</div>

inv-style.css

Last part in this section is to set the style for the two columns, remember in part one we added two file links in the functions.php, now we create the second file, in the folder /library/ we create a new file called inv-style.css

Adding in a style bolck for our two-column class.

.two-column {
  float: left;
  width: 50%;
}

lesson-2-1

That is all for part two, we hope you can follow the examples, please register and leave any feedback over on our supporters page, this is little used and we would love to hear from you.

In the next part we will be styling these two column posts moving the title above the images and turning the continue reading into a button.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Artisteer

googlefonts11.png

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we … Continue reading

Read More

Posted in Investica

lesson-1-thumb

This is the first in a series of posts and code tutorials we are running in April 2011, these are Artisteer based and there has been a slight delay, as a new version of Artisteer was released on the 4th … Continue reading

Read More