Replace Eleven 40 Pro Themes Tagline Area With Image

I’ve already shown you how to replace the tagline area in the Eleven40 Pro theme with a new widget area however you can also replace it with an image.

This post answers this forum question:

I’d like to remove the site description (text) on my site between my menu bar and the content. In that space, I’d like to add an image.

On Studio Presses’ tutorials, I found some PHP code for removing the site description. When I tried to add it to my functions.php file, my whole site crashed, and I had to restore the functions.php file through my server’s FTP.

Note: There’s at least 20 reasons code doesn’t work or may cause your site to crash even though there’s nothing wrong with the code.

In this tutorial, i’ll provide 2 solutions which are fully tested and work:

  1. Display image before content sidebar wrap.
  2. Display image full width after the header.

Here’s the before shot which includes the tagline.

Default Tagline Area In Eleven40 Pro

And here’s the result after adding the PHP code below to your functions file:

image before content sidebar

Alternatively, you can use the 2nd code snippet which displays your image after the header so it spans full width like this:

image after header spans full width

1. Image Before Content Sidebar Wrap

Here’s the code you should copy from the view raw link in the Gist and paste at the end of your child themes functions.php file using a text editor.

Make sure your path to your child themes images folder, file name and extension match exactly whats in the PHP code above.

2. Image After Header _ Full Width

This code adds your image after the header which displays full width:


Comments

11 responses to “Replace Eleven 40 Pro Themes Tagline Area With Image”

  1. How would you remove the site title on the home page only? I still want it on the other pages though.

    Thanks.
    Jason

    1. Brad Dalton Avatar
      Brad Dalton

      Add the remove_action to the home page or front page template

      1. I added this to the home.php file.

        remove_action( ‘genesis_before_content’, ‘genesis_seo_site_description’ );

        Did seem to work.

        1. Brad Dalton Avatar
          Brad Dalton

          Because that’s not the code to remove the site title.

          I only provide custom solutions to members.

  2. Michelle Avatar
    Michelle

    Thank you so much for writing this post! I tried to use the Studio Press code that added the image widget in place of the site description, and was beating my head against a wall trying to remove the ugly padding around the image! I never figured it out, so I went back to the suggestions you left for me and tried this option. Worked perfectly, and very easy to configure. I appreciate the time you took to do this!

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome.

      This solution pulls the image from your child themes images folder.

  3. Jennifer Gropper Avatar
    Jennifer Gropper

    Hi Brad,
    Using Eleven40; replaced the tagline with image, per tutorial; however, the top of my image is being cut off, under the site header. Image dimensions are 1139×300. Any ideas why this is happening? Thanks for your help.

    1. Brad Dalton Avatar
      Brad Dalton

      What code did you use and can you link to your site please.

      1. Jennifer Gropper Avatar
        Jennifer Gropper

        Hi Brad. Thanks for your quick response. I’m just seeing this now. I used 1. IMAGE BEFORE CONTENT SIDEBAR WRAP and managed to get it working by deleting my original files and uploading new. However, I would like this image to only show on the homepage. Is there a way to do this? Please let me know if you still need a link to the site. I currently have the WP site on a 301 redirect to the client’s current site (via a plugin).

        1. Brad Dalton Avatar
          Brad Dalton

          Simply add the [code]if (is_front_page() )[/code] conditional tag after the function.

        2. Hi Brad,

          thank you so much for this tutorial. It was a huge help and saved me hours of time (and probably money). 🙂

          @Jennifer: I see the same problem. I used the fullwidth-image code and the top of the image is hidden under the sticky header/navigation bar.
          Would you mind explaining how you solved the issue? 🙂

          All the best,
          Julian

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.