Responsifying the Graphene header

  • Julie @Niackery


    Hi there,

    I’m using the Responsify WP plugin, based on picturefill, to serve different image sizes to different devices. There is a way to add picture::create() to the site header, but neither myself nor the plugin author have been able to get it to work with Graphene theme due to some complication with the image source.

    The plugin author has spent a lot of time with me on this, he downloaded Graphene, and the only way he’s made it work is if he hardcodes it, which he says we don’t want to do (I don’t know what it means so I believe him!).

    It looks like we need some extra help. Would someone from Graphene mind taking a look at the thread at to see if there might be something you can do? I would really appreciate it! The thread is located here.

    Thanks in advance for any advice you can offer!


    Kenneth John Odle

    the only way he’s made it work is if he hardcodes it,

    Try creating a child theme, and add a modified header.php (or whatever file he’s modding) there.

    Julie @Niackery


    Thanks for getting back to me, Kenneth.

    Perhaps there’s something I’m not getting, but I don’t see how that will help. As the plugin author says, the problem is with Graphene’s treatment of the image source. Did you check out the link? Here’s the relevant part:

    I downloaded the Graphene theme and played around with it myself. The graphne_get_attachment_id_from_src() function doesn’t seem to work, it just returns null.

    RWP has an internal, similar function but that doesn’t work either.

    I don’t really know any good solution to this actually. The problem in this case is rather the way the theme is made than how RWP is working.

    However, by hard coding the ID of the selected header image I got it working perfectly. It’s just the hard coding stuff we don’t want…

    So I’m not sure that creating a new template would actually solve anything? Besides, the plugin author is just helping me figure out how to get the code working, he’s not writing any templates or files for me or anything, so I’m not quite sure what you mean by that?

    I’ve been trying to figure out what it means to hard code something because that seems to be the key to me understanding this issue. All I can really come up with at this stage is that hard coding simply means using something precise rather than a code, so in this case, I believe that would mean putting the header img url directly in the file. If I’m right about that, then wouldn’t creating a child theme with a modified header.php file still involve hard coding the img source?

    Sorry about my confusion! I appreciate your help 🙂

    (BTW, I already have a child theme, I just haven’t finished transferring the theme options/settings, nor have I had a real reason to use it, so it’s kind of just sitting there, inactive…)


    Kenneth John Odle


    When you said “hardcode” I assumed that he was adding code for his plugin directly into a Graphene theme. Unfortunately, he’s not adding code, he’s adding the ID for the image in question.

    If all you are using this plugin for is the header image, then I suppose you could go ahead and hardcode it in a child theme. But really, you may just want to use a mobile theme for mobile.

    BTW, you could use a little more contrast on your site. It would make it easier to read across all devices.

    Also, you have this in your CSS:

    .menu-item a {
    font-family: Bad Script;
    font-size: 20px;

    You really should specify a back-up font, in case the “Bad Script” font isn’t available.

    Julie @Niackery


    Thanks for clearing that up — it’s all starting to make sense.

    I’m using Responsify WP to make all images within the_content responsive (based on picturefill and the <picture> element). There’s the additional possibility of using picture::create() to make the header image responsive as well. Basically, we’re trying to make this work:

    <div id="header">
    $header_id = graphene_get_attachment_id_from_src( $header_img );
    if ( ! is_front_page() && $graphene_settings['link_header_img'] ) {
    $header_img_tag = '<a href="' . apply_filters( 'graphene_header_link' , home_url() ) . '" title="' . esc_attr__( 'Go back to the front page', 'graphene' ) . '">';
    $header_img_tag .= Picture::create( 'element', $header_id );
    $header_img_tag .= '</a>';

    $header_img = $header_img_tag;
    echo $header_img;

    So I’m still not sure whether a child theme would be the way to go, but if it is, at least I’m half way there 😉 I hope you don’t mind coming back one more time to confirm whether that’s what I should do.

    Regarding a mobile theme, I’m really just trying to build a responsive website without a separate mobile theme. I feel like I’m almost there!

    Thanks for checking out my site and for your advice 🙂 I thought the default fonts were automatic! Oh, le sigh…

    Julie @Niackery


    Hmm, I still haven’t gotten anywhere with this. Since I’m using the plugin for all images and not just the header, I’m sure that the hardcoding solution via a child theme isn’t right. Could someone please take a look at the graphene header image code to see why pulling the header image source with picture::create() isn’t working? Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

  • You must be logged in to reply to this topic.