Is it possible to change the appearance of the Archive pages in Ethos

[Cure123]

Hi,
I’m playing around with the styling of my pages. I have the Ethos stack. I was going to display my news posts by way of an essential grid (and maybe that’s my best option still although it will mess up the permalink somewhat). I thought a simpler solution is to use categories and direct the news page to the category archive. But it’s just not that visually appealing. I couldn’t find a post relating to this under support but someone had asked whether they. could achieve this http://demo.theme.co/agency/news/ in the past which is I guess a bit nicer looking than what I have now. I think part of the problem with the appearance is I don’t have any excerpts and are using a full width page layout. But I don’t want to use an except because it doesn’t suit the other category I’m using.
Is there an easy way to customise the archive page to make it look better or am I best to use essential grid?
Thanks

[rad]

Hi Jane,

Thanks for reaching out.

Sure, it’s doable, please check this https://www.themepunch.com/faq/auto-populate-grid-for-blog-pages-with-the-loop-advanced/

Though, it’s a generic one assuming the template uses the same codes. So please follow this

1. Please check this thread about child theme and FTP https://theme.co/apex/forum/t/how-to-upload-xtheme-to-child-theme/43246/2, and about how to copy the template file.

2. Copy the file \framework\views\global\_index.php from your main theme into your child theme. Eg. \x-child\framework\views\global\_index.php (it could be /x-child/ or /pro-child/)

3. Then based on the documentation provided for the essential grid, the code of _index.php in your child theme should look similar to this

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( is_archive() && have_posts() ) : ?>

<?php

 // Start the loop.
 $my_post_array = array();
 while ( have_posts() ) : the_post();
 
 /*
 * populate array with all queried post IDs
 */
 $my_post_array[] = $post->ID;
 
 // End the loop.
 endwhile;


echo do_shortcode( '[ess_grid alias="even_grid_adams" posts='.implode(',', $my_post_array).']' );

 ?>


<? else : ?>

          <?php if ( $condition ) : ?>

            <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

            <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

              <?php if ( have_posts() ) : ?>
                <?php while ( have_posts() ) : the_post(); ?>
                  <?php if ( $stack != 'ethos' ) : ?>
                    <?php x_get_view( $stack, 'content', get_post_format() ); ?>
                  <?php else : ?>
                    <?php x_ethos_entry_cover( 'main-content' ); ?>
                  <?php endif; ?>
                <?php endwhile; ?>
              <?php else : ?>
                <?php x_get_view( 'global', '_content-none' ); ?>
              <?php endif; ?>

            </div>

          <?php else : ?>

            <?php if ( have_posts() ) : ?>
              <?php while ( have_posts() ) : the_post(); ?>
                <?php x_get_view( $stack, 'content', get_post_format() ); ?>
              <?php endwhile; ?>
            <?php else : ?>
              <?php x_get_view( 'global', '_content-none' ); ?>
            <?php endif; ?>

          <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

4. Save and upload your child theme’s _index.php.

But make sure to change the line [ess_grid alias="even_grid_adams" ..... with your created Essential Grid’s alias.

This custom code may not work un the future but you’re free to maintain and enhance it, but we can’t provide support on any given snippet or code. This should serve just as an idea on how to achieve it.

Thanks!

[Cure123]

Great thanks for that Rad! Worth considering. Just out of interest are there any ways to change the blog archive layout already inbuilt into Pro?

[ruenel]

Hello Jane,

You can do the same in Pro theme. Just make sure that you have the Pro child theme installed and do the same steps. If you meant that whether you can customize the default archive page Pro theme using the editor, the answer is no. At the moment, there is no way you can edit the archives pages using the Cornerstone, Pro editor or even the default WordPress editor.

Hope this explains it briefly.