Making the Gallery Pro Theme Work for You

This article is a thorough look at what we did with the Gallery Pro Theme for the Genesis framework on our end as we decided to apply it to our site and play with it. We found it really elegant and accommodating to what we were doing at Site a la Carte.

As we started digging into this theme, we noticed that there were some issues to fix, as we found their help documentation to be lacking in the inconsistencies we found by working with the theme.

Contents:

1. Changing the Top Nav
2. Altering the Header Dimensions (the logo area size is massive out of the box, unlike in the demo)
3. Fixing the Footer (the 3 boxes are not centered out of the box)
4. Displaying blog articles below the fold on the Home Page AND having them show up on our Blog Page (this theme does not support this despite purporting to do that)

Here is the original Gallery Pro Theme. And below are some screen shots of our home page and inner pages (in case you're reading this after we've changed our layout.)

Our Changes

1. Changing Top Navigation

We wanted to make the top navigation:

• float right,
• be smaller,
• have a gray background and
• sit on the right margin (rather than be contained within the set width of the page)

How we did it:

1. We created the Contact Menu in the Menu and assigned it to be the nav above the header.
2. Code Tweaking:

That top nav is considered the primary nav in this theme (the secondary nav being the one that we display below the logo.) So we had to apply the .nav-primary class to all the .genesis-nav-menu style edits.

The entire nav code:

You can add it anywhere inside the “Navigation” section in the styles.css page or in the Additional CSS section of your Customizer.

I interspersed each bit of css below it's sister genesis-nav-menu declaration, but I bunch it all here in one place for ease. You can do it either way, just make sure that you add the code below the master .genesis-nav-menu code so that it doesn't get overwritten.

.nav-primary {
  margin-bottom: -2rem;
  background-color:#f9f9f9;
}
.nav-primary .wrap{
  max-width:100%;
}
.nav-primary .genesis-nav-menu{
  float:right;
  border:none;
}
.nav-primary .genesis-nav-menu a{
  font-size:1rem;
  padding:1rem 1.5rem;
  font-weight:400;
  font-family: Poppins;
}

Altering the Header (our image logo) Height

So this is actually an issue in Gallery Pro theme, as the online demo doesn't display what the default setting out of the box is. (We didn't install the demo content, so not sure if that would have solved it, but we doubt it since we had to alter both the functions.php and the styles.css files to make it work.)

It told us that our suggested dimensions were to be 800 x 340 px. Now, that's not exactly the dainty “G” dimensions you see on the demo.

The issue: The Header was very very big.

How We Fixed It:

We first tried altering the functions.php file and appended this bit of code to reflect our logo's dimensions:

<?php
// Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 200,
	'height'          => 65,
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'flex-height'     => false,
) );
?>

Unfortunately that did nothing. We refreshed over and over and re-uploaded our images, but it didn't work. The header still took up a huge amount of space.

So we edited the styles.css file like so (you can see what we commented out and replaced):

.header-image .site-title a {
      float: none;
      min-height: 6rem; /*17rem*/
      width: 200px; /*100%*/
      max-width: 40rem;
      margin: 0 auto;
}

The issue was that the minimum height was 17rem – aka large – so our logo (at 200 x 65px) was getting BLOWN UP.

We didn't want that, so we changed the min-height value and the width. (Though, I'm not clear whether the latter had any impact at all.) In either case, that bit of code made sure our logo showed up fine.

Fix the Footer: the 3 Boxes are not Center Aligned

You can see right in the screenshot on their demo below that the 3 boxes of the footer are definitely not center aligned. I picked a page with three evenly-sized columns that should have lined up with our footer evenly. Here you can see the issue.

Looking at the code we discovered that the three footer boxes are floating left, with no margin or padding between the 3 boxes, so they naturally stack upon each other. Good thing the fix is quite simple.

How We Fixed It:

We simply changed the footer widget code like so:

.footer-widgets .widget-area {
 /*margin: 4rem auto 2rem; */
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
 padding: 0 2.8%;
 width: 33.3333333333%;
}
@media only screen and (max-width: 800px) {
 .footer-widgets .widget-area {
   margin: 0 0 20px 0;
   width: 100%;
 }
}

If you notice, we simply edited out the top widget-area code and replaced it with the 3 footer-widget- declarations below.

This is the standard code used in other Genesis Themes we work with, and the only thing you'll need to do is make sure to change the mobile declaration to set the with to 100% at a certain width. We did this above by adding the @media code just below. This will give spacing between the elements and make sure the footer looks great on mobile.

Displaying blog articles below the fold on the Home Page AND having them show up on our Blog Page

So you might know right off the bat what we're talking about here. If not, here's an overview.

When you first set up WordPress, you have to select what the Home page will display – a Static page or be the Blog page. All the themes we work with that do BOTH – as in appear to list several posts on the home page AND have a proper blog page – achieve that functionality by creating custom Widget Areas for the Home Page blog posts.

This theme does NOT do that. That means that you can EITHER select the home page to display the blogs OR have your Blog page do that.

We tried setting the Home and Blog to be the Blog page, and that dumped a list of all our pages. Not what we wanted. So we had to simply make a custom template page to make it work.

How We Fixed It:

1. Create a custom template
2. Apply that template to the Page you selected to be your Blog Page. In our case that page is News & Blog.

The Template Code:

Now this isn't extremely elegant, as we just had to get it up and running, and we may be updating this code as we go, but this is the basic overview to get you going if you were stuck like we were.

<?php
/* Template Name: Custom Blog Page */
remove_action( 'genesis_loop', 'genesis_do_loop' ); // remove custom Genesis Loop 
add_action( 'genesis_loop', 'custom_loop' ); // run custom loop that will call our posts below
function custom_loop(){
$query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1)); 
 if ( $query->have_posts() ) : 
	while ( $query->have_posts() ) : $query->the_post(); ?>
    
    <article class="post type-post status-publish format-standard has-post-thumbnail category-crm category-genesis category-tutorials tag-genesis tag-theme-customization tag-wordpress entry" itemscope="" itemtype="http://schema.org/CreativeWork">
    
        <a class="entry-image-link" href="<?php the_permalink(); ?>" aria-hidden="true">   
        <? the_post_thumbnail('entry-image'); ?>        
        <h2 class="entry-title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
        <? the_excerpt(); ?>        
        <div class="entry-content" itemprop="text"><a class="more-link button arrow-right" <a href="<?php the_permalink(); ?>">Read More</a></p></div>			
    </article>    
	
	<?php endwhile; 
	
	 wp_reset_postdata(); 
	 
	 else : //no else, because we have posts 
	endif; 
}
genesis();