Modifying the theme’s homepage in a child theme using a gallery plugin compatible with custom post types.
Recently Derek Power of www.artists4film.com asked me to help him create new blog posts about the current and upcoming projects and events that some of his many talented clients are involved in. He also asked me to alter the homepage into a news site format to show a headline an image and perhaps an excerpt of everything current that’s going on inside the website such as the hot news and upcoming event items from the blog, the client portfolio and the production project portfolio.
The theme makes use of the WordPress Zilla Portfolio plugin which in turn makes use of the custom post types feature of WordPress. You can create multiple portfolio types. The theme also has an unusual intro page that opens across elegantly to show the content and Derek wanted to keep that, but out of the box the theme reveals just one of the portfolios, this wasn’t sufficient. There were no options to add multiple portfolios, additional content or show the blog and still be able to keep the button scroll entry page. I decided the best solution would be to customize, then add the home page template (page-cover.php) to the child-theme.
I removed the built-in portfolio code from the page-cover.php:
<main id="main" data-number-posts="<?php echo esc_attr( $num_posts ); ?>">
<?php if ( $num_posts > 0 ) : ?>
<div id="gallery">
<?php
$args = array(
'post_type' => 'portfolio',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => $num_posts,
'meta_key' => '_zilla_frame_featured_portfolio',
'meta_value' => 1
);
// Set up the custom query
$wp_query = new WP_Query($args);
// If there's no featured posts, use the newest one instead
if ( ! $wp_query->have_posts() ) {
unset( $args['meta_value'], $args['meta_key']);
$wp_query = new WP_Query($args);
}
if ( $wp_query->have_posts() ) :
while ( $wp_query->have_posts() ) :
$wp_query->the_post();
$has_gallery = ( get_post_meta( $post->ID, '_tzp_gallery_images_ids', true ) );
$is_slideshow = ( get_post_meta( $post->ID, '_zilla_frame_gallery_layout', true ) === 'slideshow' );
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( $has_gallery && $is_slideshow ) : ?>
<?php zilla_post_gallery( $post->ID ); ?>
<?php else : ?>
<figure class="featured-image">
<?php frame_post_thumbnail( $post->ID ); ?>
</figure>
<?php endif; ?>
<?php echo frame_print_audio_html( $post->ID ); ?>
<section class="post-bottom">
<a href="<?php echo get_permalink() ?>"><h1 class="post-title"><?php the_title(); ?></h1></a>
<div class="post-summary post-content">
<?php the_content( __( 'Continue Reading', 'frame' ) ); ?>
</div><!-- .post-summary -->
</section>
</article>
<?php
endwhile;
endif;
?>
</div><!-- #gallery -->
<?php endif; ?>
and I replaced it with:
<main id="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content' ); ?> <?php endwhile; // end of the loop. ?>
I then installed the Justified Image Grid plugin and in the newly added content area of the homepage, I created 3 galleries: one which shows the featured current event blog posts, one for the management clients, and one for the production project portfolio.
Below is the homepage that I customized embedded into this page with an iframe like this:
<iframe src="http://www.artists4film.com/" width="1200" height="800" frameborder="0" allowfullscreen="allowfullscreen"></iframe>