Welcome to PressWork!

Want to ask a question or join the discussion? Great! Join now.

In this Discussion

How can I add RSS feed subscriptions?
  • Hi All,
    Can you help me figure out how to add RSS link for folks to subscribe to the rss feed. Here is the site http://www.srilalita.com

    Ideally, I would like to have it located next to the primary facebook page button on top right corner.

    Thanks in advance,
    Sasi
  • isotropeisotrope
    This answer was Accepted.
    You're going to need to overwrite the pw_social_content function. You can do this either in your child theme or by using the custom-actions.php trick (Look through the documentation - link in the footer - if you don't know how).
    I strongly suggest that you don't alter the core files.

    Here's the php code:
    /*
    * Social Icons
    */

    function custom_social_content_with_feed() {
    $twitter = pw_theme_option('twitter');
    $facebook = pw_theme_option('facebook');
    $flickr = pw_theme_option('flickr');
    $linkedin = pw_theme_option('linkedin');
    $googleplus = pw_theme_option('googleplus');
    $stumbleupon = pw_theme_option('stumbleupon');
     
    echo '<div id="social-icons">';
    if(!empty($twitter))
    echo '<a href="http://twitter.com/'.$twitter.'" class="twitter-icon"></a>';
    if(!empty($facebook))
    echo '<a href="http://facebook.com/'.$facebook.'" class="facebook-icon"></a>';
    if(!empty($flickr))
    echo '<a href="http://www.flickr.com/photos/'.$flickr.'" class="flickr-icon"></a>';
    if(!empty($googleplus))
    echo '<a href="https://plus.google.com/'.$googleplus.'" class="googleplus-icon"></a>';
    if(!empty($linkedin))
    echo '<a href="http://www.linkedin.com/in/'.$linkedin.'" class="linkedin-icon"></a>';
    if(!empty($stumbleupon))
    echo '<a href="http://www.stumbleupon.com/stumbler/'.$stumbleupon.'" class="stumbleupon-icon"></a>';
    //Feed link below
    echo '<a href="'.get_bloginfo('rss_url').'" class="feed-icon"></a>';
    echo '</div>';
    }
    remove_action('pw_header_top', 'pw_social_content');
    add_action('pw_header_top', 'custom_social_content_with_feed');


    The bloginfo option you want to use (get_bloginfo('rss_url') above) will depend on which feed type you want to use. Have a read here to make sure it's the right one for you: http://codex.wordpress.org/WordPress_Feeds

    Find an image for your feed icon. (I strongly suggest to use one that's 32x32, unless you want to have to write some additional CSS).
    Upload your RSS feed image/icon and add some CSS (in Briefcase for instance):
    #social-icons a.feed-icon {
    background: url(LINKTOYOURICON);
    }


    You should now have a nice feed icon in your header like in the screenshot below.

    Cheers,
    iso

    PS. The icon in the screenshot comes from http://www.iconfinder.com/icondetails/34127/32/feed_rss_icon
    Capture.PNG
    352 x 102 - 4K
    Post edited by isotrope at 2011-09-28 10:08:22
    image PressWork Support Moderator
  • Now, here's the "dirty cheat" version that should take you about five minutes.
    1. Make sure you have Briefcase.
    2. Figure out what the link to your feed is. You can find it in your page's source code by doing View Source. Look for application/rss+xml in the <head> section. For this example, we'll be using http://localhost/presswork_01/?feed=rss2
    3. Upload your Feed image and keep the link handy.
      Here's one of the ways you could do this:
      1. Open your WordPress dashboard (the back-end, often found at yoursite/wp-admin/) and go into the Media section.
      2. Click on Add New.
      3. Click on Select Files and browse to where your image is located. Click Open and let WordPress do its magic.
      4. You should now have a little section with your image information. Pay close attention to the section named File URL. Select the link and place it aside (into Notepad, TextPad, ...)
      5. Click on Save all changes
    4. Now that we have the Feed url and the image url, let's get this into our header....
    5. In the WordPress dashboard, click on the Briefcase section (It's probably at or near the bottom of your left-hand menus).
    6. Make sure that the Scripts are turned on
    7. Back on the left side, you should see a menu item in the Briefcase section named Scripts. Click on it to go into the Custom Scripts section.
    8. Select the Footer Scripts text box and paste
      <script>
      (function($) {
      $('#social-icons').append('<a href="http://localhost/presswork_01/?feed=rss2" style="background: url(http://localhost/presswork_01/wp-content/uploads/2008/09/my-feed-icon.png);"></a>');
      })(jQuery);
      </script>
    9. In the above code, replace http://localhost/presswork_01/?feed=rss2 with the RSS feed we noted above.
    10. Replace http://localhost/presswork_01/wp-content/uploads/2008/09/my-feed-icon.png with the image location we jotted down earlier.
    11. Click the Save Changes button.


    If all went well, you should now have a brand spanking new Feed icon in your header.

    Caveats:
    1. Users with JavaScript disabled won't see it.
    2. Crawlers that don't use JavaScript won't see it. Then again, these guys already have your feed info in the <head> section of your page.
    image PressWork Support Moderator
  • @Isotrope - thanks a lot for your input. I tried this now [the very first response custom actions php code]. The image is there, but I am getting an error when clicking on the feed link in Chrome.
    This XML file does not appear to have any style information associated with it. The document tree is shown below.
    Any ideas on how to resolve this.
    Thanks,
    Sasi
    Post edited by sasi at 2011-09-30 03:22:41
  • @Isotrope - seems like actually it works ok in Firefox, but in Chrome it gives that error. Any ideas why and how to resolve that?
    Post edited by sasi at 2011-09-30 03:22:44
  • @sasi I'll be perfectly honest, I am faaaar from being an RSS/feed expert. I don't think that it actually matters. The feed should be properly understood by your feed reader. I've checked in Firefox: seems fine. I've checked in Chrome: purely XML, no rendering/styling. I've also checked in IE9: Wow! Pretty nifty RSS reading tools. (I don't use IE much, to be perfectly honest. Except for testing).

    When you mention the Chrome error, do you mean This XML file does not appear to have any style information associated with it. The document tree is shown below.? If so, honestly, I didn't think that there was any styling information in XML files.

    Perhaps, look into the type of feed you want to serve: http://codex.wordpress.org/WordPress_Feeds

    I get the feeling that everything will be fine as it is. Given my limited RSS/XML knowledge, I can't really advise you more, personally.

    How does it look when you look at the feed in a proper Feed reading app? Does everything seem as expected there?

    Cheers,
    iso
    image PressWork Support Moderator
  • Thanks for the solution isotrope. This helped me too.
  • @Isotrope - thanks. I think its purely how chrome handles it in browser.
  • isotrope said:



    Find an image for your feed icon. (I strongly suggest to use one that's 32x32, unless you want to have to write some additional CSS).
    Upload your RSS feed image/icon and add some CSS (in Briefcase for instance):

    #social-icons a.feed-icon {
    background: url(LINKTOYOURICON);
    }


    You should now have a nice feed icon in your header like in the screenshot below.

    Cheers,
    iso



    I do not have Briefcase, so where would I add the icon URL and CSS code? Custom actions.php?

    I was able to get the link to work on my site, but my icon is the Twitter icon. You can view my site here to see that the link works, but it's the wrong image. I want to change it from the Twitter icon to an RSS icon. Thanks!
  • You better leave the twitter icon alone (don't know maybe you'll need it sometime)
    If you don't have Briefcase then you have to use the code on the first post of @isotrope above. Paste the php code in your custom actions and the css code in your custom css as explained here : http://presswork.me/2011/custom-css-and-custom-actions/
    It's quite easy once you've read how to do it , just a matter of you copy and paste the codes.
    image PressWork Support Moderator