24

How to replace X-Theme index pages using “The Grid” Plugin

I originally posted this question on the X-theme support forum, but it was stated to be a 3rd party customization request that was outside the scope of support, so I was unable to get an immediate solution.

Through discussions with ‘the grids’ support, I was able to find a solution which I have documented below as a tutorial. I hope this helps others implement this commonly requested customization.

Proudly Featured On

X Theme Users Tutorials

Overview

Theme: X-theme

Stack: This will work with All Stacks but some extra CSS might be needed depending on the situation. For reference, this tutorial was written when I used the “Ethos” stack.

X Theme Extension discussed: β€œThe Grid” ( not to be confused with the other plugin named “Essential Grid”)

Context: Many people want to replace the default X theme archive and category pages with a custom page.

Problem: WordPress calls a blog’s archive, search, and category pages using the index file, which you can’t customize through the dashboard like you would when creating a regular page.

Solution: The only solution, is a custom one. Below, I have a tutorial on how to create a custom archive, search, and index page using a custom grid, from “The Grid” plugin, for each of those pages.

Steps to locate the correct folder

1
Log in through FTP
2
Click x-child
3
Click Framework
4
Click Views
5
Click Global

Now lets create the correct file

6
Now open a text editor and add the following code:

<?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 ( $condition ) {

	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()) {
		
		$index_grid   = get_page_by_title(html_entity_decode('Index Grid'), 'OBJECT', 'the_grid');
		$archive_grid = get_page_by_title(html_entity_decode('Archive Grid'), 'OBJECT', 'the_grid');
		$search_grid  = get_page_by_title(html_entity_decode('Search Grid'), 'OBJECT', 'the_grid');
		
		if ($index_grid && (is_home() || is_front_page())) {
			
			The_Grid('Index Grid', true);
			
		} else if ($archive_grid && is_archive()) {
			
			The_Grid('Archive Grid', true);
			
		} else if ($search_grid && is_search()) {
			
			The_Grid('Search Grid', true);
			
		} else {
		
			while (have_posts()) { 
				the_post();
				if ( $stack != 'ethos' ) {
					x_get_view( $stack, 'content', get_post_format() );
				} else {
					x_ethos_entry_cover( 'main-content' );	
				}
			}
			
		}
		
	} else {
		
	  	x_get_view( 'global', '_content-none' );
		
	}
	
	?>
	</div>
	<?php
	
} else {

	if ( have_posts() ) {
		
		$index_grid   = get_page_by_title(html_entity_decode('Index Grid'), 'OBJECT', 'the_grid');
		$archive_grid = get_page_by_title(html_entity_decode('Archive Grid'), 'OBJECT', 'the_grid');
		$search_grid  = get_page_by_title(html_entity_decode('Search Grid'), 'OBJECT', 'the_grid');
		
		if ($index_grid && (is_home() || is_front_page())) {
			
			The_Grid('Index Grid', true);
			
		} else if ($archive_grid && is_archive()) {
			
			The_Grid('Archive Grid', true);
			
		} else if ($search_grid && is_search()) {
			
			The_Grid('Search Grid', true);
			
		} else {
		
			while (have_posts()) {
				the_post();
				x_get_view( $stack, 'content', get_post_format() );
			}
		}
		
	} else {
		
    	x_get_view( 'global', '_content-none' );
		
	}

}

if (!is_home() && !is_front_page() && !is_archive()) {
	pagenavi();
}

?>

IF you are NOT using the Ethos Stack
Since I am using the “Ethos” stack, this PHP code above has the name “ethos” used in some areas of this code. If you are using a different stack, you will have to find where the stack name “ethos” is used in this code block, and replace “ethos” with the name of the stack you are using.
7
Save this file as _index.php
8
Drag and drop this file into the Global folder we located in the beginning steps.

Parts of the code explained

After the code above is added and all steps are complete, all you need to do is make the three grids you want to use, using “The Grid” plugin. You MUST use the EXACT following names as the names for the new grids for this to work:

Index : “Index Grid”
Archive : “Archive Grid”
Search : “Search Grid”

That is it, you have done it! Now you have made three grids to replace the default pages for the index, archive, and search pages.

if you are using the icon stack or the integrity stack

If you are using the icon stack or the integrity stack, then add the following CSS code below, to your child theme CSS file.

We add this code because the grids are present on your pages, but the main container of your page will have a height of 0 and all content inside is hidden. So this fixes it and lets your new grids show:


#x-iso-container {
    height: auto !important;
}

24
Leave a Reply

avatar
newest oldest
Lisa
Guest
Lisa

Hi there! Hoping you can help with this. For some reason, the Grid is loading plus the Xtheme default is loading so there are 2 sets of preloaders. The grid loads to full width and then when the Xtheme finishes loading it forces the grid into a fixed center width. Any help would be so appreciated! Thank you!!

Enes
Guest
Enes

You’re a true MVP! I was looking for this for hours!! Thanks

Lisa
Guest
Lisa

Hi Ian, I’ve followed your instructions for Integrity stack, but it doesn’t seem to be working. Is it possible something has changed since you wrote this article?

Lisa
Guest
Lisa

Just figured it out, its working perfectly thank you πŸ™‚

Robin
Guest
Robin

Hi Ian, Does this method works on PRO?

Aaron
Guest
Aaron

Just FYI if you are using the Renew stack I could only make it work if I entered the CSS changes in the global CSS editor in appearance customization

Philip Young
Guest
Philip Young

Hi we would be grateful of your support on setting up our archive template. We have following through your tutorial but we are not getting a result just code.
Blog posts URL: http://www.johnbarilaro.com.au/electorate-news-build-blocks
Archive URL: http://johnbarilaro.com.au/2017/10/

Donald
Guest
Donald

I am unable to get the shop archive page to use the grid i have setup using this code above.

Arpit Bajpai
Guest
Arpit Bajpai

This is what i was looking for a long time. Thanks a lot for this. But I have a question. I have a blog with categories and sub-categories. Is there a way of applying filters in such a way that say Category Articles have subcategories news and reviews and Category Projects has subcategory computers and Drones. So when I open articles Category page only filters of news and reviews are shown?

Tiffany
Guest
Tiffany

This is brilliant! Thank you for this tutorial, it worked perfectly and saved me a lot of frustration!
Side note: The extra CSS code also must be used with the integrity stack.