Change blog archive layout

[Clanton]

Hi there,

We want to change our blog post archive page to a 2 or 3 col per row layout.

The col layout would be:
Thumbnail
Headline
post snippet

and the thumbnails are top-aligned

Our blog archive page right now is this https://precisemgmt.net/blog/

X-theme usong ICON stack

The options in Theme options wouldn’t give us the layout we prefer.

Please help!

[ruenel]

Hello William,

Thanks for writing in!

Do you want something like this?

If that is the case, since you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

$stack                     = x_get_stack();
$is_full_post_content_blog = is_home() && x_get_option( 'x_blog_enable_full_post_content' ) == '1';

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">

      <?php if ( is_singular() || $is_full_post_content_blog ) : ?>

        <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
        <?php if ( has_post_thumbnail() ) : ?>
        <div class="entry-featured">
          <?php x_featured_image(); ?>
        </div>
        <?php endif; ?>
        <?php x_get_view( 'global', '_content' ); ?>

      <?php else : ?>

        <?php if ( has_post_thumbnail() ) : ?>
        <div class="entry-featured mtn mbm">
          <?php x_featured_image(); ?>
        </div>
        <?php endif; ?>
        <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
        <?php x_get_view( 'global', '_content' ); ?>

      <?php endif; ?>

    </div>
  </div>
</article>

3] Save the file named as content.php
4] Upload this file to your server in the child theme’s folder /wp-content/themes/x-child/framework/views/icon/

You will have to create the folder path because it does not exist yet in your child theme.

Kindly let us know how it goes.

[Clanton]

Thank you for your quick reply!

after uploading to /wp-content/themes/x-child/framework/views/icon/-- do we need to activate this somewhere in Theme Options? Or does the changes take effect automatically?

[friech]

Hi William,

It does take effect automatically, but make sure your child theme is the one that is active in Appearance > Themes

Thanks,

[Clanton]

Thank you! It works and it didn’t break the site. I’m definitely going to keep on using themes from Themeco for future projects because of your amazing support!

[friech]

Your satisfaction is a great compliment for us.

Have a nice weekend,
Cheers!