How I Put Widgets On My Blog

How-To-Put-Widgets-On-Your-BlogHi everyone,

I am going to make another instructional post, this one detailing how to put widgets on a blog page. I am completely new to WordPress, so I discovered my method through much trial and error. There are probably quicker ways. I am running a paid WordPress theme called ‘Arcade’. Here is the link to the theme’s homepage where there’s a 2-for-1 offer, or you can trial the free version (which is fantastic) here.¬†I trialed the free version for a week originally, and I loved it. The paid version did have a couple of things I had to fix, but the theme’s developer gave me support on their website and, all up, I’m very happy with it. This theme is mobile device responsive and Woo Commerce compatible. You can check out my website on your phone or tablet. I hope to add Woo Commerce pages soon. ūüôā

I have a self-hosted site, simply because I wanted a domain name and more options with widgets. I started to watch YouTube videos of what self-hosted and using WordPress.com and using WordPress.org meant. I also read lots on Google. I had to do everything at least four times, because I am an absolute newbie. I then followed¬†this YouTube tutorial, and set up the Tesseract theme. Tyler — the developer — shows you how to work¬†WordPress, adding Menus, what widgets to add and what they do. Even if you don’t use this theme, he shows you how to navigate WordPress and makes the experience a lot easier. I eventually had to delete his theme (Tesseract) as it didn’t let me put widgets on my blog, but I used his Tutorial to help me set up the free Arcade theme, as adding Pages to the Menu was pretty universal.

So here are the steps:

1) Open up Notepad on your computer. Paste in all the URL links to your social media sites. This will come in handy later. While on the landing page of my website, I went into the Customize option up the top on the left hand side–>Static Front Page–> and then I ensured under ‘Front Page Displays’, I ticked ‘A Static Page’. ¬†I wanted the Front Page to be ‘Home’, which is in my Menu Bar, and then Posts Page to be my ‘Blog’.

2) In the Customize section, I clicked on Layout–> then I picked the size of the sidebar for the widgets on my blog. With the paid Arcade theme, I have heaps of options for the Main Content Width. I chose 83% for the Main Content Width, and the rest would be the sidebar for the widgets. You could make the Main Content Width 75% if you liked, which would make your sidebar wider.

3) I went into the Dashboard–>Plugins–>Add New and downloaded Page Builder by SiteOrigin, Spacer, Title Remover, Widget Logic, and Black Studio TinyMCE Widget.

4) Hover your mouse over ‘Appearance’ on the left-hand side of the Dashboard. Click on Widgets. A page opens up where you can see how many sidebars you have on the right and the widgets you’ve downloaded on your left. You can drag the widgets into the sidebars, or you can open up the widgets and click on which sidebar you’d like to add them to. For now, we’ll just add them to the Primary/First Sidebar.

5) Write a list or figure out what widgets you want to appear on your blog. For starters you can add a Search Widget. Drag the widget into the sidebar you want. Open up the widget by clicking on its little down arrow. Leave the ‘Title’ bar blank unless you want to add something, but IMO you don’t need to. The Search Widget actually has the word ‘Search’ inside the little box, so readers will know what it’s for.

6) You will have noticed that when you opened up the Search Widget, you saw a Title bar and a Widget Logic box. In the Widget Logic box, type:¬†is_home() ¬† ¬† ¬† Make sure this code is aligned to the left of the box. This code ensures your widget only shows up on the blog page and not all the other pages. If you need more information on this code, check out the widget’s details page under the Installed Plugins page.

7) For my email subscription, I set up an account with Feedburner, which you can find out how to do on YouTube. I added the Layout Builder Widget to my sidebar, clicked the ‘Open Builder’ box. I clicked ‘Add a Row’–> ‘Add a Widget’. The widget I chose was ‘Visual Editor’ right at the bottom, and inside that widget, I clicked on ‘edit’ which lets you add code under the ‘Text’ tab. ¬†I added in my Feedburner code.

8) For social media icons, I created my own in Photoshop. Then I put another Layout Builder Widget into my Primary/First sidebar. I clicked on ‘Open Builder’ box, and under the Visual tab, I clicked on ‘Add Media’. I then uploaded my icons side by side. You can resize icons here, too, if you wish. Just hold down the Shift key and use the mouse at the corner of the boxes until you get the double arrow and drag the boxes to make them smaller. Click on the first icon–let’s say it’s a Facebook icon–and you will see a chain symbol in the paragraph options. This chain symbol is the link to connect to other pages. Click on the chain symbol.

9) A box pops up with a URL. Delete the URL that’s in the top box and add your own Facebook URL. You should have these in Notepad all ready to go.

10) Upload all your icons side by side (this is what I did, but you might want to make more rows or columns with the Layout Builder and Visual Editor widget), by clicking on the ‘Add Media’ button. Click on each icon image in turn, click the chain link symbol in paragraph options, then add your own URLs to your specific social media pages. Remember to always click Done, Save, Update etc as needed, otherwise you’ll lose everything.

11) If you haven’t done so, make sure all the widgets that you want to appear on you blog have this code in the Widget Logic box:¬†is_home() ¬†If you want a widget to appear on a different page, for example the About Page, the code would be: is_page(‘about’) ¬† ¬† ¬† For more about this, check out the details page on the widget. You get to this page by going to Installed Plugins, then clicking on the details or screenshots for that Plugin.

12) For a Blogroll, I dragged another Layout Builder Widget into my Primary/First sidebar. Then I clicked on ‘Open Builder’. I clicked on ‘Add Row’ and only made that row have one column. Then I clicked on ‘Add Widget’ and chose the ‘Visual Editor’ widget again. I clicked on the red ‘edit’ that appears inside the box. ¬†In the title box, I typed, ‘BLOG ROLL’, and then under the Visual tab, I typed in the names of the people I wanted on my Blog Roll in a list format. After I got all the names, I highlighted all the text in the body (ie: all the names) and clicked on bullet points. All the names then had a bullet point in front.

13) I highlighted each name one by one, and clicked the chain link symbol in the paragraph options. For each name, I added in their specific URL and clicked Update as needed.

14) You will need more information on how to operate Layout Buider and the Visual Editor. With the YouTube tutorial I posted at the start of this post, go to about 35:30, and you will see Tyler explain these widgets. They’re fantastic.

Okay, I think that’s about it. I hope I explained clearly, but if you need more details, please let me know in the comments. I am here to help.

 

Leave a Reply

Your email address will not be published. Required fields are marked *