How To Add Blueprint Page to Your Genesis Theme

If you're sick of creating must have plugins list or answering hundreds questions about plugins used on your website, you must create blueprints page.

Blueprint page is like an x-ray photo of your blog. It's also quite good page to promote your favorite products. Check those two examples of well designed blueprint page.

WPBeginnerBlueprint-Must-Have-WordPress-Plugins-and-Tools WPKube-s-Blueprint

All right then, let's do some coding.

 

Get Genesis Framework

I will explain each of the following steps in detail:

  1. Add the toolbox code to your Genesis child theme functions.php
  2. In your Genesis child theme folder, create a file called archive-toolbox.php
  3. In your Genesis child theme folder, create a file called single-toolbox.php
  4. Add toolbox css rules into to your Genesis child theme style.css

[sociallocker]Blueprints-data-files.zip[/sociallocker]

Register custom post type

Genesis has built-in support to create an archive for custom post types, complete with some really cool archive settings. With a few extra parameters added into code, you can easily turn on support for archive settings when registering custom post type.

In this case I decided to make 'toolbox' CPT.

Here's the code:

/* ---------------- Toolbox CODE ------------------ */
/** Creates toolbox featured image for archive grid */
add_image_size( 'toolbox', 330, 230, TRUE );

/** Create toolbox custom post type */
add_action( 'init', 'toolbox_post_type' );
function toolbox_post_type() {
    register_post_type( 'toolbox',
        array(
            'labels' => array(
                'name' => __( 'Toolbox' ),
                'singular_name' => __( 'Toolbox' ),
            ),
            'exclude_from_search' => true,
            'has_archive' => true,
            'hierarchical' => true,
            'taxonomies'   => array( 'post_tag' ),
            'public' => true,
            'rewrite' => array( 'slug' => 'toolbox' ),
            'supports' => array( 
        'title', 
        'editor', 
        'author', 
        'thumbnail', 
        'excerpt', 
        'trackbacks', 
        'custom-fields', 
        'revisions', 
        'page-attributes', 
        'genesis-seo', 
        'genesis-cpt-archives-settings' ),
        )
    );
}

You need to paste this code at the end of your theme functions.php file.

Note: If you want to modify number of displayed tools, add this code after  Toolbox Code in functions.php, just change the number in this line ( 'posts_per_page', '12'.

/** Change the number of portfolio items to be displayed (props Bill Erickson) */
add_action( 'pre_get_posts', 'minimum_toolbox_items' );
function minimum_toolbox_items( $query ) {

    if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'toolbox' ) ) {
        $query->set( 'posts_per_page', '12' );
    }

}

 

Create archive and single toolbox pages

1. Connect to your server using any FTP program you like and navigate to main theme folder.

2. Create archive-toolbox.php file and paste following code. This code creates the toolbox archive page and will display  the title and featured image after each single toolbox page in a grid layout.

<?php
/**
 * The custom toolbox archive template
 */

/** Force full width content layout */
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

/** Remove the post info function */
remove_action( 'genesis_before_post_content', 'genesis_post_info' );

/** Remove the post image */
remove_action( 'genesis_post_content', 'genesis_do_post_image' );

/** Remove the post content */
remove_action( 'genesis_post_content', 'genesis_do_post_content' );

/** Add the featured image after post title */
add_action( 'genesis_post_title', 'toolbox_grid' );
function toolbox_grid() {
    if ( has_post_thumbnail() ){
        echo '<div>';
        echo '<a href="' . get_permalink() .'" title="' . the_title_attribute( 'echo=0' ) . '">';
        echo get_the_post_thumbnail($thumbnail->ID, 'toolbox' );
        echo '</a>';
        echo '</div>';
    }
}

/** Remove the post meta function */
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

genesis();

3. In your Genesis child theme folder, create a file called single-toolbox.php and paste code listed below

<?php
/** Remove the post info function */
remove_action( 'genesis_before_post_content', 'genesis_post_info' );

/** uncomment line below if you are using any after post widgets */
/** remove_action( 'genesis_after_post_content', 'genesis_after_post'  ); */

/** Remove the post meta function */
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

/** Remove the comments template */
remove_action( 'genesis_after_post', 'genesis_get_comments_template' );

genesis();

Update CSS Styles

Ok, this part may need some adjustments depending on your theme styles, but should work fine. Just add those styles to your style.css file

/* TOOLBOX
------------------------------------------------------------ */
.post-type-archive-toolbox.full-width-content #content {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0;
    text-align: center;
}

.post-type-archive-toolbox .toolbox {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 30px 30px;
    width: 33%;
}

.post-type-archive-toolbox .toolbox .entry-title a {
    font-size: 1rem;
}

.single-toolbox #content {
}

.post-type-archive-toolbox.full-width-content .archive-description p {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.post-type-archive-toolbox.full-width-content .archive-description h1 {
    font-size: 2rem;
}

.post-type-archive-toolbox .hentry, .single-toolbox .hentry {
    margin: 0 0 20px;
}

 

And we are ready. Now you should see new tab in your dashboardtoolbox

Configure Toolbox Settings

In the Dashboard select Toolbox > Archive Settings.

Here you can specify the following settings for the Toolbox Page:

  • Archive Headline
  • Archive Intro Text
  • SEO Settings
  • Layout Settings
    Note: The Toolbox by default has full width layout but you can change it here if you want.

That’s it. You’re done. You can now start filling up your toolbox page.

Here is a preview of ours.

87studios toolbox

Divi 2.0 WordPress Theme

Like what you read here in this blog post? If yes, please sign up and get latest articles delivered to your email account for FREE! You’ll be also subscribed to newsletter, where I share a exclusive content and offers.

About Kris Hoja

Hi! I'm Kris. For a while I was blogging about WordPress, now I'm owner of HogStudio - Creative Agency focused on website development.
Add me on Google+ and don't forget to follow me on Twitter :)

Comments

  1. their is very less amount of Genesis helpful article. this is one of this. keep sharing.

  2. Thanks Kris! I successfully created the Toolbox. Now it needs to be filled up. Cheers

  3. That's exactly what I was looking for Genesis. Thanks Kris for such a detailed article.

  4. Great article - very helpful!

    • Thanks Sam,
      it was quite easy to adapt Brian Gardner’s code, but he removed original code from his blog.
      Anyway, this code can be simply adapt to create portfolio, our team, themes page etc.

Leave a Reply