Inserting an image widget in the header space above the tag line

Support Area Forums Foundation Inserting an image widget in the header space above the tag line

Viewing 11 posts - 1 through 11 (of 11 total)
URL to the page in question:
  • Author
    Posts
  • #9229
    PL2VETS
    Participant

    Hi Bill

    Well, this time we’d like to know if it is possible to insert an image widget in the header space above the tag line where we will insert our social media icons and then link them to our social sites.

    Is this possible?

    Jeff

    #9236
    Bill Robbins
    Moderator

    Jeff,

    The good news is just about anything can be done, though sometimes it may take a bit of work to make it happen. Here’s what you would need to do to add in a sidebar to your header.

    Add Sidebar

    1. Go to the Appearance section and select Edit.
    2. From the list of files on your right, choose widgets.php and look for this spot:
      
      		register_sidebar( array(
      			'name' => __('Sponsor Sidebar', 'organizedthemes'),
      			'id' => 'sponsor_sidebar',
      			'description' => __('Sidebar for the sponsor section', 'organizedthemes'),
      			'before_widget' => '
      ', 'after_widget' => '
      ', 'before_title' => '

      ', 'after_title' => '

      ' ) );
    3. Right below that paste this:
      
      		register_sidebar( array(
      			'name' => __('Header Sidebar', 'organizedthemes'),
      			'id' => 'header_sidebar',
      			'description' => __('Sidebar for the header', 'organizedthemes'),
      			'before_widget' => '
      ', 'after_widget' => '
      ', 'before_title' => '

      ', 'after_title' => '

      ' ) );
    4. Save your changes

    That should add in the spot where you can load your widget into the header.

    Edit Header

    1. In the theme editor, choose header.php and find this spot:
      
      <?php if(of_get_option('tagline_include') == 'yes') { 
      
    2. Right above that paste this:

    3. Save your changes.

    That should load the widgets into your header.


    If you’ll do that and add in the widget you’d like to use there and let me know, I’ll send over the styling to make it fit into your site. Without seeing the widget in action, any styling would just be a guess.

    Thanks,
    Bill

    #9246
    PL2VETS
    Participant

    Hi Bill

    Added both sets of code into each area. Don’t see any widget in the header other than the plugin and image widget for Twitter I added the other day but that does not show up either.

    Any suggestions?

    Thanks

    Jeff

    #9247
    Bill Robbins
    Moderator

    We’re you able to add a widget to the new sidebar, in the widget admin screen?

    #9250
    PL2VETS
    Participant

    I have had no problem with adding the sidebar widgets. Its just getting the widget into the header so I can place social media icons there and no in the menu bar.

    Jeff

    #9254
    PL2VETS
    Participant

    Here is the code as you suggested putting it in on lines 11-13. I included code above and below to show its placement. Maybe I am just overlooking the obvious. 🙂

    ‘.get_bloginfo(‘description’).’

    ‘;
    } else {
    echo ‘

    ‘.get_bloginfo(‘description’).’

    ‘;
    }

    } ?>

    Jeff

#9255
Bill Robbins
Moderator

Here’s what the header.php file could look like:

Here’s the widgets.php file:

Try replacing them and see if that helps

#9264
PL2VETS
Participant

Hi Bill

If I understand your post, I am to completely remove all the code for the header.php and the widgets.php files and replace each with the entire respective string of code for each above. Am I correct on this?

Thanks for the help.

Jeff

#9266
Bill Robbins
Moderator

Jeff,

Let’s try it that way. I think the problem was in the code for widgets.php, so you might try replacing that first.

Let me know what you run into.

Bill

#9268
PL2VETS
Participant

Hi Bill

I replaced both sets of code. The T, F and V standard white icons show now above the menu bar, and we can adjust the -vertical limits to achieve proper placement but these are not the icons we want to use. We have specific colorful icons we’d like to add to the widget. This is what we are trying to accomplish.

I’ve added an image widget inside of the header widget area but that does not show up in the header area either.

How can we add these specific icons to the header widget area?

Thanks

Jeff

#9283
Bill Robbins
Moderator

If you have the icons you’d like to use, the easiest thing would be to add the links directly inside the header.php file. To do that you would first need to upload each image into your WordPress media library and copy the URL’s to each image.

Then edit the header.php file and right above this line:


<div id="navigation" class="shadow clearfix">

You could add something like this:

The top line would be a link to Facebook. You would need to replace the http://facebook.com with the URL to your Facebook page and the http://yoursite.com/facebook.png with the URL to your Facebook icon. Do the same for Twitter. To add another icon, just copy one of the lines and paste it above the </div and make the necessary changes to point to that service.

Once your finished, save your changes.

Give that a try and see if it’s easier.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Inserting an image widget in the header space above the tag line’ is closed to new replies.