Hemlock - A Responsive WordPress Blog Theme

Please note: This FAQ Article is specifically for the Hemlock theme.

If you're interested in having your homepage display the first post in full/standard layout, followed by the rest of the posts displaying in grid layout, you can follow these steps:

STEP 1: 

We recommend installing the code editor plugin called "WPide" (http://wordpress.org/plugins/wpide). Once activated, you can navigate to WP Dashboard > WPide > themes > hemlock > and open up the file titled "index.php". 

On Line 27, you'll see this following line of code:

<?php get_template_part('content', get_theme_mod('sp_home_layout')); ?>

Immediately ABOVE that line of code (on the blank Line 26), copy & paste the following:

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
    <?php get_template_part('content'); ?>
<?php else : ?>

Then, immediately BELOW that initial line of code (on what is now the blank Line 30), copy & paste the following:

<?php endif; ?>

The block of code should now look like this:

    <?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
            <?php get_template_part('content'); ?>
        <?php else : ?>                
        <?php get_template_part('content', get_theme_mod('sp_home_layout')); ?>
    <?php endif; ?>

Be sure to save the changes to "index.php" when finished.

STEP 2: 

Then, navigate to Appearance > Customize > Custom CSS and copy & paste in the following code:

/* -- FULL WIDTH GRID -- */

@media only screen and (min-width: 960px) {
.sp-grid li  {margin-right: 16px !important;}

.sp-grid li:nth-of-type(3n+3) {
margin-right: 0 !important;
}}


@media only screen and (min-width: 480px) and (max-width: 960px) {
.sp-grid li  {margin-right: 16px !important;}

.sp-grid li:nth-of-type(2n+2) {
margin-right: 0 !important;
}}


/* -- SIDEBAR GRID -- */

@media only screen and (min-width: 767px) {
.container.sp_sidebar .sp-grid li {margin-right: 16px !important;}

.container.sp_sidebar .sp-grid li:nth-of-type(2n+2) {
margin-right: 0 !important;
}}

Save changes when finished. 

STEP 3:

Lastly, navigate to Appearance > Customize > General Settings and ensure your Homepage Layout is set to "Grid Layout".