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.
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();
}
?>
Note - 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.
Continued
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;
}
