31

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.

Note
Before starting this tutorial, you first need to install the X-Child Theme.

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;
}

guest
31 Comments
newest
oldest
Inline Feedbacks
View all comments
Jen
Jen
6 months ago

Is there a way to add heading text to these pages? I’d like some indication of what page they are on. I’d also like to adjust the page margins and size of photos, but can’t figure out how to do that within The Grid itself. Any help is greatly appreciated!

Johnathan
Johnathan
9 months ago

Hi, changing the skin of The Grid doesn’t work, it’s only showing the default skin “Brasilia”. How can I make it show using different skin?

Johnathan
Johnathan
9 months ago
Reply to  Johnathan

and also the Filter and Pagination of the grid doesn’t show up at all

Alex
Alex
1 year ago

Hi, maybe you should include to Install the X-Child Theme first. Thanks for your tutorial.

Yashwant
Yashwant
1 year ago

How to do it work for custom post type archive page ?

Lisa
Lisa
1 year ago

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
Enes
1 year ago

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

Lisa
Lisa
2 years ago

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
Lisa
2 years ago
Reply to  Lisa

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

Robin
Robin
2 years ago

Hi Ian, Does this method works on PRO?

Aaron
Aaron
2 years ago

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
Philip Young
2 years ago

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/

Phil
Phil
2 years ago
Reply to  Ian

Hi Ian
Yes I deleted your code and I reached out to the user group and got some help I am not sure if they used a similar approach to yours but we achieved the result we were after thanks for your reply

Donald
Donald
2 years ago

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

Arpit Bajpai
Arpit Bajpai
3 years ago

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?

Arpit Bajpai
Arpit Bajpai
3 years ago
Reply to  Ian

Thanks a Lot Ian. appreciate your help very much.

Tiffany
Tiffany
3 years ago

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.

Tiffany
Tiffany
3 years ago
Reply to  Ian

I actually followed the instructions for the first solution because I didn’t want to create three grids and it was simpler πŸ™‚