Designing a simple wordpress site - Widget

Open the web site we created ( explained in Introduction to Wordpress ) , and login to get access to the Admin area.

Step - 1 : Refer Designing a simple wordpress site -Theme
Step - 2 : Refer Designing a simple wordpress site - Pages
Step - 3 :  Refer Designing a simple wordpress site - Plugins

Step - 4 :  Refer Designing a simple wordpress site - Comments

Step - 5 :  Refer Designing a simple wordpress site - Menu

STEP - 6

In the tutorial "Designing a simple wordpress site - Pages" , we are re-designing the HOME page.

See the complete HOME page design,

We changed the 1st part of the web site (instead "Hello World" , we include "LAN-DEC Engineers" etc.

That is ,

Note the below portion as Home Widget 1 ,  Home Widget 2 &  Home Widget 3 .

Now we have to change this .
Refer Designing a simple wordpress site - Plugins also .

In the admin panel ,take the option Appearance --> Widget 
The widget in the admin area are (Except in the HOME page) ,

And see the page with widgets in the site as ,

Drag each items , we do not want in the pages , to the left side , where there is a place for keeping the inactive  widgets.
I kept SEARCH only  .All the inactive widgets are thus moved to the corresponding area , as

In the admin panel ,take the option Appearance --> Widget , only one widget remains then , as

Refresh the site , and we can see that , there is only one widget (SEARCH) remains .

To change the HOME page widget , 

Goto  Appearance --> Widget , you can see there Home Widget 1 ,  Home Widget 2 &  Home Widget 3 . 

Drag the widgets from the left side to the first widget (say , Home Widget 1 ).

If you want to include any other widget , which is not there in the left side widget list , then click Plugins --> Add new  .

Install the plugin you want , 

then go to Appearance --> Widget again , select that installed widget , drag and drop to Home Widget 2 ..etc.

Repeat the steps.

You can understand this portion only if you covered all the other 5th steps , given above.

Difference between Plugin and Widget :

You may have this doubt now ...

Simply telling , a Plugin will give you a Widget.

Or , in order to get a Widget , we have to install corresponding Plugin .

Steps I did in designing the rest portion of the web site :

1. There are 3 widgets in the HOME page of the site. First goto Appearance--> Widget and Drag the "Calendar" widget to Home Widget 1 .
2.  Installed and activated a plugin named "Black Studio TinyMCE Widget" . It is  wordpress editor.It will help us to input text in both visual and HTML mode.Again visited to Appearance--> Widget and drag the installed Black Studio  widget to Home Widget 2 . Gave the title as "Join us on FB" (Visual mode) , and click "Save" .Then Installed and activated a plugin named "Facebook like box .Then goto Appearance--> Widget and Drag the widget to Home Widget 2 .
3. Downloaded a plugin named "Loading Page" (Google search) and uploaded it to the Admin panel.Then activate it, and goto Appearance--> Widget and Drag the widget to Home Widget 3 .

=========================================================================

Back to Wordpress

Designing a simple wordpress site - Menu

Open the web site we created ( explained in Introduction to Wordpress ) , and login to get access to the Admin area.

Step - 1 : Refer Designing a simple wordpress site -Theme
Step - 2 : Refer Designing a simple wordpress site - Pages
Step - 3 :  Refer Designing a simple wordpress site - Plugins

Step - 4 :  Refer Designing a simple wordpress site - Comments

STEP - 5

In the tutorial "Designing a simple wordpress site - Pages" , I mention that we can re-order the pages created .

Menus are used for this purpose .

In order to rearrange the pages in a particular order ,
Select Appearance --> Menus from admin panel of the web site .

Then we can see ,

Give a name for the menu (say menu1) , and click "Create Menu" , as shown below : 

Some other options can seen then , select "header menu " and click "Save" .

Note that , some other options also are there . But we have created all the pages in the top of the page of the web site.

So we choose "header menu " .

Now select all the created pages and click "Add to Menu" 

(Note that HOME page is not here in the list) .

Then we can see that , all the created pages come under "Menu" on right side , as shown :

Drag each item into the order you prefer. Click "Save Menu" .

I choose the order of the page as ,

Note that HOME page is not here in the list .

Visit the web site and see the HOME page there . 

To include HOME page  also in the MENU , do this , give the url of the home page in the URL , and give link text name as HOME .

Then click "Add to Menu" .

Then we can see that , the HOME page also come under "Menu" on right side , as shown :

Now drag it in the top of the Menu as shown :

And , click "Save Menu" .

Now go back to the site , and refresh to view the pages in order , as ;

========================================================
Next , we are going to make changes in the HOME page. .
Click  here to understand about "Theme option" in a wordpress page (STEP - 2 (E)).
Back to wordpress

Designing a simple wordpress site - Comments in a page

Open the web site we created ( explained in Introduction to Wordpress ) , and login to get access to the Admin area.
Step - 1 : Refer Designing a simple wordpress site -Theme
Step - 2 : Refer Designing a simple wordpress site - Pages
Step - 3 :  Refer Designing a simple wordpress site - Plugins

STEP - 4

The above given picture is the portion of our "About us" page in the site.
Note that , this page has a comment section below that.
You can sometimes feel that , some pages doesnt need a comment section.

In order to avoid a comment box from a page , do this :

From the admin panel , select the "Pages" in which you do not want to include a "Comment Box" .
For example , I do not want a comment box in "Contact us page".

So , select that page.

You can see "Screen Option" on the top of that page .

Click the arrow as shown in the figure. Then we can see that ,

Click "Discussion" . Whatever option we selected , the corresponding field will be displayed in the bottom of the page , as , 

You can see , two options are there for "Discussion" . Both options are ticked .And if we want to avoid comment box in the "About us" page , just un-check the 2 options .That is , 

Now click "update" and refresh our site to view the result.

========================================================
Next , we are going to Create Menu .
Click NEXT to understand about "Menut option" in a wordpress page.
Back to wordpress