• Registered: 2010-08-18
  • Posts: 27
  • User Karma: 1

Topic: Social Media Buttons?

As standard int he them there is provision for a twitter and rss button, is it possible to add a youtube and flickr one too?

Fingers crossed phase one of my site will be done in the next week  smile

Thumbs up

  • Registered: 2010-07-25
  • Posts: 13

Re: Social Media Buttons?

xtreme,

I too was looking at doing this.  Here is what I found:

In the header.php file look for this code:

<ul class="quick-nav clearfix">
<?php if ($feed == '') : ?>
                <li><a id="rss" title="<?php printf( __( '%s RSS Feed', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php bloginfo('rss2_url'); ?>"><?php _e('RSS Feed', 'arras') ?></a></li>
            <?php else : ?>
                <li><a id="rss" title="<?php printf( __( '%s RSS Feed', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $feed; ?>"><?php _e('RSS Feed', 'arras') ?></a></li>
            <?php endif; ?>
            
            <?php $twitter_username = arras_get_option('twitter_username'); ?>
            <?php if ($twitter_username != '') : ?>
                <li><a id="twitter" title="<?php printf( __( '%s Twitter', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="http://www.twitter.com/<?php echo $twitter_username ?>/"><?php _e('Twitter', 'arras') ?></a></li>
            <?php endif ?>
            
            <?php $facebook_profile = arras_get_option('facebook_profile'); ?>
            <?php if ($facebook_profile != '') : ?>
                <li><a id="facebook" title="<?php printf( __( '%s Facebook', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $facebook_profile ?>"><?php _e('Facebook', 'arras') ?></a></li>
            <?php endif ?>
        </ul>

Just under the first 

<ul>

at the top add in your code for your graphic and your link to the service and surround it with the 

<li></li>

codes.

For Example:

<ul class="quick-nav clearfix">
<li><a href="http://yourtube.com/mymarketingmentor" target="_blank">YouTube</a></li>   <== NEW LINE OF CODE            
<?php if ($feed == '') : ?>
                <li><a id="rss" title="<?php printf( __( '%s RSS Feed', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php bloginfo('rss2_url'); ?>"><?php _e('RSS Feed', 'arras') ?></a></li>
            <?php else : ?>
                <li><a id="rss" title="<?php printf( __( '%s RSS Feed', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $feed; ?>"><?php _e('RSS Feed', 'arras') ?></a></li>
            <?php endif; ?>
            
            <?php $twitter_username = arras_get_option('twitter_username'); ?>
            <?php if ($twitter_username != '') : ?>
                <li><a id="twitter" title="<?php printf( __( '%s Twitter', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="http://www.twitter.com/<?php echo $twitter_username ?>/"><?php _e('Twitter', 'arras') ?></a></li>
            <?php endif ?>
            
            <?php $facebook_profile = arras_get_option('facebook_profile'); ?>
            <?php if ($facebook_profile != '') : ?>
                <li><a id="facebook" title="<?php printf( __( '%s Facebook', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $facebook_profile ?>"><?php _e('Facebook', 'arras') ?></a></li>
            <?php endif ?>
        </ul>

You would need to create the code and include it for a graphic (The example is only for text. )

When I tried adding this bit of code it showed up on the header bar next to the other buttons.

Good luck,
Cindy

Last edited by cindy (2010-09-10 14:45:09)

Thumbs up

  • Registered: 2010-04-08
  • Posts: 13
  • User Karma: 1

Re: Social Media Buttons?

Coincidently, I've been unable to find that in my Header.php... I don't think it helps that the actual file is a lot more cluttered.

Thumbs up

  • Registered: 2010-09-11
  • Posts: 2

Re: Social Media Buttons?

Actually, you'll find reference to the social media icons under function arras_social_nav() in template.php

In addition to adding the call, you need to edit your respective stylesheet.

If you're using default.css, this is what you need to look for:

.quick-nav li            { padding: 5px 0 0 8px; }
.quick-nav a:link, .quick-nav a:visited    { display: block; text-indent: -9000px; width: 16px; height: 16px; float: left; clear: left; opacity: 0.6; }
.quick-nav a:hover  { opacity: 1; }

.quick-nav #rss            { background: url(../../images/rss.png) no-repeat; }
.quick-nav #twitter        { background: url(../../images/twitter.png) no-repeat; }
.quick-nav #facebook    { background: url(../../images/facebook.png) no-repeat; }

Last edited by TheCriticalPath (2010-09-11 23:23:18)

Thumbs up

  • From: Netherlands
  • Registered: 2010-01-25
  • Posts: 4,159
  • User Karma: 310

Re: Social Media Buttons?

kouri01 wrote:

Coincidently, I've been unable to find that in my Header.php... I don't think it helps that the actual file is a lot more cluttered.

That's because it isn't in Arras 1.5 anymore. Arras uses an action hook for that.

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

extatix's Website

Thumbs up

  • Registered: 2011-08-18
  • Posts: 7

Re: Social Media Buttons?

thank you all for this thread, ive been searching forever trying to figure out how to add more social media icons. for anyone's reference, here's what i did:

find in template.php (line 360 approx):

    <?php $facebook_profile = arras_get_option('facebook_profile'); ?>
        <?php if ($facebook_profile != '') : ?>
            <li><a id="facebook" title="<?php printf( __( '%s Facebook', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $facebook_profile ?>" target="_blank"><?php _e('Facebook', 'arras') ?></a></li>
        <?php endif ?>

below that paste:

        <li><a id="youtube" title="<?php printf( __( '%s YouTube Channel', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="http://youtube.com/user/punknomadtv"><?php _e('YouTube', 'arras') ?></a></li>

change as needed for whatever social service you're adding of course. then:

open style.css (preferably in your child theme) and add to the bottom:

/* Social media icons */

.quick-nav #youtube        { background: url(../arras/images/youtube.png) no-repeat; }

obviously your class id should match that in the code in template.php, and the path to the image might be different if you're not using a child theme. upload the images to the correct folder and you're done. yay!

http://www.arrastheme.com/forums/misc.php?action=pun_attachment&amp;item=881&amp;download=1&amp;secure_str=18303t3173

Last edited by omensandportents (2012-01-25 22:36:05)

Thumbs up