Create header of images like demo

Hi @ironclive!

You can, yes 🙂

First, make sure you have the Jetpack plugin installed. Once that is activated, you’ll find a “Featured Content” section in your Customizer.

You can use that section to set a Featured Content tag. Add that tag to whatever posts you’d like to see at the top of the page – then the Featured Images of those posts will appear, linking to the posts themselves 🙂

Hi @ironclive!

It’s doable, yes, but will take a bit of coding. You’ll want to start by creating a child theme.

In that child theme, we’ll need to do a few things. First, we need to add Tag support to your pages. Then we need tell the Featured Content section to include pages in its search (instead of just posts).

First, in your child theme’s functions.php file, we’ll add the following:

// Add tags to pages
function tags_on_pages() {
    register_taxonomy_for_object_type('post_tag', 'page');
}

add_action('init', 'tags_on_pages');

// Add pages to Featured Content
function add_featured_pages() {
    add_theme_support( 'featured-content', array(
        'filter'      => 'gazette_get_featured_posts',
        'description' => __( 'The featured content section displays on the front page above the header.', 'gazette' ),
        'max_posts'   => 6,
        'post_types'  => array( 'post', 'page' ),
    ) );
}

add_action( 'after_setup_theme', 'add_featured_pages', 20);

At this point, you’d be able to see a featured page up in that top section, but it wouldn’t have its image. The theme uses a bit of javascript to apply the background images, and that script isn’t looking for pages – just a selection of post formats.

Your first step to fixing that will be to copy a file from the child theme: /js/featured-contnt.js into your child theme folder. Don’t worry about making a /js/ folder for it, we don’t have enough files going in here to make that necessary. Just drop it right into the main child theme folder.

Now, open your copy of the file and look at line 35 (of the current version of the theme, it could potentially shift a bit in future updates).

If you read across that line you’ll see it checking for post formats (like 'format-image', 'format-gallery' and so on). We’re going to add a little bit onto the end to have it look for pages as well. Replace that line with this one:

		if ( ! $( this ).hasClass( 'background-done' ) && $( this ).hasClass( 'has-post-thumbnail' ) && ( $( this ).hasClass( 'format-image' ) || $( this ).hasClass( 'format-gallery' ) || $( this ).hasClass( 'format-standard' ) || $( this ).hasClass( 'format-video' )  || $( this ).hasClass( 'page' ) ) ) {

All we’ve done is added a check for 'page' as a class – since that’s the class a page would have!

The last step is to tell the child theme not to use the original copy of the file you just edited, and use your copy instead. Back in your child theme, add the following:

function my_featured_js() {
    // Dequeue the original
    wp_dequeue_script( 'gazette-featured-content' );
    // Enqueue the new
    wp_enqueue_script( 'my-gazette-featured-content', get_stylesheet_directory_uri() . '/featured-content.js', array( 'jquery' ), '20150507', true );
}

add_action( 'wp_enqueue_scripts', 'my_featured_js', 12 );

Now you should see pages in your Featured Content (remember, they’re listed in the order they were published, so if you have Featured Posts that are newer than your Featured Page(s), they might not show up).

Give it a try and let me know how it goes!

You’re welcome! I’ll cross my fingers for you 🙂

We’re adding one more condition to the end. When you look through that line you’ll see || a bunch of times. That means or.

What this line basically does is say If this item has an image ready, and it’s an image post, or a gallery post, or a standard post, or a video post, do a bunch of stuff.

We want to add (in code) …or if it’s marked that it’s a page.

Starting from the last $( this ).hasClass you have now, it should read like this:
$( this ).hasClass( 'format-video' ) || $( this ).hasClass( 'page' ) ) ) {

Or, you can just replace the entire line with the example from my previous post, it has the page check in there.

If you add it in manually, make sure you have the right number of parenthesis in the right places 🙂

You’re welcome! 🙂

Hi @alexgrishkevich

With Jetpack installed, you’ll want to open your Customizer and look in the Featured Content section.

Use the provided field to set a Featured Content tag (featured is a popular choice).

Next, edit the posts (or in this case, with our modifications posts/pages) you want to put in the top section of the home page.

Give each post/page a Featured Image, and add the tag you set in the Customizer

The posts/pages with the correct tag will now appear with their Featured Images at the top of the home page. If not, make sure you’ve set your home page to show Your latest posts under Settings > Reading like @ironclive mentioned 🙂

You’re welcome!