WordPress Themes, Widgets And Menus (Beginner Level)

As in some previous days we have already discussed about WordPress Basics, so this article is the continuation of WordPress Basics. I have tried to convey some basic information regarding WordPress Themes and Menus so that the beginners can easily start their new Journey to the Blogging World. It covers the appearance section wordpress themes, widgets and menus where you can completely modify your website’s look and feel as you like.

Installing WordPress Themes

1. Access Install Theme Functionality In Your WordPress Admin

The first thing you need to do when you want to install a new WordPress theme is to login to your site admin page. Once there, go to Appearance > Themes.

Here, you will see all the themes you have currently installed in your application. To add another one, simply click on the Install Themes tab.

On this page there are two ways to add a new theme. You can either use the search field which will return results from the WordPress.org theme directory or you can upload a theme from your local hard drive. In this article we will show you how to add themes in both ways.

Choose & Install A Theme From The Official WordPress Theme Directory

The easiest way to install themes to your WordPress site is if they are listed in the official themes directory. This allows you to search for the theme you need directly from your site admin page. Each theme in the official directory has to have Tags that describe its functionality allowing you to easily search for the right theme.

If you know the theme's name, you can simply search for it.

However, usually that's not the case. This is why, you can use the Feature Filter. For example, you can search for a Black and White, Two columns theme that has Flexible Width. Simply check those tags and press the Apply Filters button.

You will now see all themes that meet your search. Hover over any of them and you will see two options - to see a demo of the theme or to install it. Once you choose which theme you want to use for your site, press the blue Install button.

Your WordPress application will download and install the theme for you. Simply click the Activate link on the next page you will be redirected to.

That's all. You can go to the front page of your site to see its new looks.

Upload A Theme You Have Already Downloaded

If you have a theme that's not listed in the WordPress.org directory, you can simply upload it from the Themes > Install Themes section in WordPress. To do this click on the Upload link at the top of the page.

Now, click the Choose File button, select the archive of your theme from your local computer and press the Install Now button.

In few seconds, WordPress will upload and extract the theme archive for you. All you need to do next is to press the Activate link under the message for successful theme installation.

That's it! You can now go to the front end of your site and see the newly activated theme.

2. Upload & Install A WordPress Theme via FTP

If you’ve downloaded or bought a WordPress theme somewhere from the world wide web, or created a custom WordPress theme (or hired us to create a custom WordPress theme for you), you can upload and install the WordPress theme via FTP. You’ll still need to activate the theme via the admin panel, which will be easy after uploading the theme via FTP has been completed since you’ll see the uploaded theme popup in Appearance - Themes. You’ll need a FTP client for this to be able to login to your server via FTP. We’ve been a loyal user to FlashFXP, but free alternatives as FileZilla will also do the job for you.

Step 1:- Login to your server via FTP and navigate to the /themes folder. If you did a clean WordPress install, it will look something like this.

Step 2:- Unzip your theme and upload the theme folder in the / themes folder. After uploading is completed, you’ll see the uploaded theme listed between the other themes.

Step 3:- Login to the WordPress admin panel and go to Appearance - Themes. You’ll see the theme you uploaded, all you need to do is hover over it with your mouse and click the ‘Activate’ button to activate the theme.

After you’ve clicked the ‘Activate’ button, the theme is applied to your website. You’ll see the theme in its full glory if you visit the homepage of your website. Only 3 steps were needed to upload and install a WordPress theme via FTP.

WordPress Widgets

What Are Widgets?

WordPress Widgets add content and features to your sidebars on your WordPress website. Some default widgets come with WordPress, like the ones for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user, which is now available on properly 'widgetized' WordPress themes to include the header, footer, and elsewhere in the WordPress design and structure.

Widgets require no code experience or expertise! They can be added, removed, and rearranged on the WordPress Administration Widgets panel (click Appearance, then Widgets). The order and placement is set by the WordPress Theme in the functions.php file.

Some WordPress Widgets offer customization and options such as forms to fill out, inclusion / exclusion of data and information, optional images, and other customization features.

Installing A Widget On WordPress

Installing a Widget to a WordPress site is a very easy & simple process. Here in this article I am going to show you how to install a GST Calculator Widget as an example. So let's take a start.

You can download plugin from WordPress Repository and setup it manualy, or you can follow instructions below and install GST Calculator plugin from your site dashboard.

GST Calculator Plugin Installation From WordPress Dashboard

1. Go to your WP Dashboard > Plugins > Add New item on left side menu.

2. Enter "GST Calculator" into search box on top right corner of the screen.

3. You'll get a list of available GST Calculators. Select the one you need and press "Install now" button.

4. Activate GST Calculator plugin and you are ready to use it.

GST Calculator Widget Activation & Setup

1. Find "Widgets" item on left side menu and open Widgets screen.

2. Find "GST Calculator" in the available widgets list.

3. Select that widget and drag it to appropriate sidebar.

4. You can change widget's title. Default title is "GST Calculator".

5. Or select check box and then change colors of text, borders and background. Choose colors matching your web site theme.

6. That's it. Your widget is ready to use.

USE A TEXT WIDGET

The Text Widget is one of the most commonly used WordPress Widgets that comes with every WordPress installation. It allows users to add text, video, images, custom lists, and more to their WordPress sites.

1. Click Appearance menu from the left-hand sidebar menu.

2. Click Widgets.

3. Either drag the text widget to the widget area (typically a footer or sidebar) where you wish it to appear (if your theme has that functionality).

OR

Click the Add button adjacent to the widget in question, select a destination sidebar if your theme has more than one and click the Save Widget button.

Your widget should now show up in your widget area of choice.

4. Click the Edit link, adjacent to your new text widget title; this will open the customization pane for that widget.

5. Type a title for your text widget in the Title text field.

Note:- this title WILL show up above your widget in your sidebar or other area if you configure it here.

6. Add the text or HTML code to the box below, or edit what is currently there.

7. Tick the Automatically Add Paragraphs box to wrap each block of text in an HTML paragraph tag (recommended for text).

8. When you're done making changes click the Save Widget button.

Remember! Basic HTML, XHTML, multimedia links and players, embeds, and JavaScript are easy to add to the WordPress Text Widget. Most embed codes from social sharing sites for multimedia will work in a WordPress Text Widget too, but active code and programming languages such as PHP will not work, as the widget will strip out code it cannot display.

WordPress Menus - How To Create And Use WordPress Menus

Create WordPress Menus

To create such a menu go to Appearance > Menu and first put in the name of the menu you want to create. Then push Save! this is important because you cannot place any links until you save the menu first.

Best practice for Menu naming is to give it the name where you want to use it, or what content you want to put in to it. I use Top Menu, Page Menu and Category menu’s for example.

After you saved your menu, you could get extra fields on the left hand side of the screen. If your theme supports it, you will see Theme Location Menu options like Primary navigation. You can have that new menu replace the theme default menu if you use that option.

Now you can add you pages or categories to the menu, select them on the left side and choose Add to Menu option. Hint: Under pages select View All first so you can select Home as well.

Once you added the page to the menu, you can sort them by dragging them to the right place and even drag them to a child page position. Click save when you are done and your first menu is ready.

Now create another menu for your categories and add the topics you like to show.

Showing Your WordPress Menus

You need to get your WordPress menus into your layout and bring the navigation structure to the front of your website.

The menu’s you just created are shown via Widgets, so go to the Widgets page first via Appearance > Widgets. Look for the widget that is called Custom Menu and drag that to your primary sidebar (or the widgets position you want to use).

If you open that widgets you can give it a title and select the menu you created from a drop-down menu.

You can use more then one Custom Menu widget on your site, just make sure you create a good navigation for your users.

If you want to make a WordPress website instead of a Blog, these custom menu’s are the way to go!

Special Custom Menu Options

In the custom menu creation screen you also saw another option called Custom Links. With custom links you can have a link in your menu that points directly to another website. Just give it a name, put in the hyperlink you want it to point to and add it to the menu of you choice.

You can also use this option to create a Non Linked menu item. A possible use could be that you want a section divider in your menu. To do this you use the custom menu option. Label it by using the Name you want to use and for the hyperlink you use http://# add it to your menu in the position you want to show it. Save the menu.

Open that menu item and remove the URL option and save the menu again. Now you have a menu item that is not linked.

Title Attributes And Custom Menu Fields

With any Menu item you can edit some extra options, with the most prominent one being the Title Attribute. The Navigation label is the name that is shown in the menu, the title attribute is shown if you hover over that menu item.

If you create a page menu, you could have very long titles in you menu items. By reducing / renaming the Navigation Label you can improved the menu option and if you put the longer page title in the Title Attribute your have the best navigation for your visitors.

There are a few extra special options which are not shown by default. If you want to see and use them, use the Screen Options on the right hand top corner and select the extra options you want to see.

This will show you the extra options.

Most of use will not use these options, but its good to know they are there.

This is what I want to share in this article. Please be honest & share your thoughts and suggestions in comment section. Make sure to subscribe our blog to receive latest updates.