January 18, 2018

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.

Gallery Pro Theme
Source: Studio Press

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;
}

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.

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.

After the fix

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.

Update: This theme DOES DO IT. Just differently thank we anticipated. And while you can make a custom Blog Page as we do below, you can also apply the “Blog” template to the page itself.

We spoke with the lovely theme folk, and they pointed us in the right direction. As they say – there are a lot of different ways to develop, and we completely overlooked this simple solution before going for the complex. Thanks guys!

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();


Get Sagely

Sign up for regularly broadcasted emails on
running your online business and thriving

during the craziest times most of us have ever lived.

Related Articles

April 9, 2019

If you already have a great PDF giveaway for your subscribers, you've probably set up your autoresponder to fire off a link to the free resource upon subscription. It's easy peasy, and everyone is ...

Read More
Sharing your paid content without “giving it away”

March 30, 2019

There is a glitch we found when developing a membership site using WP eMember and using the fantastic commenting system wpDiscuz: the comments on protected pages were not being hidden by WP eMember even ...

Read More
Hiding wpDiscuz comments on a membership site running WP eMember

Want Results?