Add the Salvattore Masonry Layout to a WordPress Post Category page

Building a single page theme with WordPress and Bootstrap 

Exercise 4 Part 2

Resources

salvattore.zip contains the example files for this exercise.

BooThemeV03 is used as the starter template for this exercise.

BooTheme V04 is the completed example.

To get all the theme examples  and related files, visit the wordpress resources page.

Salvattore is a simple, low weight masonry layout library that does what it says on the tin. Easy to configure and integrate.ljk

Go to salvattore.com for documentation and the code from github.

Note : Salvattore must be copied to a web host or your mamp install to work!!

Create a new Category

In this exercise, links in the ‘events’ section of the example site will link to a new layout template, which will display a listing of all the events scheduled at the festival. Information for each event is stored as a Post item and contains a title, content text and a featured image.  All the posts are assigned to a specific category.

Create a new category and remeber the category slug.

new creative sessions category 

Create Posts

Create around 5 – 10 post items, each with a featured image and linked to the new category.

new post with a featured image. 

Create a new category.php template file

Add a new php file to the Bootheme folder named category.php. NOTE : ensure category.php is located in the booThemev03 folder,  do not put category.php in the booThemev03/template_parts/ folder.

Add the following code :

<?php get_header(); ?>

CATEGORY.php

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

      <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );?> ">

      <h4><?php the_title()?></h4>
      <p><?php the_content(); ?></p>
    
   <?php endwhile;endif; ?>

<!-- Footer -->
<?php get_footer(); ?>

category.php

Create a link to the  category.php template in frontpage_events_posts.php

Add the following link to the events section of front-page.php. This link will call the category.php template and display all posts in the creativesessions category.

<a href=" <?php echo esc_url( get_category_link( get_cat_ID('CreativeSessions'))); ?> " > TEST LINK </a>

The new link will appear in the events section of the site

Clicking the link will load the posts using the category.php template.

Copy salvattore.js and salvattore.css  to  theme folder

Copy salvattore.js  to the js folder and salvattore.css  to the css folder

Add links to salvattore.js and salvattore.css

Open setup.php located in the functions folder. Add the following code to the enques section as shown.

add the code to link salvattore.css file in the first highlighted line :

wp_enqueue_style('salvatore-css', get_template_directory_uri() . '/css/salvattore.css', false, '1.0.9', null);

add the code to link salvattore.js  in the second highlighted line :

wp_enqueue_script('salvattore-js', get_template_directory_uri() . '/js/salvattore.js', false, null, true);

Add grid elements to category.php

Open category.php. Add the following code to page as shown. This will activate the salvattore grid.

Salvattore grid in action..