Tag - Display

How to Display Recent Tweets in WordPress (Step by Step)


Do you want to display your recent Tweets in WordPress? Integrating Twitter to your WordPress website helps increase engagement on both platforms.

Your blog visitors discover your tweets which helps you get new followers on Twitter. On the other hand, your Twitter followers discover more of your content, which increases traffic to your website.

In this article, we’ll show you how to easily display recent tweets in WordPress. We will also cover how to show selective tweets in WordPress.

How to Display Recent Tweets in WordPress

Adding Your Recent Tweets in WordPress – Step by Step

You can display your recent tweets in WordPress by simply embedding your Twitter profile or timeline.

Just like adding a YouTube video, WordPress also makes it easy to embed Twitter content like a single tweet, collection, list, likes, and moment into your website.

WordPress uses the oEmbed feature, which automatically turns any content URL into an embed code when pasted in the content area.

The most common place to display your recent tweets is usually your blog’s sidebar. Let’s start with that.

Adding Your Recent Tweets to Your WordPress Sidebar

First, you need to find and copy the URL of the Twitter profile that you want to embed. The Twitter profile URL is simply the combination of Twitter website URL and your Twitter username.

For example, the Twitter profile URL of WPBeginner is https://twitter.com/wpbeginner.

Twitter Profile URL

Next, log into your WordPress dashboard and go to Appearance » Widgets page. Simply drag and drop the text widget to your sidebar and then paste the Twitter profile URL that you copied earlier in the text area.

Paste Twitter Profile URL to WordPress text widget

Once done, it will immediately turn into a Twitter timeline widget showing recent Tweets from that particular account.

Save Your Recent Tweets Widget in WordPress

After that, you can name your widget, save it, and preview it live on your site. Here’s how our recent tweets appear on our demo website.

Recent Tweets in WordPress Demo Site - With Text Widget

As you can see in the screenshot above, this method adds your recent tweets inside a box with a vertical slider. The box includes 20 most recent tweets and the ‘Load more Tweets’ button at the end.

Embedding Twitter Feed in WordPress with Twitter Publish

Replacing the Twitter widget feature, Twitter now has Twitter Publish feature for embedding Twitter content into websites.

Twitter Publish lets you easily create the embed code for various types of Twitter content, including a tweet, collection, profile, list, moment, hashtag, etc.

Twitter Publish for Embedding Tweets into Websites

To use this method, you need to visit the Twitter Publish website and then paste your Twitter profile URL in the ‘What would you like to embed?’ box.

Enter Twitter Profile URL in Twitter Publish

Once done, click on the arrow icon.

After that, it will ask you to choose a display option: Embedded Timeline or Twitter Buttons. Choose the ‘Embedded Timeline’ as you want to show your Twitter timeline with recent tweets.

Twitter Publish Display Options

Upon selecting the display option, it will instantly create the embed code for your recent tweets. Now click on the Copy Code button.

Copy Twitter Embed Code from Twitter Publish

Next, you need to go to Appearance » Widgets from your dashboard and add the ‘Custom HTML’ widget to your sidebar area. After that, paste the embed code that you copied earlier in the HTML field.

Paste the Twitter Profile Embed Code in Custom HTML widget

Once done, save your widget and see your recent tweets live on your website.

Here’s how our Twitter feed looked on a test site.

Recent Tweets in WordPress - Demo Website

Embedding Your Recent Tweets in WordPress Blog Posts

Sometimes you may need to embed your Twitter timeline in your blog posts or your about page.

WordPress comes with a Twitter embed block for the new WordPress block editor.

Simply create a new post or edit an existing one. On the post edit screen, add the Twitter embed block in your content area.

Add Twitter Embed Block in WordPress Editor

Now you need to paste your Twitter profile URL and click the ‘Embed’ button.

Embed Twitter Timeline in WordPress Post

After that, WordPress will automatically fetch and display your recent tweets in the content area.

Twitter Profile Embedded in WordPress Post

This method adds a Twitter feed with a scrollbar in your post.

Alternatively, you can also use the Twitter Publish method, which will allow you to show recent tweets without the scrollbar.

Go to the Twitter Publish website and paste your Twitter profile URL in the ‘What would you like to embed?’ box and click the arrow next to it.

Enter Twitter Profile URL in Twitter Publish

After that, choose the ‘Embedded Timeline’ option and then copy the embed code.

Copy Embed Code for Twitter Profile

Next, you need to add the ‘Custom HTML block in your post editor to paste the embed code.

Add Custom HTML Block in WordPress Editor

Now you can paste the embed code you copied earlier.

Paste the Twitter profile Embed Code in Custom HTML Block

Once done, save your post and preview it live.

Showing Selective Tweets in WordPress

Embedding your Twitter profile will show all your recent posts on your website. What if you wanted to show the selected tweets only?

Don’t worry, there are simple solutions for that too. There are mainly 5 ways to embed selected tweets into your website.

  • Collection: Show a curated collection of tweets according to topics, interests, conversations, and more.
  • List: Display tweets by a curated group of Twitter users.
  • Likes: Show all tweets a specific Twitter user has marked as likes.
  • Moment: Show tweets from a public moment by a Twitter user.
  • Hashtag: Display tweets by anyone containing a specific hashtag.

Among these options, you can create the last four selections right from the Twitter website. Also, you can copy their respective URL and paste in your WordPress sidebar using the text widget.

For example, you can find your Twitter lists in your Twitter profile page. Select any one list you want to embed and click on it.

WPBeginner Twitter Lists

Upon clicking on the link, the list will open, and you can copy the list URL from your browser. For example, the URL of our Twitter list ‘WordPress Experts’ is https://twitter.com/wpbeginner/lists/wordpress-experts.

Now you can paste this URL in your WordPress sidebar.

Add Twitter List in WordPress Text Widget

Similarly, you can find the URLs of likes, moment, and hashtag from your Twitter profile page, and easily embed into your WordPress site.

However, you need to use Twitter’s advanced TweetDeck feature to create a collection. A Twitter collection is a list of tweets organized under a topic by a user.

Visit TweetDeck website and sign in with your Twitter account. When the TweetDeck dashboard opens, click on the ‘Add Column’ button on the left panel.

Add Column in TweetDeck Application

Next, you need to choose the ‘Collection’ option.

Choose Collection Option in TweetDeck

After that, you can name your new Twitter collection.

Create New Collection in TweetDeck

Once done, you will see a new column added to your TweetDeck dashboard.

Drag Tweets to Twitter Collection

Now, you can drag tweets from your Twitter home or any user account and create your collection.

Once you have added tweets in your collection, you can embed it into your website. Click on the Options icon and then click the Share option. After that, select the ‘Embed Collection’ option.

Embed Collection from TweetDeck

Upon clicking on Embed collection, the Twitter Publish page will open with the embed code for your Twitter collection.

Copy Embed Code for Twitter Collection

Copy the embed code, and then paste it into your website using the Custom HTML widget.

Embed Twitter Collection with Custom HTML Widget

Once done, save your widget and see your Twitter collection live on your website.

We hope this article helped you to learn how to show recent tweets in WordPress and how to show selective tweets in WordPress. You may also want to see our list of the best social media plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Display the Total Number of Comments in WordPress


Do you want to display the total number of comments on your WordPress site?

Comments allow users to participate and engage with the content on your website. By showing off the total comment count, you can encourage more users to join the conversation.

In this article, we will show you how to easily display the total number of comments in WordPress, with or without a plugin.

How to display total number of comments in WordPress

Display WordPress Comment Count using a Plugin

This method is easier and it is recommended for all users. Instead of writing code, you’ll be using a plugin to display comment count in WordPress.

First, you need to install and activate the Simple Blog Stats plugin. You may read our step by step guide on how to install a WordPress plugin for detailed instructions.

Upon activation, go to Settings » Simple Blog Stats page to configure plugin settings.

Simple Blog Stats Plugin settings page

On this page, you’ll see all the shortcodes that you can use to show different stats like the total number of comments, registered users, number of posts, categories, page count, and more.

You need to copy the shortcode [sbs_approved] to display the total number of approved comments on your WordPress site.

If you want to display it in a post or page, then simply create a new post or edit an existing one.

On the post edit screen, you need to add the shortcode block in the WordPress content editor.

Add Shortcode Block to a WordPress Page

You can do this by clicking on the Add block (+) icon and then search for the shortcode block. Once you find it, you need to click on it to add the shortcode block to the editor.

Next, you need to paste the shortcode [sbs_approved] inside the block settings.

Paste Shortcode to the Shortcode Block

You can add any text you want to display before or after the shortcode.

Alternatively, you can also use the shortcode inside a paragraph block. Simply copy and paste the shortcode where you want to display the comment count.

Paragraph block with comment count shortcode inside it

Using the paragraph block will also allow you to use the text styling option available in the WordPress block editor.

Once you are done, click on the publish or update button to save your changes. You can now visit your website to see your changes in action.

Comment count displayed in a WordPress post

Displaying total comment count in a sidebar widget

You can also use the same shortcode inside a WordPress widget and display it in your blog’s sidebar.

Simply head over to the Appearance » Widgets page and add a ‘Text’ widget to the sidebar.

Text widget with comment count shortcode inside it

Next, go ahead and paste your shortcode inside the ‘Text’ widget.

Don’t forget to click on the ‘Save’ button to store your widget settings.

You can now visit your website to see the widget in action.

Sidebar comment count in WordPress

Display WordPress Comment Count (without a plugin)

If you don’t want to use a plugin, then you can use display the total comment count manually.

This method requires you to add a code snippet to your website. If you haven’t done this before, then please check out our guide on how to copy and paste code snippets in WordPress.

Before you do anything, you should make a full backup of your website. This will help you to restore your site in case you break anything while editing the theme files.

Now you need to add the following code to your theme’s functions.php file or a site-specific plugin:



function wpb_comment_count()  
$comments_count = wp_count_comments();
$message =  'There are <strong>'.  $comments_count->approved . '</strong> comments posted by our users.';

return $message; 
 

add_shortcode('wpb_total_comments','wpb_comment_count'); 


This code creates a function that outputs the total number of approved WordPress comments on your site. It also creates a shortcode to display it.

You can now use the shortcode [wpb_total_comments] in your posts, pages, or a text widget to display the total number of comments on your website.

This is how it looked on our demo site:

Preview of comment numbers

We hope this article helped you display the total number of comments on your WordPress site. You may also want to check out our guide on how to prevent comment spam in WordPress and the best WordPress plugins for every website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Easily Display Code on Your WordPress Site


Do you want to display code in your WordPress blog posts? If you tried to add code like regular text, then WordPress will not display it correctly.

WordPress runs your content through several cleanup filters each time you save a post. These filters are there to make sure someone does not inject code via post editor to hack your website.

In this article, we will show you the proper ways to easily display code on your WordPress site. We will show you different methods, and you can choose the one that best fits your needs.

How to easily display code in WordPress posts

Method 1. Display Code Using The Default Editor in WordPress

This method is recommended for beginners and users who don’t need to display code very often.

Simply edit the blog post or page where you want to display the code. On the post edit screen, add a new code block to your post.

Add code block to your WordPress posts

You can now enter the code snippet in the text area of the block.

Add code to your blog post

After that, you can save your blog post and preview it to see the code block in action.

PHP code displayed in WordPress

Depending on your WordPress theme, the code block may look different on your website.

Method 2. Display Code in WordPress Using a Plugin

For this method, we will be using a WordPress plugin to display code in your blog posts. This method is recommended for users who often display code in their articles.

It gives you the following advantages over the default code block:

  • It allows you to easily display any code in any programming language
  • It displays the code with syntax highlighting and line numbers
  • Your users can easily study the code and copy it

First, you need to install and activate the SyntaxHighlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you can go ahead and edit the blog post where you want to display the code. On the post edit screen, add the ‘SyntaxHighlighter Code’ block to your post.

SyntaxHighlighter code block

You will now see a new code block in the post editor where you can enter your code. After adding the code, you need to select the block settings from the right column.

SyntaxHighlighter code block settings

First, you need to select the language for your code. After that, you can turn off line numbers, provide first line number, highlight any line you want, and turn off the feature to make links clickable.

Once you are done, save your post and click on the preview button to see it in action.

Code displayed with syntax highlighting

The plugin comes with a number of color schemes and themes. To change the color theme, you need to visit Settings » SyntaxHighlighter page.

SyntaxHighlighter settings

From the settings page, you can select a color theme and change SyntaxHighlighter settings. You can save your settings to see a preview of the code block at the bottom of the page.

Code block preview

Using SyntaxHighlighter with Classic Editor

If you are still using the old classic WordPress editor, then here is how you would use SyntaxHighlighter plugin to add code to your WordPress blog posts.

Simply wrap your code around square brackets with the language name. For example, if you are going to add PHP code, then you will add it like this:

[php]
<?php
private function get_time_tags()
$time = get_the_time('d M, Y');
return $time;

?>
[/php]

Similarly, if you wanted to add an HTML code, then you will wrap it around the HTML shortcode like this:

[html]
<a href="example.com">A sample link</a>
[/html]

Method 3. Display Code in WordPress Manually (No Plugin or Block)

This method is for advanced users because it requires more work and does not always work as intended.

It is suitable for users who are still using the old classic editor and want to display code without using a plugin.

First, you need to pass your code through an online HTML entities encoder tool. It will change your code markup to HTML entities, which will allow you to add the code and bypass the WordPress cleanup filters.

Now copy and paste your code in the text editor and wrap it around <pre> and <code> tags.

Adding code manually in classic editor

Your code would look like this:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;This is a sample link&lt;/a&gt;&lt;/p&gt;
</pre></code>

You can now save your post and preview the code in action. Your browser will convert the HTML entities and users will be able to see and copy the correct code.

Manually displaying code in WordPress

We hope this article helped you learn how to easily display code on your WordPress site. You may also want to see our ultimate list of the most wanted WordPress tips, tricks, and hacks.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Display Code on Your WordPress Site appeared first on WPBeginner.



Source link