Adding Links to Widgets

How Do I Make A Link Inside The Text Widget?

We’re faced with the same issue as the last question, there are no text editing tools inside the Widget area.  We’ll have to use HTML code to create a link for the visitor to click.  Before creating the link, make sure you have the URL of where you want to link to.

The HTML code we are going to use is <a href=”www.coolexample.com”>Text You Want Linked</a>

To break this down, the anchor tag

<a

tells the browser hey, this is the beginning of a link.  The

href=

tells the browser where the link will take a visitor.  Remember to tell the browser to shift gears by adding a closing bracket > after the link and quotes.

The text between the anchor tags, Text You Want Linked, will be the link your visitor sees.   And finally, you need to tell the browser to end the link with a closing anchor tag.

</a>

While this may look complicated, as an example, we could create a link to Google.

Look up movie quotes on <a href=”https://www.google.com/”>Google</a>.

Will give you:

Look up movie quotes on Google.

 

FAQs About Widgets

Can I Use The Same Widget More Than Once?

Widget area with two Text Widgets.Yes, you can use the same widget multiple times in the same area or in different Widget areas. There are no restrictions.

For example, you may want to have two separate text areas in the same sidebar. Simply drag and drop the Text Widget over to the sidebar twice. Give each Text Widget  it’s own Title and Content.  Save your page or post and check your site.

The Text Widget also allows you to add HTML code into the Content Area.

Can I Bold Text In The Text Widget?

While pages and posts offer you text editing tools, widgets do not.  You’ll need to add some HTML tags to wrap around the text you want to be bold.  If you have the text:

“Here’s looking at you, kid” (Casablanca, 1942)

and you want ‘looking at you’ to be in bold text, you’ll just need to wrap that phrase around the HTML strong tag:

“Here’s <strong>looking at you</strong>, kid” (Casablanca, 1942) will give you this result:

“Here’s looking at you, kid” (Casablanca, 1942)

Notice that strong is surrounded by brackets and the second use of the word strong is closed with a diagonal.  This tells the browser to stop the bold text.

Can I Italicize Text In The Text Widget?

You’ll need to add some HTML tags to wrap around the text you want to be italic.  If you have the text:

“Here’s looking at you, kid” (Casablanca, 1942)

and you want ‘Casablanca’ to be in italicized text, you’ll need to wrap that phrase around the HTML emphasis tag:

“Here’s looking at you, kid” (<em>Casablanca</em>, 1942) will give you this result:

“Here’s looking at you, kid” (Casablanca, 1942)

Notice that em is surrounded by brackets and the second use of the tag em is closed with a diagonal.  This tells the browser to stop the italicized text.

More On Widgets

Drag & Drop a Widget

Sidebar widget showing drag and drop.If you want to reorder your widgets, it is as simple as dragging and dropping from one part of the Widgets page to the other.

If you hover a Widget, either in the Available Widgets column or in one of the Widget Areas (sidebar, footer or header), your cursor will change to a four sided directional arrow.

You can then click and hold to drag and drop. Using this feature, you can reorder the widgets within a sidebar, header or footer Widget area.

You can also click and hold to drag a Widget from the list of Available Widgets to the Widget Area where you want the Widget to appear.

Removing a Widget

Removing a widget from a Widget Area can be done two ways.

  1. You can drag and drop the Widget into the Available Widgets area.
  2. You can open the Widget and click the red Remove link on the bottom left of the Widget.

Check Your Work

After moving widgets where you want them, be sure to take a look at your site to see how they are looking in the page or post.  If it not quite right, go back and make adjustments as necessary.

Saving Customized Widgets

But what if you have made changes to the Widget and don’t want to lose those changes by putting the Widget back into the Available Widgets or by deleting the Widget from your Widget Area?

Inactive Widgets keeps settings while not using the widget.Below the Available Widgets area on the left is an area for Inactive Widgets. This is where you can store Widgets you have customized (such as the Text Widget) for later use.  When you’re ready to start using the Inactive Widget, just drag and drop it into the Widget Area where you would like it to appear.  This change is automatically saved for you.

What is a Widget?

What Is a Widget?

WordPress Widgets allow you to add information and tools to the sidebar of your website.  A sidebar is the narrow column on the right or left of your blog posts.  Each section in the sidebar is known as a Widget that you can add or remove.  You can also rearrange the order of your widgets.   You can have a search button, list your most recent posts, list your categories, add in a calendar and other features.  Plugins can add their own widget functions.

Most widgets do not require any code experience.  They can be added, removed and rearranged either in the Theme Customizer or from the Dashboard by going to Appearance >> Widgets.

Standard WordPress Widgets

WordPress comes with 13 Widgets preinstalled.  Those Widgets are:

  • Archives
  • Calendar
  • Categories
  • Custom Menu
  • Links
  • Meta
  • Pages
  • Recent Comments
  • Recent Posts
  • RSS
  • Search
  • Tag Cloud
  • Text

Depending on your theme, Widgets can be installed in the Left or Right Sidebar, Header or Footer. To add, remove or rearrange a widget in a sidebar or other Widget Area, navigate to the Widgets page by going to Appearance >> Widgets.

Your screen will look something like this:

Widgets screen inside dashboard.

Your Widget screen may have additional sidebars, footers and/or the opportunity to have Widgets in the header.  Where you can have these Widget areas is based on your theme.

Sidebar with Widgets for Search, Recent Posts, Recent Comments, Archives and Categories.

Click on the carrot to the right of the Widget title to open the Widget.  Opening the widget will give you different options, depending on the Widget.

In the Search Widget, opening the Widget gives you the opportunity to put a title above a Search bar . . .

Editing the title of the Search Widget in the sidebar.

 

 

 

 

 

 

. . . becomes this in the sidebar of your blog:

Edited title of the Search Widget.

What is a WordPress Theme?

A WordPress theme, or template, is a collection of files that work together to create the layout and design, ie your sidebars, font styles and colors.  The Theme may give images a border or change the font style for a caption on an image.  Your theme changes how your website looks without changing any of the core WordPress code (that is the heart of your website) or any of the information contained within your website.

Where do you get a WordPress Theme?

You can get WordPress themes from the WordPress Theme Directory.  These themes have been inspected and checked for compliance with the WordPress core code.  They are free for downloading.  The directory allows you to search by popular themes and latest themes.  You can also search by layout, features and subject with the feature filter.

WordPress Theme directory.

How do I download a WordPress Theme?

You can download a theme into your own theme directory using the Add New Themes option in the Appearance sub-menu.

  1. Add new WordPress theme.Log into your WordPress dashboard/admin panel
  2. Select Appearance from the left side menu
  3. In the menu that pops up, select Themes
  4. Select Add New
  5. You are now looking at the WordPress theme directory.  Use the search or filter options to find the Theme you want to use
  6. Click the Preview link to preview the Theme’s features or Install Now to upload the theme to your Theme Directory

If you have downloaded a Theme to your computer, you can use the Upload link in the top row to upload a zipped copy of the Theme you want to use.  This will upload the Theme into your directory.

Learn more about Themes at the WordPress Codex.

Ok, you have a Theme, how do you start using it?

  1. WordPress Theme Details, Activate and Live Preview.Log into your WordPress dashboard
  2. From the left sidebar menu, select Appearance then select Themes
  3. From the Themes panel, hover over the Theme thumbnail image for the Theme you want to use.  You can learn more information about the theme by clicking Theme Details.
  4. Continue hovering over the thumbnail to:
    1. Click the Live Preview link to see a live preview of your Theme, using your website content or
    2. Click the Activate button to active the Theme you want to use.

Your Theme selection will become active immediately.

Note:  If the Theme preview is blank, do not activate the new Theme without looking into this issue.  There could be a problem with the Theme’s code and your website may not display properly.