is Module 3 of my very comprehensive guide: How to Build a WordPress Website in 2 days.
Lesson 10 – How to Add WordPress Widgets
Best way to understand what widgets are is the visual way.
On the home page of that theme, you see from the top, on the left the text logo, then on the right the menu. All the rest down to before the footer text is made up of 7 different widgets (sections).
Now take a look at the screenshot below, these are the corresponding widget areas.
Once you click on widgets under Appearance, in your WordPress sidebar, you will see all the widgets available for the theme you have chosen. It will probably look different than mine, except for Primary Sidebar and maybe Footer, which are always there on any theme.
Now as a newbie, you might get confused when looking at this image, because the list on the left are widgets that can be dragged to the widget areas on the right! So widgets go into widget areas…yeah! I know, someone could have come up with a less confusing solution.
How to Delete a Widget
On my demo theme, there are already some widgets from the left column added to the Primary Sidebar widget. I don’t need all of them, so I will delete them.
The Primary Sidebar will show on all pages except the home page because the layout of the home page on this theme does not include a sidebar.
To delete a widget from the Primary sidebar widget, it’s really easy.
Let’s take the last one there called Meta – you have to take that one out always, it serves no purpose. So on the right of the name of that widget, click on the little arrow and it will open up. Just click on the delete link and it will be gone.
You can do this for any widgets that were added and you decide to not use. If you ever want to get it back there, just drag it again from the left.
Your Home Page Widgets
These will vary depending on the theme you choose. But no matter which theme you buy, documentation will be included and will show you what goes where. If you also open the demo supplied by either StudioPress.com or another developer, it will be easier to see each section.
Studiopress will have a link to import Demo content, but I wouldn’t do it. I tried it once just to see, and you eventually have to delete that content and you can only do it one page, one post at a time. You don’t need to waste time on this.
I know I have 7 front page section for my home page and from the demo I can easily see where they are. But I see 2 more widgets I have no idea what they do.
So I’m going on the set-up documentation for that theme and found that the Lead Capture widget is included at the bottom of the Lead Capture page template, where you can add an email subscription form.
This Lead Capture page is like a short landing page that displays an image, a short description, and an email subscription form. The only difference between this Lead capture page and the landing page is the Lead capture widget is included at the bottom.
The other unfamiliar widget to me is the Offscreen content. So going back to the set-up docs, I see that it adds content on top of your page with a form or text.
The other widgets on my theme are Footer 1, 2 and 3 which add 3 columns in the footer and they will show on all pages. There is also an After Entry widget to add let’s say a subscription form after single entries, like a post.
IMPORTANT TO KNOW
– You need to drag a widget to a widget area for that widget area to show up on the live site.
– For footer widget areas, you need to drag at least one widget in the Footer 1 before it shows up. If you only drag a widget in footer 2 or 3, nothing will show up.
How to use the Main Widgets
Caldera form – is there because we are using Caldera form plugin. So once you have created some forms, you can add let’s say a subscription form to your sidebar. You would add this widget and select the form from the dropdown inside of it.
Categories – usually added to sidebar and/or footer
Custom menu – you would need to create a custom menu first. In the Customizer, go to Menus, + add a menu, name it and add menu items to it but do not display a location. You can also create it in the menu section in your sidebar under Appearance.
Now go back to the widgets section in the sidebar, choose a widget section to add your new menu, let’s say footer 1, +add a widget, custom menu and select your new menu from the dropdown. Save & publish.
Genesis Featured Page & Genesis Featured Posts – are usually added to home page widgets, the theme documentation will show you how to display these.
Genesis user profile – displays text about you and your gravatar
What is a gravatar?
A Gravatar (which means Globally Recognized Avatar) is the thumbnail image that will show up beside your name when using an email address associated with it.
Let’s say you write a comment on a blog, this thumbnail will show up instead of a default image. It also shows up in the top right corner of your WordPress dashboard if the email you use as admin is linked to that Gravatar.
If you add the ‘user profile’ widget in your sidebar, this is the image that will be used.
It’s something everyone should have, even if you don’t own a site/blog. It will always look much better than these default images that mean nothing. And your Gravatar becomes your online Identity.
It’s very easy to get and it’s free.
How to Get Your Own Gravatar
Go to the Gravatar Website and at the top right, click on the Sign In button (even if you don’t have a wordpress.com account yet) and on the sign in page that is shown, click on the Need an account button.
Fill out the information you are asked on the next screen to set up your account. NOTE: the email you use here will be your primary email that cannot be changed. You will receive an email to activate your account by clicking on the confirmation link in your email.
You will then be taken to the Gravatar website again and there you can use your WordPress.com login info you just set up to get in.
You will have a primary email set up already in your account which cannot be changed, as mentioned above. But you can set up as many emails as you want to be associated with your profile picture.
So go ahead and click on Add One here and choose from where you need to get the picture and crop if you need to and finish. Next choose G as the rating and you’re done.
If you want to add another email to link to your Gravatar, simply go to Manage Gravatars in your account and then Add a new Email option.
But Wait There’s More!
You should fill out your bio as well because your profile can be seen by anyone. You can add a description, links to your social media, the url to your website(s), your contact info, etc. All these will help in creating your online identity, so why not take advantage of it.
Recent posts – used in the sidebar or footer to display a list of your latest posts, just the titles, or titles and thumbnails, etc.
Search – to add a search function on your blog
Simple social icons – is from the plugin we added. Can be used in sidebar, footer and in some themes in the top menu or above header. You can add a title like follow us. Always check Open links in new window. Size, 36 is default but if you want bigger or smaller set this number higher or lower. Border radius is what makes it round or square with rounded corners. To make it a circle, use 50 here. If you want a border, set it here 1 or 2 no more than that. Choose alignment. Choose the colors for each element: icon is the F for Facebook or P for pinterest. Hover is that letter color when mouse over, background is background of circle or square, background hover is when mouse over, so make sure it’s not the same color as the icon hover. Border, make it different color than the background color, border hover, make it different color than the background hover.
In the appropriate spaces below, add the url of of each social media account. Save & Publish
text – A text widget can be used anywhere, sidebar, footer, home page widgets, etc. It can be used for simple text, for adding html code (for example for a google ad), a subscription sign up form code.
Choose a text widget to write some content. Drag that widget to any of the widget areas. In the title section write a title, then in the content section, add your text just by writing it. You can double return your keyboard to add a paragraph. Make sure you have checked at the bottom Automatically add paragraphs. Save & publish.
image and video – You can use these to add an image or a video to any widget in sidebar, footer, and home page widgets.
Lesson 11 – Understanding WordPress Categories & Tags
Are we having fun yet?
I know that you really want to get to the point where you want to play with fonts & colors to match your brand.
But before we do, you need to add more content so that we can make those changes. Why?
Because when you use WordPress, there are functions/elements that do not show until you add content. So for example, if we want to change the font and color of our blog archive post headings, we need to add more posts.
So let’s go through the how to write a post, how to write a page and what the heck are categories and tags?
First let’s do the categories and tags because you’ll then be able to choose which one each post belongs to when you start writing them.
Categories and tags only apply to posts and not pages
What’s the difference between Tags and Categories?
They are both useful to ‘sort’ your content by topic to improve your visitors’ experience. They work together. And they are essential for SEO.
Categories: are for grouping your posts into general topics. One should be able to see right away what your blog is about. Something like Travel, Recipes, Fashion. Each post has to be assigned a category.
Tags: are more to describe each post. So let’s take an example: If I write a post about cruises, I would use the Travel as category and cruises as tag. If I write a post about my spaghetti sauce, I would use Pasta as category and dinner as tag. But you don’t have to assign a tag.
I would recommend something like 5 categories because you want to make it really easy for your visitors to find the content they want. And you can use subcategories.
Instead of assigning a post to more than one category, use tags instead. They are like the index of a book. I wouldn’t add more than 10 tags per post. But since things change quite fast in the SEO
You can set up your list of categories and tags, in the dashboard sidebar, under Posts, categories.
Rename the default category
A default category is already set as Uncategorized, and will be used if no category is selected when writing a post. Change the name of it to something like Others, Ramblings, Misc.
Mouse over the name, and click edit, type the new name, in the ‘slug’ section, write the same name and scroll all the way to bottom to update. Hit the back to categories link.
Add New category
Give it a name which will show on your live site.
Slug: use the same as the name or different. If more than one word, use hyphen. Example: Recipes as name, and slug just-easy-recipes. The word Recipes will show in your menu as the category, but the name of that page will be http://domain.com/just-easy-recipes/ as the category url.
If this is a sub-categories, you would choose under which parent category it would belong to. Click the button add new category. Add all your categories this way. If at some point you need to add more or change a name, you would come here.
In the sidebar, under Post -> tags. Add New tag, it’s the same process as adding a category, except you can’t have sub-tags here. Again you can add tags on the fly as you write your posts in the editor.
Lesson 12 – How to Write WordPress Pages & Posts
Pages VS Posts
You will need to write pages, and those are static, meaning the content doesn’t change unless you edit it. Example of pages are: your contact page, your about page, disclosures.
On the other hand, posts are content which moves through your blog depending on the date they were written. So when you add a post, your blog ‘page’ will show your latest posts and you can also view oldest posts since they are kept on your site. Basically posts are listed in a feed, just like your Facebook feed.
The editor used to write both is similar.
How to add a page
In the dashboard sidebar, click on pages -> add new and you will then see the editor as shown below.
Make sure you are in the visual tab. Click on the toolbar toggle to add more functions.
Now doesn’t this look very familiar? It looks very similar to Word (pc) or Pages (Mac).
So first enter the page title which will also become your page url. Your title can be slightly different than your url which you can change. As an example, for my about page on my site, I like to write the url this way: about-lisegalipeau but the page title is About.
As soon as you start writing, WordPress will automatically save your draft and you will see right under the title the permalink(url) of the page. To change the wording, just click edit and make the changes, using hyphen between words. And click ok.
Then in the big white space, start writing your text and return on keyboard to make paragraphs.
To make headers, write text first, highlight it with your mouse, and in the little section that says Paragraph, click on the down arrow and choose the size of the header you want this text to be.
Header 1 is the biggest and should not be used in the content of any pages or posts because the title of the pages and posts are already set up by WordPress to be Header 1 and you can only have one per page or post.
The rest of the toolbar icons should be familiar to you.
In the right sidebar, click on Save Draft to make sure you don’t loose your content.
Let’s look at the rest of the sections here.
Scrolling down under the editor, there is the Layout Settings. We already set it for the whole site under Genesis theme settings, but you can change that layout for a specific page. We did set the default as content/sidebar (which applies to all content except home page).
But let’s say on this about page you don’t want to show the sidebar, you just need to mouse over the 3rd image and click. Your live page will not have a sidebar.
Scrolling down further more you will get to the Yoast SEO section. We already covered this in the Plugins.
The last section is called Scripts and this is more advance but let’s say it’s to add a script from a 3rd party for some kind of functions, maybe an ad.
The right sidebar
Status shows as draft. You can preview how your page looks. Visibility should be public. Publish immediately – you would use the edit link to set a date to publish it later on. Readability and SEO from the Yoast plugin. Under you have a link to move this whole page to trash and a button to publish it.
Page Attributes section
Parent, leave as no parent
Template, leave as default template Order as 0
Featured Image section Click on the link to add a featured image that will show if you use Genesis featured page widget.
Once you are satisfied with the content of your page, hit the publish button.
You need to add this new page to your menu, so go to customizer or menu (under appearance). This new page will be listed and you just need to drag it (when going directly to menu) or click on the plus sign when using the Customizer.
Set up your blog page
You need to set up a blog page which is going to be your page people land on when clicking on the BLOG link you set up in the menu.
This page is different than any other page because it’s controlled by the WordPress codes. It will show a list of excerpts of the latest posts. The number of posts to show is set up in the Genesis settings, under Blog Page Template, where it says posts per page: I usually set it up to 5. So on that blog page, the most 5 recent posts are listed and at the bottom, once you have more than 5 posts on your blog, you will see page numbers.
Go to add new page in your sidebar, enter title as Blog.
DO NOT WRITE anything in the editor space.
In the right sidebar, in the Page Attributes section, under template, choose blog.
DON’T DO ANYTHING ELSE HERE – JUST CLICK PUBLISH
Go to menu, and add that page to your main menu.
In the next step I will show you how to add an image. You can add an image while writing your page/post or after.