Designs By Nick the Geek

Genesis Based WordPress Development and Tutorials for Everyone

Genesis Responsive Header Customizer Update

Hey folks, finally had some time to do an important update on the Genesis Responsive Header plugin. This update is pretty fresh so be warned, it could have problems, but I’ve done a good bit of testing with it so far and found it to work well in my tests, but when updating you will have to rebuild your options. More on that in a bit.

Some things you can look forward to in this new version

  • Use the theme customizer
  • Allows users to add, change, or remove the device width break points
  • Allows automatic image size refresh
  • Allows users to manually update image height

I also want to talk about these changes in detail.

Use the theme customizer

WordPress added a fancy new theme customizer that allows users to make changes to the theme with a pretty handy settings panel. Among other things it has it’s own built in image uploader and color picker. This means I could drop the admin class and save a good bit of code. To give you a good idea of what I mean, the old zip file was 92kb but the new zip file is only 7kb. That is a huge difference. I mean over 90% reduction in file size which means that much less code that has to be run.

This also fixes some conflicts that were happening where images couldn’t be uploaded because of other plugins. Since this is now using native features in WordPress exactly as created this does a lot to improve cross plugin compatibility.

Add, Change, or Remove Device Widths

This is a feature a lot of people have been asking for. Up until now the Genesis Responsive Header plugin only allowed 4 preset device widths as break points. Those will still be present automatically, but you can add, change, or remove breakpoints with a simple filter in the theme functions.php file. Here is some example code

add_filter( 'grh_media_sizes', 'my_grh_media_sizes' );
function my_grh_media_sizes( $sizes ){
	//add 960px device width to first position in the $sizes array
	array_unshift( $sizes, '960' );

	return $sizes;
}

You could also rebuild the array to change other widths very quickly.

Automatically update image heights

Originally I was trying to pull the image height when uploading the image. This had some problems and worse it isn’t something I can do with the customizer without building my own custom uploader. While that is an option in WordPress, I didn’t want to do that. Instead there is a new option, Update Image Sizes, that will use php to find the image size and update automatically on save. When the customizer is refreshed the option will be unset. That is because it isn’t intended to be left on. That could add a good bit of overhead and waste time.

Basically it goes is this option set? OK, lets find out how tall the images are and set that in the options. Now I’m going to unset the update image size option so I don’t do this again till you tell me to. Have a nice day.

Use this any time you change header images and the height of an image changed.

Manually update the image height

This is a fall back for the automated feature. If your server doesn’t work with the getimagesize() function the automatic feature will not work. Since the image height really helps make sure that the logo is sized correctly, especially if the javascript is disabled, it is important to set the image height. For folks that this becomes an issue for, I added an option to allow those values to be changed manually.

Upgrading to this version

To upgrade to this version you will need to disable and delete the version currently on your site. Right now I do not have an upgrade script so the options will not be converted over. This means you will need to upload your images and set your header background colors again. Before I add this to the WP repository I plan on writing a simple upgrade script that will find the existing options and convert them over. This is important because users will receive a notice and may not read my upgrade note here.

I also want to have people who are testing right now use the new interface. This will help me find any issues that may need to be fixed.

If you are ready to update or use the Responsive Header for the first time, Get the Genesis Responsive Header plugin

Related Posts

Filed Under: Uncategorized

Comments

  2. Hey Nick!

    So excited to give this plugin a try… However, I’ve uploaded the plugin, activated it, and I do not see any “settings” menu anywhere to upload images and work on their settings. I looked in the Genesis menu, Tools, Settings, and Responsive Header Settings doesn’t seem to be showing up anywhere. I’ve deactivated, deleted, reloaded, etc., a couple of times to no avail. Any thoughts on what I’m doing wrong? Thanks!

    • Matt,

      Sorry if I didn’t make it clear above. You will need to use the theme customizer with this version. In WordPress 3.6 it is a little more obvious but right now click “Appearance > Themes” then click the “customize” link.

  3. Hey Nick,

    Great plugin! Thanks so much for this.

    However, I have a slight problem. I want to add the 1024px width (for landscape-orientation iPad), and when I added your filter code I got an “unexpected T_STRING error.”

    Could I be doing something wrong?

    Thanks
    Tessa

    • Tessa,

      Not sure why you got this error. I just double checked my code and it works. You may have only copied part of the code or accidentally copied some of the surrounding text. Please check out my site recovery tips for ways to fix this.

      • Hi Nick, thanks for your reply.

        I removed the code via PHP at the time, so no worries there.

        I still couldn’t figure out the problem… but then I just manually typed in the code, rather than copying from above, and now, no error!

        However, I have a new problem now… When I add all the included image sizes, it works great. But when I upload a 1024px image into my new image size box, the 1024px header seems to “override” the other sizes. So if there is a 1024px image present, it displays that image at every viewport size (except for full size).

        The website I’m working on is http://www.kyliesaunder.com, if it helps to take a look.

        Thanks so much. 🙂
        Tessa

        • Tessa,

          I just updated the code to use “array_unshift” which will put it at the start of the array instead of the end, that should resolve that issue.

          • Hi Nick,

            Wow, that was fast! Thanks for making that change, however the problem still seems to be there. Do I need to remove and re-add all the mobile headers again to make the change properly, or should it be enough to just update the plugin?

            Thanks
            Tessa

              • Oh! DUH! I thought you had updated the code in the plugin. Silly me. 🙂

                Seems to be working now.

                Thanks a million.
                Tessa

  4. Does this plugin enable you to create mobile responsive headers no matter what how large the images? If so great as I’ve been struggling make long header banners mobile friendly.

    • Herman,

      It will convert your banner into a scaled images via CSS/JS, but the image is still loaded at full size. For the absolute best mobile experience you should really make mobile images at the recommended widths.

  5. Hi Nick,

    I installed the plugin but it doesn’t show up in my genesis menu.
    Hope you can help me with this.

    Thanks!

  6. I am using the Prose theme. I’m trying to add an an 850 width. I added the code to the bottom of the Custom Functions area – since I’m using the Prose theme . I’m not receiving an error but the new image size doesn’t show up in the theme customize area. The default sizes still show up.

    THANKS!

    • Bill,

      Unfortunately the custom code section is designed so it does not run on the admin side of things. This is a safety feature because if you broke things with bad code it would take down your site in a bad way.

      You will either have to add it to the theme functions.php file and remember to update that code after any updates to Prose or add it via a simple plugin script.

      • Thanks for the quick response. I added it to the functions.php file and it worked great. Do you know of a quick tutorial or training to create a simple plugin? I don’t want to have to remember to update the functions.php in the future.

        • You can just make a php file and upload it to the plugins directory. The name doesn’t matter. The important part is the first part which should look something like this

          <?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/

          Put the code from the example above after that. Make sure you remove the code from the theme before activating your new plugin.

  7. Hi Nick! I just installed this plugin. I only used the preset widths, I didn’t touch the php file. And it is showing an error message. Now I am waiting for my client’s hosting information so I can delete the plugin file. Do you have any idea why it didn’t work? The child theme is Jemma. It is a free theme, but one of my faves to work with.

    http://oneincomelife.com

    Thanks!
    Andrea

  9. I liked the old version better! With the new one I have to upload the image. I already have the image in my Media Library… being used by WP’s header system. However the new version only lets me upload from my local machine. I want to pick it from the Media library like the old plugin. I don’t even have the image on my local drive.

    Maybe I missed something here?

  10. Following up on my previous post… the plugin works well. However, as I mentioned, if you already have a site with a header image/log and you want to use this plugin you can’t choose one from Media Lib… you have to re-upload it… and you end up with two copies of the same file. Internally, WP assigns a sequence number to the end of the file name if it already exists:

    uploads/sites/5/2013/06/MyHeader.png
    uploads/sites/5/2013/06/MyHeader1.png

    The previous version of this plugin let us use a file that already existed in Media Lib… at least that is how I remember it.

    All in all, this is the best solution in the entire WP community that I’ve seen for responsive logo/header/banners.. It’s yet another good reason to buy Genesis. Good job. Thanks Nick.

  12. Nick – great plugin, I’ve used it on several sites, but i just hit a snag with the “Generate” child theme… it doesn’t seem to work with it… any suggestions?
    Thanks,
    Fred

  13. I downloaded your plug in and uploaded into my wordpress, and I can not find the settings under the Genesis settings as your page describes. Could you please help? I would really like to use your plug in, it does exactly what I need!

  14. Nick does this work with Genesis 2.0?
    did the css conversion etc and it seems to have broken the responsivness of the header image?

  16. Hi, I’m really excited about using this responsive header plugin!

    However, I uploaded the plugin and activated. Gone into Appearance etc and uploaded the right size pic and clicked save. But it still isn’t showing anything except my old header. Did I miss a step? Do you need to remove your old header or something to make it work?

  18. I don’t see my recent post, the header image is coming up twice when viewing my website on an iphone. Any work around to this issue?

    Thanks
    Nick

  19. Hi Nick! I just purchased the Modern Blogger Pro theme from Lindsey over at PDCD and cannot get this plugin to work with it. I reached out to her about making the header responsive and she sent me here to get the plugin (which I had already done 😉 I installed WordPress 3.6, then genesis 2.0, then the modern blogger pro theme, then your lovely plugin. I didn’t know if there were any kinks to work out with 2.0 or if it is the theme. Thanks! I have it installed here: http://modernbloggerpro.andreaboring.com

  20. I commented before but apparently it wasn’t approved? Anyway…I’ve tried this plugin on my Prose theme, but when activated, it only shows the header image and nothing else on mobile devices. I’ve tried two different versions of the plugin and get the same result. Is there a workaround for this?

  21. I also installed the plugin on Gen 2.0 with WP 3.6. It does not show up in the admin page anywhere. Maybe the previous version will work.. I hope that Nick will put out a new version soon.

    • Hey Al! You should be able to find it under Appearance – – > customize. I found it just fine, uploaded the images, but I am guessing there is something in the theme overriding it. I’ll be interested to see if it works for you with 3.6 and 2.0.

  22. After reading through more of the comments, I found the the answer to my question a few minutes ago. In WordPress 3.6, I found it in Appearance > Customize. Now to test it out.

  23. Nick,
    Great plugin. Two quick questions. On our little blog there is a “dead spot” where the header is not using the resized logo’s and background. The size range is 755px – 1008px. Is there where I deploy the device width info provided above? If so, what syntax do I use for this specific size.

    Secondly, with the Genesis 2.0 and HTML5, what will this do to this plugin and the need for it? I’m rather new at responsive design.

    Thanks

    jc

  24. Hi Nick! I’m using the updated plugin on a client site: http://bloggerboutique.com/client1/ and I have a separate header for the homepage than I do for the blog page. The blog page is working beautifully with the responsive header, but of course, I’m having issues with the custom homepage (using .home #header for the selector). Any advice on how to make them both look good responsively? Thanks so much!
    Julie

  26. Thank you Nick for creating such great plugin.

    But I just don’t quite get how to use it properly. I uploaded all 4 logos of different sizes but there’s a white gap for 240, 320, 480px. I clicked “Show Height Option Fields” from your plugin but nothing is showing….Can you please tell me the exact steps to take to adjust the height manually? Also for 768px, looks like it just doesn’t pick up the logo that I uploaded — it still uses the original big one and chopped it.

  27. @Al ~ I see you’re using an Appfinite theme and it works. I am using Appfinite Epik and so far one thing doesn’t work for me. I can’t set the background color. My header stays stubbornly transparent.

    @nickthegreek ~ I found this plugin worked before I started using Genesis 2.0 and HTML5. I’ve also re-installed using 0.9, but still no background color.

  28. Hi All,

    I can’t get this plug-in to work for me. I uploaded the 4 images to the customize panel at the exact sizes. Do I have to update the functions.php file with some code?

    Currently I am using this CSS to display the logo header with an image I uploaded to our FTP. Do I need to disable and delete this code completely for the Responsive Header plug-in to work?

    .header-image .site-header .wrap {
    padding: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: url(images/logo.png);
    background-repeat:no-repeat;
    background-position: left;
    background-size: contain;

    }

    Any help / advice would be very appreciated!

    Thanks

  30. Hi Nick,

    Just to clarify, for your plugin to work does it require the logo to be the width of the header (say 960px width) OR can the logo image be the physical size of the logo (say 200px)?

  31. So i have the latest version of wordpress and Genesis, and using the child theme magazine. When I configure settings, and use the responsive header to upload my logo in .png it doesn’t show in my header. Is there something in my theme thats overriding the customizer? thanks

  32. Fantastic plugin, thank you! I’m using it with Genesis 2.1 and Prose theme for several sites that needed masthead help for mobile screens. Worked like a dream 🙂

  34. This plugin has made my life SO much easier! It works like a charm on all with all of the blog themes I’ve used for myself and clients except for one (and of course it’s one of my favorite themes!). Has anyone else had trouble getting this plugin to work with Ally by Appfinite?

    Thanks!

  35. Hi Nick – THANK YOU for creating and sharing this terrific plugin. I’m not much of a programmer so this sort of tool is wonderful for folks like me. I have a request: would you consider updating it to add support for the ipad in landscape mode? As you probably know, that’s one missing type of screen width that is a very common need. I don’t know understand how to customize this plugin to add support for that width. If that’s too much to ask, then perhaps you might list the steps here necessary to implement that width in the existing version.
    Thank you for considering this request.
    Sincerely,
    Tim

  36. Hello there. Thank you, Nick, for creating this plugin. It is allowing my blog header to show up correctly on mobile devices, which was a problem before. I was wondering if you or anyone might be able to help me figure out how to get this to show up correctly on the iPad in landscape orientation. I see that someone else had this same problem and seemed to figure it out, but I don’t know just where to plug the code in that you posted above. Can anyone tell me exactly where to put this code? Also, would I change the ‘960’ to 1024? Any help is greatly appreciated, so thanks in advance. 🙂

  37. Dear Nick,

    Thank you for creating this great plugin!

    I think it works as it should but unfortunately for me I’m not getting my desired outcome. I’m using header images of a smaller size. The standard size of my header image is 120 x 90 px. So for the smaller screens the widths of my image are 90, 60, 40 and 30. But somehow it shows very strange on my website. You can check it out by opening the site and playing around with the size of the browser to see what I mean.

    Do you have a solution for this?

    Thank you in advance!

    Sincerely,

    Hashim

  38. I have installed your plugin, have uploaded headers of the exact different sizes as in the default settings, and it is not showing.
    I have WP 3.6, Genesis 2.0.1 and use a child theme of Genesis Sample theme.

    What could be the issue? (I have read all comments here above in the hope to find an answer but could’nt find any help)
    Thanks

  39. Hi Nick,

    I installed the new plugin – all is working well but I notice when I zoom to 150% in my browser my ‘upper right’ widget pushes down underneath – can I setup my site so that it starts to ‘break’ at 768? thanks!

    Tim

  40. I know there’s got to be a way to get this to show up, but it doesn’t. I made the customizations under Appearance / Customize, and I’m using the given images, but they don’t show on the site. Unfortunately it’s on a dev server so it’s walled off to the world; I can’t post it here. No errors, and no other functions other than the ones that came with the theme and the remove edit link code. Using Genesis 2.0 and the eleven-forty-pro theme. Don’t even know where to look next. Very frustrating.

  42. Nick,
    I like your nickname “Nick the Geek”. Sammy Tan sent me here to download the responsive header image responsive plugin to use on a brand new site I am designing for some clients. I am new Genesis, so appreciate all the help I can get! Thanks for the plugin and the informative post on the subject!

    ~ Jupiter Jim

  43. I am using the Metro theme, and I assume that the code we put in will take care of any other custom header code in the functions.php?

    Thanks and this should be in all responsive genesis themes.

  44. Thank you so much for this plugin!!!! I am having two minor issues, both of which I can live with, but thought I would ask in the event there is something I could change to fix them 🙂

    1. Around 964px the header gets chopped off in my browser (firefox and safari)

    2. There is a gap between the nav section and the header when resizing.

    Thank you very much in advance!
    -Patrick

    • Here is what is in my functions.php file. Do I need to make changes here? I am using the latest ‘executive’ theme along with the latest genesis framework.

      /** Add responsive header sizes */
      add_filter( 'grh_media_sizes', 'my_grh_media_sizes' );
      function my_grh_media_sizes( $sizes ){
      //add 1140px device width to first position in the $sizes array
      array_unshift( $sizes, '1140' );

      return $sizes;
      }

      /** Child theme (do not remove) */
      define( 'CHILD_THEME_NAME', __( 'Executive Theme', 'executive' ) );
      define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/executive' );

      /** Add Viewport meta tag for mobile browsers */
      add_action( 'genesis_meta', 'executive_add_viewport_meta_tag' );
      function executive_add_viewport_meta_tag() {
      echo '';
      }

      /** Add support for custom header */
      add_theme_support( 'genesis-custom-header', array(
      'width' => 1140,
      'height' => 140
      ) );

  46. Has the Genesis Responsive Header plugin ever been in the WordPress plugin repository? Any plans for it to be there?

  47. Hope this might help someone:

    After upgrading Genesis to V2 and enabling HTML5 I found our responsive header stopped working.

    (I followed these instructions BTW)

    My solution was to go to Plugins > Installed Plugins Click Edit and choose output.php

    Look for the line starting:


    printf( '@media only screen and (max-width: %spx)

    Now change #header to just header and on the line below change #title-area to .title area

    Worked for me 🙂

    • Jared,

      Sorry, for some reason it is trying to load from a different directory. You can edit the output.php file and change the directory. I’ll be releasing an update when I get time that fixes this.

  50. Thanks for the plugin!

    But I’m currently running into a problem when I try to upload my own header image. It still has the old header text over the new image, which messes it all up.

    Any thoughts on what may be causing that to happen?

  52. Love this plugin! Have used it on several sites and it has made such a huge difference, thanks!

    Just tried it on a site for a client and this is the first time I am not being able to get the height of the header to adjust. I’m using Genesis 2.0.1 and Focus Theme 2.0.1. There is a huge gap below the header and the start of the navbar. Is there anything else I can try?

    Thanks!

    • Sorry I’d have to see the site to figure out why there is a gap. Most likely you need to run the height test or manually set the height of the images at the given sizes.

  53. I’ve installed the plugin, configured it (love the changes, btw… It makes so much more sense to put it in the theme customizer). I can see that I’ve uploaded new, smaller logo images in the theme customizer but I am unable to see the changes reflected on the site. I’ve cleared my cache both in my browser and at my host… I’ve tried to view it in a few different browsers. No change. Anything I’m missing?

    http://victoriamunoz.flywheelsites.com/preview

  54. Hey, Nick – installed your plug-in today to change out the Metric child theme logo.png found in the theme > metrics > images folder. I went into Appearances > Customize and got the Responsive Header sidebar. I put in a 320px Logo Image (and it is there I can see it) and set a background color. I made sure my Genesis > Theme settings, that Use for title/logo = Image logo. But, not working – showing the default log. Was I suppose to put in some code in the functions.php file? I did not follow some of the discussion above. thanks!

  56. Hey Nick — I have tried this plugin on multiple Genesis themes (Metro Pro, Education, and Augustus from Web Savvy) and have not gotten it to work on any. I have no idea what I’m doing wrong. I went to Appearance > Customize, uploaded a 768px x 225px header image and pressed Save & Publish. No change.

    I ultimately need it to end up on http://honolulu.directrouter.com/~kmgvesbk/
    I wondered if the temporary URL was the issue and tried the plugin also at http://test.11web.com/sandbox/ . No luck there either.

    Any help would be tremendously appreciated. Thank you!
    Sara