Customizing your website’s pages is essential to make it stand out from the rest. One way to do this is by using widgets – small blocks of content that add functionality and interactivity to your website. Widgets can be used to display your latest posts, add a search bar or a calendar, and much more. In this article, we’ll show you how to show or hide widgets and organize your website.
Make Your Pages Unique: Customize Widgets!
Customizing widgets is easy. First, you need to go to the “Appearance†menu in your WordPress dashboard and select “Widgetsâ€. Here, you’ll see a list of available widgets that you can add to your website. You can drag and drop widgets into your sidebar, footer, or any other widget area on your website.
Once you’ve added a widget, you can customize it by clicking on it. You can change the title, add text, and choose how the widget should be displayed. Some widgets have additional customization options, such as the ability to choose how many items to display or how to sort them.
Organize Your Website: Show or Hide Widgets!
Showing or hiding widgets is a great way to organize your website. For example, you might want to show a calendar widget on your homepage, but hide it on your blog posts. To do this, you can use the “Visibility†settings in each widget.
By default, widgets are set to “Display everywhereâ€. However, you can change this to “Hide†or “Show†based on a set of rules. For example, you can choose to show a widget only on certain pages or posts, or hide it on specific categories. This gives you complete control over how your widgets are displayed on your website.
Customizing widgets and organizing your website is easy with WordPress. By following the steps outlined in this article, you can create a unique website that stands out from the rest. Whether you want to show or hide widgets, or customize them to your liking, WordPress gives you the tools you need to make it happen. So go ahead and start customizing your widgets today!
Do you want to display your Instagram photos in the WordPress sidebar?
Your Instagram posts make great content for your website. By creating an Instagram feed, you can keep your site fresh and interesting while also promoting your Instagram account.
In this article, we’ll show you how to display your Instagram photos and videos in the WordPress sidebar widget.
Why Add an Instagram Feed to Your WordPress Site?
With more than a billion monthly active users, Instagram is a great place to promote your products, services, and blog posts.
Depending on your industry, Instagram may even be the most important part of your social media strategy. For example, Instagram is particularly popular among top fashion blogs, cooking, lifestyle, and photography websites.
However, people won’t see your Instagram posts if they only visit your website. This can make it difficult to grow your Instagram following and get engagement on your photos and videos.
With that being said, it’s a good idea to add an Instagram feed to your WordPress website. By showing your latest posts, you can promote your Instagram account in an engaging and eye-catching way.
This will get more traffic to your Instagram page and encourage visitors to interact with your posts by leaving comments, clicking on the ‘Share’ button, and more.
The feed will also update automatically every time you make a new Instagram post, so it’s a great way to keep your website fresh.
That being said, let’s take a look at how to easily display Instagram photos in the WordPress sidebar widget.
How to Install an Instagram Photos Plugin
The best way to display Instagram photos in a WordPress sidebar or similar widget is by using Smash Balloon Social Photo Feed. This free plugin lets you show photos from one or more Instagram accounts in a fully customizable feed.
After creating a feed, you can add it to the sidebar using either a shortcode or block.
In this guide, we’ll be using the free version of Smash Balloon, as it has everything you need to embed an Instagram feed. However, there’s also a Pro version that allows you to display hashtag feeds, add Instagram shoppable images in WordPress, and more.
Before getting started, you’ll need to connect your Instagram account to a Facebook page. If you have a personal Instagram account, then you may also want to turn it into a business account, as this allows Smash Balloon to show your Instagram bio and header automatically.
For step-by-step instructions on how to do both of these things, check out our FAQ section at the end of the post.
When you’re ready, go ahead and install and activate the Smash Balloon Social Photo Feed plugin. For more details, see our guide on how to install a WordPress plugin.
How to Connect an Instagram Account to WordPress
After activating the plugin, it’s time to connect your Instagram account to WordPress. Simply go to Instagram Feed » Settings and then click on ‘Add New.’
With Smash Balloon Pro, you can create feeds from tagged posts and hashtags, or even create a social wall with content from lots of different websites, including YouTube, Facebook, and Twitter.
Since we’re using the free version, simply select ‘User Timeline’ and then click on ‘Next.’
After that, you’ll need to choose the Instagram account where you’ll get the photos from.
To get started, click on ‘Add Source.’
On the next screen, choose whether you want to display photos from a personal or business Instagram account.
If you check the box next to ‘Personal,’ then Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can always add the avatar and bio manually in the plugin’s settings.
After choosing ‘Personal’ or ‘Business,’ go ahead and click on ‘Login with Facebook.’
You can now check the Instagram account that you want to use and click on ‘Next.’
After that, check the box next to the Facebook page that’s linked to your Instagram account.
With that done, go ahead and click on ‘Next.’
Smash Balloon will now show a popup listing all the information it will have access to and the actions it can perform.
To restrict Smash Balloon’s access to your Instagram account, click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the photos and videos that you can embed on your WordPress blog or website.
With that being said, we recommend leaving all the switches enabled.
When you’re ready, click on ‘Done.’
You’ll now see a popup with the Instagram account you just linked to WordPress.
Simply check the box next to the account and then click on ‘Add.’
Smash Balloon will now take you back to Instagram Feeds » All Feeds automatically.
To create a feed, simply check the box next to your Instagram account. Then, click on ‘Next.’
The plugin will now create an Instagram photo feed for your website, and then open that feed in the Smash Balloon editor.
How to Customize Your Instagram Photo Feed
You can use the editor to fine-tune how Instagram photos look on your website.
On the right, you’ll see a preview of your Instagram photo feed. On the left-hand side are all the settings you can use to customize the photo feed.
Most of these settings are self-explanatory, but we’ll quickly cover some key areas.
To start, you can change the feed layout and add padding by selecting ‘Feed Layout’ from the left-hand menu. As you make changes, the preview will update automatically, so you can try different settings to see what works best for your Instagram photo feed.
By default, Smash Balloon shows the same number of posts on desktop computers and mobile devices.
You can preview how the Instagram feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner. By testing different layouts, you can create an Instagram feed that looks great, no matter what device the visitor is using.
Smartphones and tablets typically have smaller screens and less processing power, so you may want to show fewer photos and videos on mobile devices.
To do this, simply type a different number into the ‘Mobile’ field under ‘Number of Posts.’
By default, the Facebook feed shows fewer columns on smartphones and tablets, compared to desktop computers. This helps your photos and videos fit comfortably on smaller screens.
After testing the mobile version of your WordPress website, you may be unhappy with how the columns look on smartphones and tablets. If this is the case, then you can show fewer columns by changing the numbers in the ‘Columns’ section.
When you’re happy with the changes you’ve made, click on the ‘Customize’ link.
This will take you back to the main Smash Balloon editor, where you can explore the next settings screen, which is ‘Color Scheme.’
By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but it also has ‘Light’ and ‘Dark’ themes that you can use.
By default, Smash Balloon adds a header to your feed, which is your Instagram profile picture and the name of your page. To change how this section looks, click on ‘Header’ in the left-hand menu.
On this screen, you can change the size and color of the header, and show or hide your Instagram bio.
Sometimes, you may want to show a different profile picture. For example, your Instagram avatar may clash with your WordPress theme.
To do this, simply click on ‘Add Image’ under ‘Show custom avatar.’
You can then either choose an image from the WordPress media library or upload a new photo from your computer.
Similarly, you can show a different bio. For example, you may want to introduce your Instagram feed or encourage people to follow you for more great content.
To replace the Instagram bio, simply type into the ‘Add custom bio’ box.
Smash Balloon automatically analyzes your Instagram photos and displays them at the best resolution. While we recommend using these default settings, it is possible to make the images bigger or smaller.
To change the image size, click on ‘Posts’ from the left-hand menu. Then, select the ‘Images and Videos’ option.
You can now choose between thumbnail, medium, and full-size using the dropdown menu.
If you’re unhappy with the results, then you can return to this screen at any point and select ‘Auto-detect (Recommended)’ from the dropdown menu.
By default, Smash Balloon adds a ‘Load More’ button to the bottom of your Instagram feed, which allows visitors to scroll through more of your photos and videos.
Since it’s such an important button, you may want to customize it by selecting the ‘Load More Button’ option from the left-hand menu.
Here, you can help ‘Load More stand out by changing its background color, text color, and hover state.
You can also change the button’s label by typing into the ‘Text’ field.
Another option is to remove the button completely by clicking the ‘Enable’ toggle. In this way, you can encourage people to visit your Instagram by limiting the number of posts they can see on your website.
If visitors like what they see, they may decide to follow you on Instagram using the ‘Follow on Instagram’ button that Smash Balloon adds automatically.
With that in mind, you may want to help the button stand out by selecting ‘Follow Button’ in the left-hand menu.
Here, you can change the button’s background color, hover state, and text color.
By default, the button has a general ‘Follow on Instagram’ label.
You can replace this with your own messaging by typing into the ‘Text’ field.
When you’re happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes. You’re now ready to add the Instagram feed to your WordPress sidebar widget.
How to Add Your Instagram Photos in WordPress Sidebar Widget
You can add your feed to the sidebar or similar section using the Instagram Feed block.
If you’ve created more than one feed using Smash Balloon, then you’ll need to know the feed’s code.
Simply go to Instagram » All Feeds and then copy the value in the ‘Shortcode’ column.
In the following image, we’ll need to use instagram-feed feed=1.
With that done, go to Appearance » Widgets in the WordPress dashboard.
Then click on the blue ‘+’ button.
In the search bar, type in ‘Instagram Feed’ and select the right widget when it appears.
WordPress has a built-in Instagram widget, so make sure you choose the one that shows the official Instagram logo.
After that, simply drag the widget onto the area where you want to show the Instagram feed, such as the sidebar or similar section.
The widget will automatically show one of the feeds you created using Smash Balloon.
To show a different feed instead, simply type the feed’s shortcode into the ‘Shortcode Settings’ box and then click on ‘Apply Changes.’
You can now click on the ‘Update’ button to make the widget live. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.
If you’re using a block-enabled theme, then you can add an Instagram feed to the sidebar using the full-site editor. To get started, simply go to Appearance »Editor.
In the editor, simply click to select the sidebar section and then click on the ‘+’ button.
You can then start typing in ‘Instagram Feed’ and select the right block when it appears.
By default, the full-site editor will show one of the Instagram feeds you created using Smash Balloon. To show a different feed, simply add the shortcode following the same process described above.
When you’re happy with how the Instagram feed looks, click on ‘Save’ to make your changes live.
How to Display a Specific Instagram Photo in WordPress
Sometimes you may want to show a specific Instagram post on your website. This might be your most popular photo, an evergreen post, or even a social media contest that you’re currently running.
In the past, you could easily embed an Instagram post in WordPress using a protocol known as oEmbed. However, Facebook changed the way that oEmbed works, so you can no longer easily embed Instagram photos in WordPress.
The good news is that Smash Balloon can fix the Facebook and Instagram oEmbed issue. This allows you to easily embed a specific Instagram post in any page, post, or widget-ready area, such as the sidebar.
To enable this feature, simply go to Instagram Feed » oEmbeds. You can then click on the ‘Enable’ button.
After that, go to Appearance » Widgets and click on the blue ‘+’ button.
In the search bar, type in ‘Embed’ to find the right block.
When the ‘Embed’ block appears, drag it onto the area where you want to show the photo.
In the ‘Embed’ field, simply paste the URL of the Instagram post that you want to show on your website. Then, click on ‘Embed.’
WordPress will now show the specific Instagram post.
If you’re happy with how it looks, then click on ‘Update’ to make it live.
Now, if you visit your website, you’ll see the Instagram post live.
If you’re using a block-enabled theme, then you’ll need to add specific Instagram posts using the full-site editor.
To do this, simply enable Smash Balloon’s oEmbed feature and get the Instagram post’s URL by following the same process described above.
After that, open the full-site editor by going to Appearance »Editor in the WordPress dashboard. Once you’re inside the full-site editor, click on the ‘+’ button in the sidebar section and then type in ‘Embed.’
When the right block appears, click to add it to the sidebar.
You can then add the URL for the post you want to embed and click on the ‘Embed’ button.
The full-site editor will now show the Instagram post.
If you’re happy with how it looks, then click on ‘Save’ to publish this photo or video to the block-enabled sidebar.
FAQs About Displaying Instagram Posts in WordPress
Smash Balloon makes it easy to create a custom Instagram feed or even display specific Instagram posts on your WordPress website.
That being said, here are some of the most frequently asked questions about showing Instagram posts on WordPress.
How Do I Create an Instagram Business Account?
Smash Balloon can display photos from either a personal or business Instagram account.
However, Smash Balloon can’t automatically fetch the Instagram avatar and bio from a personal Instagram account. Instead, you’ll need to add the avatar and bio manually in the plugin’s settings.
With that being said, you may want to check whether you have a personal or business account, and then switch to a business account if necessary.
To do this, simply visit your Instagram account and click on the lined icon in the side menu.
After that, click on ‘Settings.’
If you don’t have a business account, then this screen will show ‘Switch to professional account’ as the last option.
If you currently have a personal account and want to switch to a business account, then simply click on this link.
How Do I Connect a Facebook Page to an Instagram Account?
Before you can display Instagram photos in WordPress, you’ll first need to connect your Instagram account to a Facebook page.
To do this, head over to the Facebook page that you want to use and then click on ‘Settings’ in the left-hand menu.
Once you’ve done that, click on ‘Linked Account.’ You can now select ‘Instagram’ and click on the ‘Connect’ button.
Facebook will now show all the actions it can perform, and the information it can access.
If you’re happy with this, then click on the ‘Connect’ button.
Just be aware that the people who manage your Facebook page may be able to see your Instagram messages and respond to them. If you want to stop this and keep your messages private, then click to disable the slider.
When you’re ready to move to the next screen, click on ‘Confirm.’
This opens a popup where you can type in your Instagram username and password.
After that, click on the ‘Log in’ button.
After a few moments, you’ll see a message saying that your Instagram and Facebook accounts are now connected.
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.
Are you looking to embed a Discord widget in WordPress?
Discord is a well-known VOIP chat application that allows you to build your own communities and enables your users to communicate with each other through text, voice, and video. As of 2022, Discord has about 150 million active users.
In this article, we will show you how to embed a Discord widget into WordPress.
Why Should You Add a Discord Widget to Your Website
Discord chat allows users to communicate with each other over messages, voice calls, and video calls.
By embedding a Discord widget in your WordPress site, you can provide a way for your users to connect with each other. This widget will display the total members of your Discord server, and it will also provide an invite link for new members to join.
Your WordPress users will be able to join your Discord chat rooms through the link provided by the widget, so you can build a huge community for your website.
That being said, let’s see how you can add a Discord widget in WordPress.
How to Embed a Discord Widget in WordPress
To embed a Discord widget in WordPress, you must visit the official Discord website. You will need to create a Discord user account and create a Discord server for your community.
Step 1. Creating a Discord Username and Server
Once there, simply click the ‘Login’ button present at the top right corner if you already have a Discord account.
If you don’t have an account, click the ‘Open Discord in your browser’ button.
You will be then asked to choose a username for your Discord account.
This will be your handle for others to find you, but you can change your display name on a server-by-server basis.
Next, Discord will take you to the ‘Channels’ page and then ask for your date of birth.
Simply enter your details and click the ‘Next’ button.
Then, you’ll be asked to create your first Discord server. Now, you can either create your own template or choose any of the premade ones.
For this tutorial, we will be using the ‘Gaming’ server template.
After that, you’ll be asked to choose a ‘Server Name’ for your Discord chatroom. You can also upload an image for the server.
After choosing a name of your liking and uploading an image, simply click the ‘Create’ button to create your Discord server.
Lastly, you’ll be asked to provide your email account and choose a password for your Discord account.
Once you provide these details, click the ‘Claim Account’ button.
Now, an email will be sent by Discord to the email account you provided to verify your details.
Once you verify your account, your Discord server will be set up.
Now all you have to do is embed the Discord widget in WordPress.
For that, first, you need to click the arrow icon present beside your server name at the top of the Discord ‘Channels’ page.
This will open up a dropdown menu.
Here, you simply have to click the ‘Server Settings’ option to open up your Discord server settings.
Once you’re on the ‘Server Settings’ page, click the ‘Widget’ option from the sidebar.
This will open up the ‘Server Widget’ section where you simply have to toggle the switch present beside ‘Enable Server Widget’.
After that, simply scroll down to the ‘Premade Widget’ section and click the ‘Copy’ button present below the ‘Premade Widget’ option.
You can now embed the Discord widget anywhere on your website by pasting this code.
Step 2. Embedding the Discord Widget in WordPress
First, go to the WordPress page or post where you want to embed the Discord widget.
Then, simply choose the ‘Custom HTML’ block from the block editor and paste the code.
After that click the ‘Publish’ button at the top to embed the Discord widget.
This is how your Discord widget will look on your WordPress website.
Note that you can embed the Discord widget in any block-enabled area of your themes, such as a sidebar, header, or footer.
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.
