ThemeShaper Forums » ThemeShaper WordPress Themes


Adding social icons next to the RSS icon on front-page.php

(8 posts)
  • Started 11 years ago by lancedevenson
  • Latest reply from lancedevenson
  • This topic is not resolved
  1. I want to add my other social icons next to or on the same base line as the RSS icon is now. Can anybody describe to me how I could do that? I have explored the numerous pluggins that will let you easily add them to the right side of my posts but nothing on my front-page.php.

    Posted 11 years ago #
  2. Thank you Devin, Here is my original post again with a slight mod to my question. Hopefully you will be able to reply to this one. I will post my code below.

    I want to add my other social icons to my front-page.php. I have figured out how to add them to every other page and post but not the front-page.php. Here is my front-page.php code.

    Template Name: Front Page
    Take a look at the functions.php for this theme to see how the random content is included.
    <?php get_header() ?>
    	<div id="container" class="feature">
    		<div id="content">
    		  <div id="sub-feature">
                <div id="front-block-1" class="front-block block">
                  <h3>What's the idea behind the "Featured Artist" section?</h3>
                        $user_info = get_userdata(1);
                        $gravatar_email = $user_info->user_email;
                        echo get_avatar($gravatar_email, '84');
                  <p>I thought it would be cool to create an area, for local design students to post artwork and videos. My hope is that we can help direct and prepare these young professionals for the challenges this field presents. Many of us are here because we love what we do. These guys are here for the same reason. Lets give them some direction.</p>
                      <p><a href="<?php echo get_option('home') ?>/?page_id=169/" rel="nofollow">Check out the featured artist</a></p>
                </div><!-- #front-block-1 .front-block .block-->
                <div id="front-block-2" class="front-block block">
                  <h3>Recent Items From <?php bloginfo('name') ?> <a href="<?php bloginfo('rss2_url') ?>" title="<?php echo wp_specialchars(get_bloginfo('name'), 1) ?> <?php _e('Posts RSS feed', 'thematic'); ?>" rel="alternate nofollow" type="application/rss+xml"><img src="<?php echo dirname( get_bloginfo('stylesheet_url') ) ?>/images/feed-icon-14x14.gif" alt="RSS"/></a></h3>
                  <ul id="recent-items">
                      $recentPosts = new WP_Query();
                  <?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
                      <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
                  <?php endwhile; ?>
                        <li class="more-items"><a href="<?php echo get_option('home') ?>/blog/page/2/">More recent items <span>ยป</span></a></li>
                </div><!-- #front-block-2 .front-block .block-->
              </div><!-- #sub-feature -->
    		</div><!-- #content -->
    	</div><!-- #container .feature -->
    <?php get_footer() ?>
    Posted 11 years ago #
  3. Here is the response Devin at WordPressThemeing sent me.

    For some reason I can't post a reply to your question in the forum. Maybe you could try posting it again. Here's my response:

    I think a good spot would be to the right of your menu items, that way you could have it on all pages in a very prominent spot. Try adding this to your child theme functions file:

    //  Add a dynamic menu using wp_list_pages
    function childtheme_menu() { ?>
        <div class="menu">
             <ul class="sf-menu">
                   <?php wp_list_pages('title_li='); ?>
             <ul class="sf-menu" style="float:right">
                   <li><a href="#" class="rss">RSS</a></li>
                   <li><a href="#" class="facebook">Facebook</a></li>
                   <li><a href="#" class="twitter">Twitter</a></li>
    <?php }

    Then you could use your css to replace the text with icons, here's a quick untested example:

    a.twitter {display:block; text-indent:-9999px; width:20px; height:20px; background: url(images/twitter.png);}

    If you prefer to have it where you asked, please paste the front-page.php code so I can figure out how that works.

    Posted 11 years ago #
  4. After recieving my front-page.php she sent this back to me:

    For some reason it won't let me post in the thread. Could you post what I wrote to you in case others want to weigh in?

    This is the section of code that generates the RSS:

    <h3>Recent Items From <?php bloginfo('name') ?> <a href="<?php bloginfo('rss2_url') ?>" title="<?php echo wp_specialchars(get_bloginfo('name'), 1) ?> <?php _e('Posts RSS feed', 'thematic'); ?>" rel="alternate nofollow" type="application/rss+xml"><img src="<?php echo dirname( get_bloginfo('stylesheet_url') ) ?>/images/feed-icon-14x14.gif" alt="RSS"/></a></h3>

    So, you could change this to something like:

    <h3 style="float:left; width:200px;">Recent Items From <?php bloginfo('name') ?></h3>
    <div class="social" style="float:left; width:100px"> <a href="#">Facebook</a><a href="#">Twitter</a></div>
    <div style="clear"></div>

    Hopefully that gets you pointed in the right direction.

    Posted 11 years ago #
  5. Oh, looks like I can post now. Did that solve your problem?

    Posted 11 years ago #
  6. Thanks for checking in. Im sorry I'm really not good at this. I've been reading everything I can get my hands on for the past month since deciding I wanted to learn code and I still don't get it exactly. I loved your suggestion of right of the menu. That area according to firebug is <div id="access" Now I have no idea if I have to put the original code you gave me close to that in my functions.php or can just past it on the bottom? I tried to just past it at the bottom and it gave me this error when I refreshed the site. Parse error: syntax error, unexpected '}' in D:\Hosting\6014256\html\wp-content\themes\thematicfeaturesite\functions.php on line 203. I don't think I am closing the php code correctly. Any advice?

    Posted 11 years ago #
  7. i get blocked from posting every now and then too.

    @lance - i have been doing a lot of php learning recently myself... and have run into a gazillion parse errors. you need to be sure that you:

    open and close the php tags correctly and end lines with a semicolon
    open and close all arrays with parens
    open and close all if, while, foreach conditions with parens
    open and close all if, while, foreach statements with curly brackets
    open and close all functions and classes with curly brackets

    it is impossible for anyone to tell you what your error is w/o seeing the code. the error is usually on the line referenced in the error code, but not always. sometimes you need to look above it to find the culprit...for instance a } that appears too soon will be seen as the closing bracket and so then your real closing bracket becomes 'unexpected'. and you have to look veeeery closely.. i can tell you it is EASY to miss those damned little squigglies.

    another tip would be to do all your coding in Notepad++. It has what is called syntax highlighting... and when you highlight a { or a ( is automatically highlights its partner } or ). It doesnt change color at all if it doesnt have its partner so you know there is a problem somewhere. you will go nuts if you are using regular notepad. <under binary files

    Posted 11 years ago #
  8. Helga - Thank you for the tips!!! I am using Dreamweaver and I found a way to check the php code to make sure I closed correctly. I finally was able to get something different to show on my screen. I had to modify the code a bit otherwise a bunch code would also show up on my site. I also added the CSS that Devin gave me and nothing blew up so that was an awesome thing also. Now I just need to understand how I can make the links clickable and add the images to click on. Here is the php code I modified from Devin.

    <!--//  Add a dynamic menu using wp_list_pages -->
    <ul class="sf-menu" style="float:right">
    <li><a href="#">twitter</a></li>
    <li><a href="#">linkedin</a></li>
    <li><a href="#">stumbleupon</a></li>
    <li><a href="#">issuu</a></li>
    <?php /*?><?php */?>

    And here is the css I pasted in my styles.css

    a.twitter {display:block; text-indent:-9999px; width:20px; height:20px; background: url(;}

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.