Link to home
Start Free TrialLog in
Avatar of RhemaTek
RhemaTek

asked on

social media widgets in Wordpress

Hi.  I downloaded and configured the social media widget for Wordpress.  I wanted to see the icons in my header so I coded in a widgetized header which showed up fine.  However, my social icons are not showing up.

I also tried code in the styles.css which worked except the social media icon shows up in a charcoal gray color.  Also, in this scenerio I also had to configure menus and did not like how my menus showed up.

I'd rather use the social media widget as it didn't change any of the menu formatting.
Thanks!
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

the social media widget for Wordpress

Which one?

so I coded in a widgetized header which showed up fine.  However, my social icons are not showing up.

What exactly did you do?

I also tried code in the styles.css which worked except the social media icon shows up in a charcoal gray color.

What code?
Avatar of RhemaTek
RhemaTek

ASKER

Which one?

I used the Social Media Widget version 2.9.3

Used following to modify Functions.php

/* Code Used to Widgetize Header
------------------------------------------------------------ */

// Area 7, located in the header. Empty by default.
      register_sidebar( array(
            'name' => __( 'First Header Widget Area', 'twentyten' ),
            'id' => 'first-header-widget-area',
            'description' => __( 'The first header widget area', 'twentyten' ),
            'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            'after_widget' => '</li>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
      ) );      

      // Area 8, located in the header. Empty by default.
      register_sidebar( array(
            'name' => __( 'Second Header Widget Area', 'twentyten' ),
            'id' => 'second-header-widget-area',
            'description' => __( 'The second header widget area', 'twentyten' ),
            'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            'after_widget' => '</li>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
      ) );      

}


What exactly did you do? & What code?


This is the process of creating menus (I'd rather not use this because it modify's the look and placement of menus and submenu's that are already formatted the way I want them.

Created Menus Then used the following code in my styles.css

/* Code Used to manually create Social Media Icons
------------------------------------------------------------ */

#header ul li.social-facebook a,
#header ul li.social-facebook a:hover,
    display: block;
    height: 32px;
    margin: 0 0 0 10px;
    padding: 0;
    text-indent: -9999px;
    width: 32px;
}
#header ul li.social-facebook a {
    background: #333 url( \wp-content\plugins\social-media-widget\images\default\32\facebook.png);
}
#header ul li.social-facebook a:hover {
    background: #000 url \wp-content\plugins\social-media-widget\images\default\32\facebook.png);
}
Can I get a link to the site too to see what the results are?
Sure.  Can I email it to you?
Better to post it here.  Munge it so search engines don't follow it:

dubdubdub dot yourdomain dot com
dubdubdub(dot)wesharehope(dot)org(dot)php5-1.dfw1-2.websitetestlink.com/WPINSTALL/wp-admin/index.php
Hello.  Does anyone have a solution to this issue?
Thanks
Sorry, I took the weekend off for Mother's Day.  I'll be looking at this again tonight.  Am I supposed to access the wp-admin though?
No problem.  The site is not yet in production so it'll be fine as long as I don't give you a login.
I just peeked at it and I don't see any social icons at all.  Can you enable the desired plugin or icons so I know what to fix?
That's the problem.  No social icons show up at all.  They are configured and pointed to but they aren't appearing??  Even if I use the code below I see that they are pointed to but aren't appearing.  I even moved them to the root to see if my pointers were wrong just for test.  It should be as easy as setting up code for widgetized header then configuring the social media widget then dragging it to the header?

Right now only Facebook is setup in social media widget but as you can see it's not in the header?

If I configure them manually they show up with a charcoal gray box.  I can click on the box and it goes to the social media site.  I don't want to set it up manually because when I do it changes the whole look of the header and tabs.

Ideally like to get the social media widget working.
Thanks!
Check your header.php to make sure the widgetized areas are being called.

You should see

<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>

somewhere in the code.
Okay I don't have that code in my header.php.  I did add it and update but then the site just comes up with a blank page.  I did try moving the code around within and outside of the branding tags.  
What exactly does that bit of code do for me?  I am not using sidebars at all.  I want the social icons inside of the header on the right hand side.  Preferably inside of a box.

Also, how does the social media widget know which default icon to use?  See attached file.
social-media-widget.jpg
That code is what calls the widgetized area and I'm not surprised it broke your theme as is.  The functions you posted higher up are only half the process.  Those functions create the area on the backend to add widgets but you still need to update the front-end display with a function that calls and displays it.

It failed because it isn't the exact correct code.  When you have multiple widget areas, each one is assigned a number and each of those display functions must call the correct number in order to know which widgets to display. Furthermore, the before-widget and after-widget parameters in the backend functions come into play as those entries determine how to wrap the widget code and thus provide the basic HTML container so you can control it with CSS.

This isn't the way I would choose to do this.  Using a plugin that creates a widget that you are trying to adapt to the header is a recipe for frustration because the plugin author is assuming you are going to embed the widget in a sidebar.  The code of the widget is optimized for a more vertical display and you are aiming for something that is more inline and you also need to watch out for the menus, etc.

Instead, I would create a child theme for your current theme and copy the header.php file to the new child.  I would then edit the header.php and the child CSS files to add my preferred icons exactly where I wanted them.  By doing this in a child theme, you make it update-proof and it actually ends up being less work.
Okay.  Not sure where to start but... That is what I did with all of the code...  So instead I created a wigitized header "sidebar"  updated the header.php and function.php and installed the widgetized media icons.  This should have worked.

What you are describing took away all of the formatting on the tabs so if you looked at the home page (and others) the tabs are moved away from the header and are not nicely formatted with sub tabs, etc then they wrap.  The icons did appear in the header but again they are not the typical icons they are charcoal color.  Everyone keeps telling me it should work the way I want it to but no one knows why it doesn't.

Why have the widgetized media icons then?  I'm missing something here.  I did created the widgetized header.  i am attaching it here.  Why won't this work the way it is?  I don't want to have to go through and code everything to recode everything again to make my header and tabs look the way I want them.  It sounds like much more work.  I do plan on creating other sites with wordpress but many don't want the sidebars or this would have worked right off the bat.

How are others just getting it to work with the social media widget app.  Every youtube video I watched to get the icons into the header show it almost as easy as install, drag and drop then configure??
Thanks!
widgetized-header.jpg
updated the header.php and function.php and installed the widgetized media icons.  This should have worked.

Can you post your header.php?  Haven't seen that code yet.

What you are describing too away all of the formatting on the tabs so if you looked at the home page (and others) the tabs are moved away from the header and are not nicely formatted with sub tabs, etc then they wrap

Which is fixable via CSS.

Everyone keeps telling me it should work the way I want it to but no one knows why it doesn't.

To be honest, it's hard to diagnose this stuff from a forum without seeing all of the code interact, edits to the theme, etc.  All I can see now is the wp instance at the link and whatever PHP you are inserting isn't evaluating properly because I don't see any evidence of a new widget showing up in the header in view-source.

I did created the widgetized header.

You created a header widget on the backend correctly.  What I am questioning is if you are calling it correctly on the front end using the wholly proper PHP code.  So let's take a look at header.php to see it.
It is my understanding that there is no header.php modification if you are using the social media widget as long as you created the header.  If I go ahead and modify the header with the code used above that is the manual that I was talking about that is ugly and much drawn out on the page.  Here is a quote that I found when creating them in the first place

 "you can use widgets if your theme support widgets. so no need to worry about php code placement.."

I can send you my login via email but cannot post it here.
Let me try to replicate first.  What theme are you using?  TwentyTen?
Yes twenty ten, thanks!!  

I did use the code that you sent to call on the front end.  It left me with a blank white page.  I backed up the site before making changes each time so that I could restore because as you know code can be very long and time consuming.  I used other code that others had suggested early on and it left me with the header and nothing else not even the icons.

I believe I used social media widget plugin version 2.9.3.  I tried many and none worked but I do like this version best.

I did have it working in the sidebar but they  want the sidebar.  I see that other people are doing this in the header but I see many people do have issues with it too...

Let me know if you want the user and pass for my site.  It's not in production yet so it's fine.

Thanks!!
Hello.  Were you able to replicate my issue?
Thanks!
ASKER CERTIFIED SOLUTION
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Okay.  Let's take this step by step...  I added id' => 'first-header-widget-area to my .css.  I assumed that I'm taking the parenthesis out... Now all I get is the blank white page again.  Does it matter where in the .css I add this code?

Where exactly am I adding before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',  AND "after_widget' => '</li>'  Again assuming I am taking the parenthesis out.

After we get by this we can work on the rest of the code you sent?
Thanks!!
I assumed that I'm taking the parenthesis out.

Huh?  What parentheses?

All of the code I sent is cut-n-paste ready.  There are only three things to deal with...the final widget code:

 // Area 7, located in the header. Empty by default.
      register_sidebar( array(
            'name' => __( 'First Header Widget Area', 'twentyten' ),
            'id' => 'first-header-widget-area',
            'description' => __( 'The first header widget area', 'twentyten' ),
            'before_widget' => '<div id="%1$s" class="widget-container-%2$s">',
            'after_widget' => '</div>',
            'before_title' => '<span class="widget-title-hide">',
            'after_title' => '</span>',
      ) );  

Open in new window


The final CSS code:

#social-widget-2 {
 width: 100px;
 display: inline;
 float: right;
 margin-bottom: -100px;
 margin-right: 20px;
}

Open in new window


And the embedding of the call to the widget in header.php

<div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>

Open in new window


Does it matter where in the .css I add this code?

Nope.  I always add custom code to the very end of styles.css though.
Okay.  I'm checking this in steps because trying to figure where the code is going wrong.  After adding div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') |
to the header.php.  I get the white screen again??
<?php if ( !function_exists('dynamic_sidebar') |

Open in new window


There's a lot more code after the |
Okay.  My mistake.  I didn't take all of the code.  So far, so good.

Where exactly am I putting div class="widget-container-Social_Widget" id="social-widget-2">
   <div class="socialmedia-buttons smw_left">
       <a target="_blank" rel="nofollow" href="http://twitter.com/#!/ExpertsExchange">
       <img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="http://localhost/wordpress/wp-content/plugins/social-media-widget/images/default/32/twitter.png"></a>
      <a target="_blank" rel="nofollow" href="mailto:"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on E-mail" alt="Follow Us on E-mail" src="http://localhost/wordpress/wp-content/plugins/social-media-widget/images/default/32/email.png"></a>
  </div>
</div>

By parenthesis I meant here in the folowing code: “before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
Where exactly am I putting div class="widget-container-Social_Widget" id=

Nowhere.  I was going through what happens when we add the widget code and why we need to get rid of the li tags.

By parenthesis I meant here in the folowing code: “before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',

Still not seeing any parentheses above.
Quotation marks.  It's all starting to look garbled to me at this point.
The quotes shouldn't be "fancy" quotes like this: “

The should be the normal quote:  "

I composed that long post in LibreOffice...it may have done a substitution on the double quotes even though I thought I disabled that feature.
Okay... I had to take out the  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>  because it ended up with double social media icons.  One in the top left and one in the bottom right.  Getting closer though.  I added the
#social-widget-2 {
 width: 100px;
 display: inline;
 float: right;
 margin-bottom: -100px;
 margin-right: 20px;
}

To the .css but still not in my header.  Also don't like the div id="site-description">
Follow Us On Facebook! in the left corner under the widget.

You are good though!  Thanks!
because it ended up with double social media icons.

You may have had it in there twice?

Also don't like the div id="site-description">
Follow Us On Facebook! in the left corner under the widget.

You definitely did something wrong.  That's HTML code showing up in the text which means you may have placed something in the wrong location, duplicated tags, or some other error.
How do I get my social media icons in the header to look like yours?
By using the code I posted in:

http:#a37993178

Make sure you place the call to the widget area properly in header.php and also make sure no "fancy" quotes snuck into the code.
I did all of this.  If I add <div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>  then I get double icons.  
                                           
Also I don't have div id="site-description"> in there twice:  This where it is located in code.  I checked everywhere else and don't see anything.

<div id="main">
div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>

The Join us on Facebook and Facebook was found in the social media icon setup.

This should have been much more simple as the social media icon instructions...
Okay.  I got rid of the div id="site-description">  I was missing the first marker after looking at the source code in HTML I was able to see it.

I'm still working on trying to place my icons in the header.
Thanks!
I still don't have the placement right.  If I put your code in I get white screen.  What else could it be?
Thanks!
If I put your code in I get white screen.

You are placing the code in a location so that you are breaking a PHP loop or something with the HTML.  I'm not able to tell you any more than that from over here.
This is my header. php

With the code you gave me included.  I also tried to take out the code that was already there and just at the end of your but it still ended up with doubles but with that it was in the top right hand corner.

<?php
/** 

* The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">
			<div id="branding" role="banner">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
				<<?php echo $heading_tag; ?> id="site-title">
					<span>
					<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
					</span>
				          </<?php echo $heading_tag; ?>>
				

				<?php
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
							has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
							$image[1] >= HEADER_IMAGE_WIDTH ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID );
					elseif ( get_header_image() ) : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
					<?php endif; ?>
			</div><!-- #branding -->

			<div id="access" role="navigation">
			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>			

</div><!-- #access -->
		</div><!-- #masthead -->
	</div><!-- #header -->

	<div id="main">
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>

Open in new window

I left it in there.  Take a look at my site to see what I'm talking about.  I'm thinking if I disable the social media widget plugin then I might not have the problem??
It's duplicating because you have calls to dynamic sidebars on lines 88 and 96.  A simple search in a code editor on "dynamic_sidebar" would have shown that...
I just told you that I knew that but tried it without and got the same outcome but in the upper right hand corner.  I'll take it out and show you.
I'm sorry but need to take this back a couple of steps.  I put my header back to the original because I entered too much code and obviously didn't know what the heck I changed at this point...

Also, I don't know where in the header to put the code that you sent because I think that I am putting both sets in the wrong place.

So can we please start with the placement in the header.php with the following code?

div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>

This is the code that I took out to begin with because I was ending up with two sets.  If you look at my header now I don't have any social media icons at all because I rolled it back to take it step by step to see what is going wrong.  I cannot be the only person having this problem but found no solutions on the net.
In a default header.php in twentyten, the following line exists:

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Place <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?> directly under that line.
Okay so now...  Am I replacing everything in the branding area or adding to it?  You said that I must be placing it in the wrong area.

Here is the code you sent:

<div id="branding" role="banner">
                        <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
                        <<?php echo $heading_tag; ?> id="site-title">
                              <span>
                                    <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                              </span>
                        </<?php echo $heading_tag; ?>>
                        <div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>
I'm just showing you where the one line goes to achieve the effects I show in the screenshot.
I was asking where do I put the next set of code in the header.php.  I had it withing the branding sets of code bbut then that gave me double icons.  I want to be sure where I am supposed to place it.  My icons are in the upper right hand corner above the header.  I want the placed like yours are in the header.  Check out my site if you need to see what I'm talking about.
Thanks!

Here is the code you sent:

<div id="branding" role="banner">
                        <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
                        <<?php echo $heading_tag; ?> id="site-title">
                              <span>
                                    <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                              </span>
                        </<?php echo $heading_tag; ?>>
                        <div id="site-description"><?php bloginfo( 'description' ); ?></div>
                                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("First Header Widget Area") ) : ?><?php endif; ?>
There is no next set of code.  All you want to do is add the one line as above.  Now the social media widget will generate icons.  You then modify the placement of the widget via CSS.
Okay.  If you look at my site then you will see that the icons are there but not in place.  I was thinking that maybe something is off in my .css?  I have done so much with this site that maybe there are too many comments in my .css??
Thank you for your help so far!
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.