Overview
To offer the widest support for WordPress themes, without requiring every theme to explictly support JReviews, JReviews has its own template system.
For example, if a WordPress theme decides it wants to show the featured image above the post title, the only way to change this is with a theme template override. Because every theme has it's own design layouts, it's not possible for JReviews to have settings to control what is shown in each theme. This is why having it's own template system affords JReviews the flexibilty needed for most uses-cases.
Fixing Layout Issues
If JReviews content doesn't fit correctly inside the layout of your site or the sidebar widgets are displaying below the main content on JReviews pages, it's necessary to make some adjustments to add support for the WordPress theme.
There's a couple of ways to do this:
-
Template action hooks
-
Template override
While the implementations are different, they both achieve the same result. Delivering a page that's optimized for JReviews.
In most cases the template override approach will be easier to implement.
Template Action Hooks
The entire output of a JReviews page is encapsulated in a single variable available in WordPress templates as get_query_var('output').
For its own pages, JReviews loads a template override that already includes this variable. You can find it here:
wp-content/
`-- plugins/
`-- jreviews/
`-- jreviews/
`-- cms_compat/
`-- wordpress/
`-- wp-theme/
`-- jreviews.php
The code in this file is quite simple and looks like this:
do_action('jreviews_template:before_content');
echo get_query_var('output');
do_action('jreviews_template:after_content');
So using the two action hooks jreviews_template:before_content and jreviews_template:after_content wraps the output with the necessary HTML markup for the loaded WordPress theme to include the header, footer, sidebar, etc.
You can see examples of how these hooks are used in the theme-support folder inside wp-theme in the above path.
In general you will take the code in the page.php template of your WordPress theme and split it at the the_content(); line, so whatever is above goes in the before_content hook, and whatever is below goes in the after_content hook.
In some themes the content is loaded through the get_template_part WP function, so it may be necessary to also look within that template to find any necessary code that is above and below it to include it in the hooks output.
You can implement the add_action hooks in your theme's functions.php or even create a simple plugin for this purpose.
Template Override
To use the template override approach, you begin with a copy of the page.php template in your WordPress theme and rename it jreviews.php. You can place this file in your WordPress theme, a child theme, or you can also add it to JReviews overrides.
jreviews_overrides/wp-theme/jreviews.php
JReviews will look for the jreviews.php file in the following order:
- Overrides
- Child theme
- Main theme
Lets use an example to go over the override process. Using WordPress' Twenty Nineteen theme, we find the source of the page.php template looks like this (the comments were removed to simplify the code):
<?php
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/page/content', 'page' );
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php
get_footer();
Remove the while loop
The first step is to remove the while loop. The entire JReviews output is contained in the output variable, so it's not needed. the_post function can also be removed. That leaves us with:
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
get_template_part( 'template-parts/page/content', 'page' );
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php
get_footer();
Replace get_template_part
The next step is to add the JReviews output. In this theme the page output is coming from a sub-template that's loaded using the get_template_part function.
The sub-template loaded is template-parts/page/content/content-page.php.
We are not going to change this file directly, but instead, we use the code there, simplify it and then replace the get_template_part line with it.
The sub-template code is:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( ! twentynineteen_can_show_post_thumbnail() ) : ?>
<header class="entry-header">
<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
</header>
<?php endif; ?>
<div class="entry-content">
<?php
the_content();
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<?php if ( get_edit_post_link() ) : ?>
<footer class="entry-footer">
<?php
edit_post_link(
sprintf(
wp_kses(
/* translators: %s: Post title. Only visible to screen readers. */
__( 'Edit <span class="screen-reader-text">%s</span>', 'twentynineteen' ),
array(
'span' => array(
'class' => array(),
),
)
),
get_the_title()
),
'<span class="edit-link">' . twentynineteen_get_icon_svg( 'edit', 16 ),
'</span>'
);
?>
</footer><!-- .entry-footer -->
<?php endif; ?>
</article><!-- #post-<?php the_ID(); ?> -->
There are things there we don't need like the <header> and <footer> sections. Remove those and then replace the_content, which is the standard output of the WordPress page, with the JReviews output get_query_var('output'). The result is:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php echo get_query_var('output'); ?>
</div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->
We then replace that in jreviews.php and the final code is:
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php echo get_query_var('output'); ?>
</div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();
The same logic can be applied to other themes.
Using Different Templates
The JReviews template system offers many ways to load different templates for different pages using theme suffixes. You can learn more about this in the themes section.
Within WordPress itself, you also have the opportunity to assign different WordPress theme templates to specific pages using the Page Attributes → Template setting that appears when creating/updating a WordPress page in the right sidebar.
For example, if you want to use a different WordPress theme template file for the Advanced Search page, create a copy of the jreviews.php file, rename it to jreviews-search.php and at the top of the file enter the template name below the opening <?php tag:
<?php
/* Template Name: Advanced Search */
Then in the page settings, select the Advanced Search template.