Jump to content

Archived

This topic is now archived and is closed to further replies.

cstreeting

Add new full-width sidebar for Twitter Feed

Recommended Posts

cstreeting

Hi all,

 

I'm trying to re-create the PageLines Twitter feed (seeing that it is broken since Twitter's recent API changes). I signed up to Twitter's embedded timelines and so I am looking to add that Twitter widget to a sidebar that is similar-looking to PageLines' Twitter integration. Anyone have any idea on how to do this? I've been able to add the widget to the Morefoot Left (or Middle or Right) section but it gets added to the top of the page, under the header, and only in a single-of-three-columns format.

 

Any help would be appreciated and I think this might help MANY others...

Share this post


Link to post
Share on other sites
cstreeting

After many hours of struggle, my solution below.

 

1) Download and install this plugin: http://wordpress.org/plugins/display-tweets-php/
#1. Login to your WordPress and go to Plugins > Add New
#2. Search “Display Tweets” which should come up as first on list (by Matthew Ruddy), click “Install Now”. Once installed, click “Activate Plugin”
#3. Go to Settings > Twitter Feed
#4. Click “register an application here” link or visit http://dev.twitter.com/apps/new
#5. Login or make sure to login as Twitter account used on website to display tweets
#6. Type the following on input fields. [screenshot]
 
Name: [Company Nickname] Display Tweets
Description: Display twitter feeds on website
Website: [Your website URL]
Callback URL: (leave blank)
 
#7. Check on “Yes, I agree” and fill the CAPTCHA
#8. Once application is setup, copy and paste following back to Twitter Feed Configuration back on your website. [screenshot]
#9. Click “Create my access token”, and copy following back to Twitter Feed Configuration back on your website. [screenshot]
#10. On the Twitter Feed Configuration page on your website, change Screen name to your Twitter ID without @ symbol. [screenshot]
#12. Go to Appearance > Widgets, and open up the Widget section on far right and find the old Twitter widget.
#13. Just under that old Twitter Widget, drag and drop the new “Tweets” widget from left “Available Widgets”. [screenshot]
#14. Add any Widget title you want “Follow Us” etc and remove the old Widget
#15. Confirm the Tweets loading on website
 
3) In my own Wordpress site, I was looking to get this into a Morefoot section that took up the whole page. To do so:
#1. Log into Wordpress site
#2. Click on PageLine Settings at the top of the page
#3. In the PlatformPro settings, click the "Template Setup"
#4. Choose "Morefoot Area" from the "Select Template Area" dropdown
#5. Drag and drop the "Full Width Sidebar" from the "Available/Disabled Sections" into the "Displayed Morefoot Area Sections". (Remove the Twitter Bar if it's present).
 
4) In functions.php:
add_action('wp_head', add_twitter_username_to_feed, 99);
function add_twitter_username_to_feed() {
?>
<script>
$(document).ready(function(){
var e = $('<div style="color: #000000; font-style: oblique;">&mdash;your-twitter-username<div>');
    $(".widget_displaytweetswidget.widget.fix .widget-pad p").append(e);
    e.attr('id', 'twitter-username');
});
</script>
<?php
}
 
***Replace "your-twitter-username" by your own twitter username
 
5) In style.php:
.widget_displaytweetswidget.widget.fix {
background: #F7F7F7;
padding: 5px;
}
.widget_displaytweetswidget.widget.fix p{
margin-bottom: 0px;
}
.widget_displaytweetswidget.widget.fix .muted{
display: none;
}

Share this post


Link to post
Share on other sites
Danny

Thanks for sharing and nice job!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Anthony CALCI
      By Anthony CALCI+
      Hello,
      I have switched from the Framwork theme to DMS theme on http://calcipatrimoine.theproofingcompany.fr (miror site of http://calci-patrimoine.com).
      But I have now only the Primary sidebar in the Widget section ! Secondary sidear, Footer sidebar have all disapear...
      Can I have help to have them back ?
      Regards,
      Anthony
    • colleenc
      By colleenc+
      I am having an issue with the size of the font in a text box widget on my sidebar. It has me completely baffled because I have two text widgets on my sidebar and the other one is displaying perfectly. 
      The sole difference between the two is the amount of text in the widget, but that can't be the problem.
      My site is: loveandnudes.com and the text widgets are on the right side at the top. 
      I have duplicated the one with the issue and I am fiddling with it right now to see if I can find a solution. But I would love any suggestions. I though CSS would do the trick, but either I tried the wrong thing - or I put it into the wrong place.
      Thanks for your help!
    • Queue-it
      By Queue-it+
      Hi,
      Is it possible to add a sidebar only for one post category? Without adding extra plugins or editing the theme code? 
      I have 4 categories of posts (blog post, news, job listing, case studies) but I want to have a sidebar only for the blog posts to appear. 
      How can I do that? 
      Thanks!
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
×