Associate Theme Customization

Customize the Homepage for the Associate Theme

I’m currently working on my third project using the Associate Child Theme from StudioPress. This morning I woke up and said to myself, “Self? Let’s try something different and customize the homepage for the Associate Theme!” While the theme is absolutely great as is, it’s nice to change things up.

In this post, we’ll compare the default Associate Theme homepage to our goal homepage and then walk through the steps to get there.

Default Associate Theme Widget Areas

Out of the box, the Associate Theme comes with the following widgetized areas:

Associate Theme Default

You’ll note that the Sidebar and Footer widgets are not used on the home page.

The Goal: Customize the Homepage for the Associate Theme

I’m going to make two layout changes to the Associate Theme by adding an additional Home Middle widget (Home Middle #4) and splitting the Featured Widget into two separate areas (Featured Left and Featured Right).

When we’re done, it’ll look like this:

You’ll note that there is no long a Featured Widget area, but that it’s been replaced by a Featured Left and Featured Right. You’ll also see the addition of Home Middle #4 widget area.

Let’s Customize the Homepage!

To change the home page, we’ll need to edit three files:

  1. functions.php
  2. home.php
  3. style.css

Step 1: Edit functions.php

The first thing we need to do is register the extra widget areas (Featured Left, Featured Right, and Home Middle #4). I’m also going to remove the original Featured widget.

From within your admin dashboard, go to Appearance > Editor and select functions.php.

Please note that this should NOT BE TRIED on a live site. A misplaced semi-colon in this file can take you down! I recommend making these changes in a development environment first.

After saving the file, if you were to go peek at Appearance > Widgets, you would see your new widgetized areas sitting there, just waiting to filled with your content. But even if you add content to them at this stage, you won’t see anything. Why? Because we need to tell home.php to show them!

Step 2: Edit home.php

Head back to your Appearance > Editor and select home.php. We need to modify this code to include our new widget areas. First, let’s take care of splitting the Featured Widget area into a left and right. Find this line:

if ( is_active_sidebar( 'featured' ) ) {

In Step 1 we removed the Featured widget (id=featured). We’re going to need to change that conditional statement to instead check for the Featured Left widget (id=featured-left).

So change the above line to read:

if ( is_active_sidebar( 'featured-left' ) ) {

Now, to finish off that entire conditional statement block, we’re going to add in a couple of style divs (we’ll get to actually creating those style classes in Step 3) as well as call in our Featured Left and Featured Right Widgets.

Alright! We’ve registered our new widget areas and modified the home page to show those widgets. The last step is to style them accordingly!

Step 3: Edit style.css

For the last time in this tutorial, let’s be-bop over to Appearance > Editor and open up style.css.

Do a CTRL+F (PC) or Command+F (Mac) to search for .featured.

In our previous step you’ll see that we kept the original featured class. We’re going to use that as a container for the featured-left and featured-right classes we’re about to create.

This section of your style sheet should look something like this:

You can adjust those left and right widths to suit your own need.

If you’re using the Genesis Slider Plugin for the Featured Left area, you’ll want to make sure you set your slider settings to the same width as your featured-left class.

Next up, let’s add some style in for our new Home Middle #4 widget area. Search your stylesheet for .home-middle.

You’ll notice that the width is 910px and that it’s divided evenly (including padding) amongst the original three Home Middle widget areas (.home-middle-1, .home-middle-2, and .home-middle-3). We’re going to add in a .home-middle-4 and RE-DISTRIBUTE those widths, like this:

Baddabing BaddaBOOM!

Welcome to your newly customized home page! You could following this same basic guide to modify the homepage of any site built on the Genesis Framework. Let’s do a quick recap:

  1. Edit functions.php to register your new widget areas.
  2. Edit home.php to include your new widget areas.
  3. Edit style.css to make your new widget areas look good.

Go forth and customize!

I can help you customize the homepage for the Associate Theme! Just drop me a line!
7 day free trial

Carrie Dils

I’m a recommended Genesis Developer with 15+ years experience in web design and development. I'm creative, resourceful, and ready to put my mind to your project. Want to discuss your WordPress project? Let's talk!

Comments

  1. says

    Oh yes… congratulations on a fabulous way of showing what we are doing.

    The mad coding guys just use twxt and code, but you have set the scene, told us what we are trying to achieve and then shown us how to do it.

    You know those spam comments that start…
    Great post I’ve bookmarked it.

    Well I’m about to say…
    Great post I’ve… LOL

    Wel;l done Carrie – made my day.

    • Carrie Dils says

      Haha! Thanks Keith. I take it as a high compliment to make your bookmarked list!

  2. says

    I am in the process of changing the Streamline theme with some new widget areas. This post will come in handy as I am a beginner.

    You can see my progress by visiting the practice website linked here.

    • Carrie Dils says

      Hi Daren, the cardio site is looking nice! Feel free to come back and post questions if you need to. Cheers!

  3. says

    I’m having trouble getting the menu (in the Header Right widget) to show the pages in the sub categories when you hover over them on the mouse. Any thoughts?

    • says

      When you set up your menu are you dragging those sub-category pages into the menu and nesting them under the parent item? That should be all you need to get them to show!

  4. says

    Hi Carrie,

    I followed your description exactly and I can’t get the widgets to show up now! Help me please! I see the new areas in the dashboard, but my slider will not show up or my e-news widget.

  5. says

    Hi Carrie! Great tut, thanks for sharing.

    I have a question about tweaking Genesis child themes. What do you do if they get an update from StudioPress? I mean, if you just update them, you lost all your customizations, don’t you? So you just don’t update them?

    Thanks so much! :)

    • says

      Since you’re never making changes to Genesis Framework (the parent theme), you should always be safe updating it. Here’s a good article from StudioPress on why you shoulnd’t fear the upgrade.

      Now CHILD themes are a different matter, since that’s where you’re making your customizations. You’re right that you would lose any customizations you’ve made. Historically speaking, it’s very rare for StudioPress to release an update to a child theme. Moving forward, with the release of 2.0, we’ll see some old themes re-released in new versions, but you don’t need to update unless you just want the new look (and want to lose your customizations). :)

  6. says

    Yeah, that’s what I thought.

    I tweak themes for my clients using child hemes, so I can update the parent theme happily when it get an update. But now I’m moving to Genesis, and since the parent theme is Genesis itself, and the child themes the ones I have to tweak (and there is nothing like grand child themes), I’m doing all the modifications on the child theme. The thing is I feel like there is something wrong in it.

    I guess I have to deal with the fact that I’m not updating themes anymore. Good to know it’s very rare for StudioPress to release an update to a child theme.

    Thanks for sharing!

    • says

      Well, now you’re getting into a philosophical discussion of what customizations belong in a child theme and ones that would be better pulled out as an include or plugin – I’m still wrapping my head around that.

      99% of the projects I do for clients I make all the customizations to the child theme since I know it won’t be updated. But… moving forward I want to do better at pulling out theme-agnostic code so that I can re-use or easily port it over (things like CPT’s and taxonomies, etc). Based on what better devs have told me, I’ll thank myself for structuring it that way. :)

  7. says

    Hi Carrie,

    Great tutorial. The visuals and explanation are super clear!

    Our small business is making the move to WordPress, and I’ve been eyeing the Associate theme. (If you can see the link to our straight HTML website in my details then you’ll understand why!) The homepage is almost perfect for us, and with your tutorial I think I could tweak the one or two things we want in an upgrade. Only problem is I really want a mobile responsive theme; and it looks like Associate is not yet.

    Given that we’d like a “mobile-responsive Associate” do you have any recommendations on directions to go? I think making Associate mobile-responsive is more than I can take on. Perhaps starting with a mobile-responsive theme and tweaking it to be more Associate like? Any tips appreciated.

    • says

      Hi Laura,

      I would go with your last suggestion of starting with a mobile responsive theme and then tweaking it to look more like the Associate layout. That’d be a much easier approach than going through and updating Associate.

      Here’s a list of responsive themes from StudioPress. Off the top of my head, I’m thinking Agency or Executive might be your closest bets!

      Carrie

      • Joan Boluda says

        Thanks for that list, Carrie. You are awesome. By the way, do you know if StudioPress is gonna make all their themes responsive when they upgrade to HTML5 and schema? And do you know when are they gonna do it? In “Genesis 2.0: A Conversation” they said there were about 10 themes almost ready…

        • says

          I think the plan was to slowly drip those initial 10 themes after 2.0 was released – they just added Going Green Pro to the mix today, making it 3 HTML5 themes so far (I think).

          All new themes will be responsive – I’m guessing they’ll re-release some of the more popular older themes as HTML5/responsive and eventually sunset the others.

          • Joan Boluda says

            They released Going Green Pro already? Oh, great to know that!

            I hope they re-release all their themes as a HTML5/schema/responsive. For most of my clients responsiveness is a must go.

            Thanks again ^_^

  8. says

    Hi Carrie,
    I really like the new layout modification you show here. However, I followed your instructions to the T, but it doesn’t work on my website! I can see the new split featured widgets and the additional 4th home middle in my widgets area. The problem is my slider’s sizing is all wrong (I did Change it under settings) and the content I want to display in the Featured left widget gets displayed underneath my featured slider and the size is all wrong! You can have a look here: http://www.leadershipconnexion.com.
    What can be the problem?

  9. says

    Carrie,
    After almost a day’s research trying to figure out how to reduce the slider width in sister theme Outreach and put a text widget to its right, I came across your post here. So, I was overjoyed as the splitting into left and right widgets of that slider area seemed to be just what I needed to do in Outreach.

    However, I couldn’t locate that starting piece of code to delete in functions.php – not the same wording in Outreach. Nothing seemed to resemble it at all. I went ahead and got as far as seeing newly created areas in the widget dash – left and right home.top, but I couldn’t get the ‘action hook’ to work from then on and ended up with the white screen of death! Do you happen to have access to Outreach and know that bit I need to delete / replace etc? Really appreciate it if you do!
    Tnx.

    • says

      Hey Liz,
      I’m not sure about Outreach, but you’ll want to check the home page (front-page.php) to find the right hook spot. Have you ever tried the Genesis Visual Hook Guide plugin? It shows you where things are hooked from the front end of your site and may help you find what you’re looking for.

      If you get too fed up, give Justin a ping at genesistweaks.com and he can quote you to take care of it for you (sanity saver!).

      Cheers,
      Carrie

  10. says

    Thanks Carrie, for all your help.
    Re the Outreach split home top widgets, I’ve success in registering widgets, and even got some sort of ‘action’ code in the front.php without breaking the site, but it won’t show. So not sure now if something is overriding it, or it’s a CSS issue. The original front.php forces full width if the old home.top present, so that might be the issue. I’ll give it a few more cracks (and lots more white screens of death!) before I give up and get Justin – I have to learn, but it sure is tedious after a day and a half on the same issue! Thanks for your pointers.

  11. says

    Carrie,
    I’ve resolved the Outreach customisation of that home slider/featured area: a simple case of CSS styling! Just added another widget to the ‘home top’ area in the widget dash, and styled it! Ridiculous that I thought it was a far harder nut to crack and went through all the coding and site break hassle! Thanks for your ongoing help though!

Trackbacks

  1. [...] couldn’t have written this tutorial without what I learnt from this tutorial on customising the Associate theme home page by Carrie [...]