Florence - A Responsive WordPress Blog Theme

Please note: This FAQ article is specifically for the Florence 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 the steps below.

First, you'll want to install the code editor plugin called WPide (http://wordpress.org/plugins/wpide) which will allow you to access the necessary theme files in order to edit them. 

Once WPide is installed and activated, you can navigate to WP Dashboard > WPide > themes > florence.

Open up the "index.php" theme file. On Line 11, you'll see this following line of code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Immediately BELOW this line of code (on the blank Line 12), copy & paste the following:

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

Then, on what is now Line 21, you will see this code:

<?php endif; ?>

On the blank line directly below this code, copy & paste the following code.
It is exactly the same as the previously noted code, so you will have this bit of code listed twice-- once on Line 21 and again on Line 22:

<?php endif; ?>

The big block of code beginning on Line 11 and ending on Line 22 should now look like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
        <?php get_template_part('content'); ?>
    <?php else : ?>        
    <?php if(get_theme_mod('sp_home_layout') == 'grid' || get_theme_mod('sp_home_layout') == 'grid-full') : ?>
        <?php get_template_part('content', 'grid'); ?>
    <?php elseif(get_theme_mod('sp_home_layout') == 'list' || get_theme_mod('sp_home_layout') == 'list-full') : ?>    
        <?php get_template_part('content', 'list'); ?>
    <?php else : ?>
        <?php get_template_part('content'); ?>
    <?php endif; ?>
    <?php endif; ?>

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

Next, navigate to Appearance > Customize > Custom CSS box > and paste in this code:

.grid-layout {
 display:grid;
 grid-template-columns:1fr 1fr;
 grid-gap:30px;
}
.grid-layout li {
 margin:0;
}
.grid-layout article:first-child {
 grid-column: 1 / -1;
}
@media only screen and (max-width: 767px) {
 .grid-layout {
 grid-template-columns:1fr;
 }
 .fullwidth .grid-layout li, .regular .grid-layout li {
 width:100% !important;
 }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
 .grid-layout {
 grid-template-columns:1fr 1fr;
 }
 .fullwidth .grid-layout li, .regular .grid-layout li {
 width:100% !important;
 }
}

Save changes. 

Lastly, go to Appearance > Customize > General Settings and ensure your homepage layout is set to one of the"grid layout" options.

And voila! You're all set.