Subpages in isotope/masonry layout instead of blog articles

What is a subpage?
If you have questions about theme or plugin, you need to ask in that theme or plugin’s support forum, so those that write it or use it can help you.

Masonry works with any structured elements which utilize the same CSS selector. Naturally category requests return posts in that category, but you can alter the query run to return any group of objects in the DB. As long as the output remains structured with the same CSS selector, masonry will do its thing on the content.

Queries can be altered through the pre_get_posts action.

@joyously Many thanks for your answer. As I am not sure whether to modify the theme, plugin or CSS I tried this forum …

As a subpage I would call a page that is subordinate to another page. Maybe child page and parent page could be the same relation.

@bcworkz Thanks for your solution. Would you mind going a bit more into detail? As I wrote I am an entire rookie and do not know what to do now … :o/ Sorry for that.

Where do I have to work on now? pre_get_posts in the CSS file? What do I have to alter? Do I have to overwrite any code?

• This reply was modified 5 years, 11 months ago by sbstnbecker.

You will want to create a child theme so that your custom work is protected when Baskerville is updated.

My pre_get_posts suggestion might have been premature. What sort of URL would be used to access these sub-pages? The parent page perhaps? Pages in a particular category? (Pages do not have categories by default, but that can be changed) My one hesitation with a parent page request is I’m not sure if your theme will apply the masonry layout to the results. It can be made to do so no matter what, but it could take a little more work.

While you are waiting for my next response, go ahead and create a child theme, you will need this no matter what. When you activate a basic child theme, your site will not appear or behave any differently until more custom code is added.

Sorry for my late reply. I was some days off in Easter holidays …
Thanks for your answer.

I just installed the child theme of Baskerville 2.

This page should be an overview gallery of all concerned 86 outlying territories:
/gebiete/

For each territory there should be a separate page with the masonry information, e. g. for the US Virgin Islands:
/gebiete/amerikanische-jungfern-inseln/

The URLs of all subpages of each outlying territory should contain the parent page URL, e. g.:
/gebiete/amerikanische-jungfern-inseln/allgemeines
/gebiete/amerikanische-jungfern-inseln/iso-codes
etc.

What do I have to do now? :o)

And how can I add categories to (sub-)pages?

Any ideas, @bcworkz

For the categories for pages I am to install another plugin, correct?

But how and where do I tell the parent page to list all its subpages in masonry style like on https://xn--unabhngige-gebiete-ptb.de.dedivirt473.your-server.de/category/amerikanische-jungfern-inseln/?

In order for a page to list child pages, you need a custom page template available for global use. Start with the main theme’s page.php file. Copy it into your child theme’s folder and edit the child version. Give it it’s own unique name that is not a standard template name.

The template has a while loop that displays any content added to the page through the page edit screen. You don’t have to use it, but I’d leave it in place anyway. Below the existing loop add code for a custom WP_Query with its own loop. See the WP_Query Codex page for basic examples.

Your query args will include 'post_type' => 'page', and 'post_parent' => get_the_ID(),

To get a masonry style layout of the output, mimic the same sort of div containers and classes that are used by Baskerville. It looks like the outer div class is “posts-masonry” and individual post div container class is “post-container”. Check Baskerville’s category archive template to confirm if anything else should be included with these principal masonry containers.

If the masonry effect does not occur with these elements, you may need to initialize the masonry script yourself. The documentation for masonry is available. There are some WP specific quirks that depart form the docs though. Primarily, do not directly output a script block to load the .js library. Instead, you need to add code to your child theme’s functions.php that enqueues the library file by calling wp_enqueue_script(). This must be called from a callback added to the action “wp_enqueue_scripts”. The script is already registered as “jquery-masonry”

To initialize masonry, in a <script> block on your page template, output code similar to the docs for jQuery. Except use jQuery('.posts-masonry') in place of $('.grid') and specify '.post-container' as the itemSelector: value.

You don’t need a plugin to associate categories with pages, just add this code to your child’s functions.php:

add_action('init', function(){
  register_taxonomy_for_object_type( 'category', 'page' );
});

Hey @bcworkz ,

Many many thanks for your kind reply! I really appreciate that! ??

Unfortunately, I do not know anything about coding …

Would the correct loop code look like this then? Or do I have to change ?post“ for ?page“ etc?

<?php

$args = array(
‘post_type’ => ‘page’,
‘post_parent’ => get_the_ID()
);

// Custom query.
$query = new WP_Query( $args );

// Check that we have query results.
if ( $query->have_posts() ) {

// Start looping over the query results.
while ( $query->have_posts() ) {

$query->the_post();

// Contents of the queried post results go here.

}

}

// Restore original post data.
wp_reset_postdata();

?>

Thank you very very much for your patience and sorry for my lack of knowledge!!!

That’s a good start. Pages are actually a type of post, so except for the actual ‘post_type’ argument, there’s no need to change other references to “post”. In fact, there are no such equivalent “page” functions like have_pages().

You need a comment identifying your code as a page template, for example, right below the initial <?php, add
/* Template Name: Child List */

This causes the template name to show up in the page attributes meta box on page edit screens. Assign it to pages like amerikanische-jungfern-inseln whose purpose is to list sub pages.

Of course, your template isn’t yet generating output, you need something to replace // Contents of the queried post results go here.

For starters, try this

echo '<div class="post-container">';
  the_title();
  the_excerpt();
echo '</div>';

The result will probably not be styled correctly, but you should at least see child page titles and excerpts.

We also need an overall container for the masonry effect. Between if have posts and while have posts lines, add
echo '<div class="posts-masonry">';

To close out that div, between the two closing } lines add
echo '</div><!-- .posts-masonry -->';

Not knowing the Baskerville theme, I don’t know if that will be enough to get the masonry effect. It could be, but I kind of doubt it. Update the amerikanische-jungfern-inseln page or any page with child pages to use this template. Request the page to see a list of its children. If we’re lucky, the masonry effect will be applied.

If not, let’s check out why. View the page’s source in your browser. Search for jquery.masonry.min.js in the source. If it is not found, we’ll need to enqueue masonry in functions.php.

More later, based on the results of the above. BTW, when you post code in these forums, please demarcate with backticks or use the code button. If you don’t, the code you post becomes corrupted and difficult to use in testing.

Hey,

the code looks like this now:

<?php
/**
 * This template is used for displaying pages.
 *
 * @package Baskerville 2
 */

get_header(); ?>

<div class="wrapper section medium-padding">
	<main class="section-inner clear" role="main">

		<?php
			$content_class = is_active_sidebar( 'sidebar-1' ) ? "fleft" : "center";
		?>
		<div class="content clear <?php echo $content_class; // WPCS: XSS OK. ?>" id="content">

			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

			<?php endwhile; else : ?>
			
			
			<?php
/* Template Name: Child List */ 
$args = array(
‘post_type’ => ‘page’,
‘post_parent’ => get_the_ID()
);
// Custom query.
$query = new WP_Query( $args );
// Check that we have query results.
if ( $query->have_posts() ) {
echo '<div class="posts-masonry">'; 
// Start looping over the query results.
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="post-container">';
  the_title();
  the_excerpt();
echo '</div>';

}
echo '</div><!-- .posts-masonry -->'; 
}
// Restore original post data.
wp_reset_postdata();
?>

			

				<?php get_template_part( 'content', 'none' ); ?>

			<?php endif; ?>

		</div> <!-- /content -->

		<?php get_sidebar(); ?>

	</main> <!-- /section-inner -->
</div> <!-- /wrapper -->

<?php get_footer(); ?>

And I really could find a page template called “Child List”.

Unfortunately, the display of /amerikanische-jungfern-inseln did not change. And I cannot find jquery.masonry.min.js in the source code.
Where can I change the jQuery then?

And how can I get the /amerikanische-jungfern-inseln page in full width for the 3 column masonry display?

You need to move your added code down to between the endif and get_sidebar lines. Where it is currently is within a nothing found portion of if (have posts()):, it’ll never be used there.

It’s customary for the Child List comment to be near the top of the file, like between the first <?php and the /** of the original comment.

About 14 lines down is a line with is_active_sidebar(). Replace that line with
$content_class = 'center';
Also make the get_sidebar() line near the bottom like this:
<?php //get_sidebar(); ?>
The function call is made into a comment so it is disabled, but is easily restored if it turns out to be a mistake to disable it.

To get the jquery-masonry reference to appear, add this to functions.php of your child theme:

add_action('wp_enqueue_scripts', function() {
  wp_enqueue_script('masonry-jquery');
});

Make sure that this doesn’t mess up existing masonry pages. Check your browser javascript console for possible errors after loading an existing masonry page. Also verify that there are not two calls for jquery.masonry.min.js in page source code. If there is any trouble on other pages from this addition, tell me what the Child List template file’s name is so I can isolate when the above code is used.

Finally, add this to just above the get_footer() call near the bottom:

<script>
jQuery('.posts-masonry').masonry({
  // options
  itemSelector: '.post-container',
  columnWidth: '.post-container',
  percentPosition: true
});
</script>

Hey @bcworkz ,

Thank you.

We are coming closer! There are first masonry appearances on https://unabh?ngige-gebiete.de.dedivirt473.your-server.de/gebiete/amerikanische-jungfern-inseln/ ! :o)

– Not styled and no images/sliders/videos/widgets etc.
– But these are the posts and not the pages?!
– And all containers have the same height instead of dynamic height.
– And the masonry passages appear under the social sharing buttons and not above.

Obviously there is no error in the console …

How can I proceed now (to get the Baskerville features)? :o)

• This reply was modified 5 years, 11 months ago by sbstnbecker.

The code is now:

<?php
/* Template Name: Child List */ 

/**
 * This template is used for displaying pages.
 *
 * @package Baskerville 2
 */

get_header(); ?>

<div class="wrapper section medium-padding">
	<main class="section-inner clear" role="main">

		<?php
			$content_class = 'center';
		?>
		<div class="content clear <?php echo $content_class; // WPCS: XSS OK. ?>" id="content">

			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

			<?php endwhile; else : ?>
			
				<?php get_template_part( 'content', 'none' ); ?>

						<?php endif; ?>

<?php
$args = array(
‘post_type’ => ‘page’,
‘post_parent’ => get_the_ID()
);
// Custom query.
$query = new WP_Query( $args );
// Check that we have query results.
if ( $query->have_posts() ) {
echo '<div class="posts-masonry">'; 
// Start looping over the query results.
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="post-container">';
  the_title();
  the_excerpt();
echo '</div>';

}
echo '</div><!-- .posts-masonry -->'; 
}
// Restore original post data.
wp_reset_postdata();
?>

					</div> <!-- /content -->
		
		<?php //get_sidebar(); ?>

			
<script>
jQuery('.posts-masonry').masonry({
  // options
  itemSelector: '.post-container',
  columnWidth: '.post-container',
  percentPosition: true
});
</script>

			
			</main> <!-- /section-inner -->
</div> <!-- /wrapper -->

<?php get_footer(); ?>