a step by step guide on word press website

103
A step by step guide on WordPress website for starters By Jatin Chhabra

Upload: jatin-chhabra

Post on 05-Sep-2014

1.079 views

Category:

Technology


0 download

DESCRIPTION

A step by step guide on word press website for starters. This guide has 5 chapters which will reveal that whats the correct procedure to install featured & free wordpress themes, install important plugins like Yoast SEO and social sharing button, creating pages and a menu bar and having complete control in menu structure, Assigning home page and blog post page etc.

TRANSCRIPT

Page 1: A step by step guide on word press website

A step by step guide on WordPress website for startersBy Jatin Chhabra

Page 2: A step by step guide on word press website

This is the Dashboard Panel of wordpress sites. To open this just add /wp-admin

after your website url. Ex- www.abc.com/wp-admin

Page 3: A step by step guide on word press website

This is the Dashboard of your wordpress site. In this guide I will cover every basic detail a started needs to know on “How

to create a Wordpress website”

Page 4: A step by step guide on word press website

Ch 1-Change the website theme & install 2 important Plugins. Slide 5Ch 2-Create a minimum of 5 pages {number of pages depend upon your requirement & industry} Slide 33Ch 3- Create a navigation menu and properly sort the Menu Bar Slide 43Ch 4- Setting Home page and Blog Post. Slide 57Ch 5-Add content, images & video on a Page. Slide 69

CHAPTERS

Page 5: A step by step guide on word press website

Ch 1-Change the website theme & install 2 important Plugins. (Yoast SEO & Simple Share Button)

Page 6: A step by step guide on word press website

WordPress Free Themes

Page 7: A step by step guide on word press website

Click on Appearance or Theme on your WordPress website Dashboard.

Page 8: A step by step guide on word press website

Currently we have 3 themes available in our collection (these are default themes which are naturally available when we install wordpress) Now click on “Add new” to get knowledge on how to install a free wordpress theme.

Page 9: A step by step guide on word press website

Either choose theme from the below configurations or click of “Featured” to get some of the finest free wordpress themes freely available.

Page 10: A step by step guide on word press website

Choose a fine theme from the below list and click on “Install Now” below the any theme preview. Here I have chosen the one in the 2nd row, right hand side.& name is Sixteen

Page 11: A step by step guide on word press website

Now just click on “Activate” to install the selected theme and add it in your existing theme collection.

Page 12: A step by step guide on word press website

Now we have a installed a new theme on our website and its “Active”. Just open website in a new tab and have a view of your new theme.

Page 13: A step by step guide on word press website

Now we have properly installed a new theme. Now go back to your wordpress dashboard where we will install 2 important plugins.

Page 14: A step by step guide on word press website

WordPress Plugins

Page 15: A step by step guide on word press website

Now click on Plugins to install “Yoast SEO” plugin which we will use to update the “On Page” details of every webpage of our website.

Page 16: A step by step guide on word press website

Now click of “ADD NEW” button from any of these 2 buttons.

Page 17: A step by step guide on word press website

Type “YOAST SEO” in the Search box and click on “Search Plugins”

Page 18: A step by step guide on word press website

Now make sure that you install the original Yoast Seo plugin. So choose and click on INSTALL NOW on “Wordpress SEO by Yoast created by the famous Joost de Valk.

Now make sure that you install the original Yoast SEO plugin. So click on INSTALL NOW on “Wordpress SEO by Yoast plugin created by the famous Joost de Valk.

Page 19: A step by step guide on word press website

Click on “Activate Plugin” to activate WordPress SEO by Yoast.

Page 20: A step by step guide on word press website

Now we have one more Plugin in our “Installed Plugin” collection. You will also notice a pop-up by Wordpress SEO which is seeking your permision for tracking. You should allow this.

Now we have one more Plugin in our “Installed Plugin” collection. You will also notice a pop-up by Wordpress SEO which is seeking your permission for tracking. You should allow this.

Page 21: A step by step guide on word press website

Anther important plugin which we should have is a Social Sharing Button plugin. There are many free and paid plugins of social sharing. Here we will install “Simple Share Buttons Adder” by “David S. Neal”. So just click on “Add New” button.

Page 22: A step by step guide on word press website

Type “Simple Share Button” in the search box and click on Search Plugin.

Page 23: A step by step guide on word press website

Now click on Install Now below Simple Share Button by David S Neal.Now click on Install Now below Simple Share Button Adder by David S Neal.

Page 24: A step by step guide on word press website

Click on Activate Plugin

Page 25: A step by step guide on word press website

Now click in configuration to update the settings of Social Share Button.

Now click in configuration to update the settings of Social Share Button. Either click on configuration above or click on Settings under our installed Simple Share Buttons Adder.

Page 26: A step by step guide on word press website

Choose the location where you want your social share buttons should appear. So lets choose Homepage, Pages and Posts.

The 2nd option is Placement. Here the plugin is asking us that do you want to show the social share button After the content, Before the content or Both. So lets Choose Both.

Page 27: A step by step guide on word press website

3rd option is Share Test. I will suggest to remove this content as this feature will automatically create a link on your website of the Plugin Creator. So just delete the content “Don’t be selfish”

Now scroll down and check the nest slide.

Page 28: A step by step guide on word press website

4th Option is Image Set where we can choose from the available custom made share button options. Currently just choose the default one Somarca.

Page 29: A step by step guide on word press website

Now we will drag Social Media Platform from the “AVAILABLE” section and drop them in “SELECTED” section. Then just click on SAVE CHANGES button in the bottom of the page.

Page 30: A step by step guide on word press website

After clicking of save you will get this message that Your settings have been saved. Now click on “Counters”

Page 31: A step by step guide on word press website

Check the SHOW option is Share count. This feature will allow to show the total numbers of social share you web page receives.

Let the other 2 settings remain as default and click on Save Changes in the bottom.

Page 32: A step by step guide on word press website

Now we have successfully installed our Social Sharing Plugin (Simple Share Button)

Page 33: A step by step guide on word press website

Ch 2- Create a minimum of 5 pages {number of pages depend upon your requirement}

Page 34: A step by step guide on word press website

Click on Pages or All Pages on your Wordpress Dashboard

Page 35: A step by step guide on word press website

CLICK ON PAGESYou will notice that you already have a existing page on Pages Section with the name of Sample Page. Now we will start creating 5 new pages along with this Sample Page. So just click on “Add New” from the available 2 options.

Page 36: A step by step guide on word press website

Write the title of your page ex- Home (Which I have written) and just write some content in the below content box. View the next slide.

Page 37: A step by step guide on word press website

On the same page you have a Publish box. Here you can save the work by clicking on Save Draft, preview the look & feel of the page by clicking on Preview button or in this case click on Publish button to create the page.You also have a 4th option “Move to trash” to delete to page. So just click on the blue Publish to create a page.

Save Draft

Publish Button

Preview

Page 38: A step by step guide on word press website

Now you can notice that we have “Update” written instead of “Publish” and above we have 2 new buttons “Edit” and “Get Short Link”Via edit you can change the url content of your page and via short link you can get a new short URL for your page, which we do not prefer.

Page 39: A step by step guide on word press website

Now click on All Pages under Pages section to view that how mane Pages we have created till now.

Page 40: A step by step guide on word press website

Now you can see that we have 2 web pages (Home and Sample Page). Also below a published page we get 4 options- Edit, Quick Edit, Trash and View. We only get these 4 options in a published page.

If you written some content and not clicked on update (or have clicked on save draft) you will have a page mentioned in the All Page list but there will be a Draft mentioned along with page title. Which implies that the page isn’t live or Published.

Page 41: A step by step guide on word press website

Now as we have created Home page. So create 4 more pages with the same process. From “Add New to Publish”

Page 42: A step by step guide on word press website

So I have created 4 more pages (About Us, Blog, Contact Us and Services) with the same procedure as we created Home Page.

Page 43: A step by step guide on word press website

Ch 3- Create a menu and properly sort the Menu Bar

Page 44: A step by step guide on word press website

As you can see that the pages which I have created gets automatically update on the site’s Menu Bar. Though I haven’t saved or created any Menu Structure, plus I want to arrange the pages as per my choice. Like I want Services in place of Blog and remove an extra Home option from the menu Bar. So to do so I will return back to my Dashboard.

Page 45: A step by step guide on word press website

Click on Menus under Appearance.

Page 46: A step by step guide on word press website

1st I will type a name (any name) in the Menu Name and click on Create menu button from any 2 options.

Page 47: A step by step guide on word press website

You will notice that we have a new tab option name Manage Locations after saving a menu name. So just Click on that.

Page 48: A step by step guide on word press website

Here we will Choose our Primary Menu (the one which we want to display on our website). So just click on Select a Menu.

Page 49: A step by step guide on word press website

Now I am getting an option name Menu 1. This is the name which I have given while I created a Menu in slide 46. So just choose your created menu and click on Save Changes, right hand side.

Page 50: A step by step guide on word press website

You will get this line that “Menu Location Updated”. Now just click on Edit Menu above this line.

Page 51: A step by step guide on word press website

This is Menu Structure and in the same order your website menu is visible. Here we will 1st Remove the extra Home tab which has Custom mentioned on it. So just click on it.

Page 52: A step by step guide on word press website

And just click on Remove.

Page 53: A step by step guide on word press website

So we have removed the extra Home page. Now just arrange the menu tabs. Here we just need to drag the page and drop the as per our requirement.

Page 54: A step by step guide on word press website

Now I have arranged the pages as per my requirement (Home, About Us, Services, Sample Page, Contact Us and Blog). So now I will just click on Save Menu

Page 55: A step by step guide on word press website

Come back to your website and refresh the page and you will find that the menu bar structure is as per your selection.

Page 56: A step by step guide on word press website

1. If in future you are creating any new page and you want that, the new page automatically gets added in your created Menu Structure than just tick Auto Add Pages below your saved Menu Structure.

2. Or you can leave it blank and every time you create a page than go to Menus section, tick the page under Pages section and click on Add to Menu to land that new page in your saved Menu Structure.

Page 57: A step by step guide on word press website

Ch 4- Setting Home page and Blog Post.

Page 58: A step by step guide on word press website

Click on Customize under Appearance.

Page 59: A step by step guide on word press website

Click on Static Front Page.

Page 60: A step by step guide on word press website

Choose A Static Page

Page 61: A step by step guide on word press website

Click on Select under Front Page.

Page 62: A step by step guide on word press website

Now Choose the page which we want to make as your main index page. Like websitename.com. So lets choose Home over here.

Page 63: A step by step guide on word press website

Click on Select under Post Page.

Page 64: A step by step guide on word press website

Now Choose the page which we want to make as the blog post page. Like websitename.com/blog. So lets choose Blog over here.

Page 65: A step by step guide on word press website

Click on Save & Publish

Page 66: A step by step guide on word press website

Now just click on Close.

Page 67: A step by step guide on word press website

Now our Home page is our main page.

Page 68: A step by step guide on word press website

And our Blog page is the main page where our posts will be visible..

Page 69: A step by step guide on word press website

Ch 5- Add content, images & video on a Page.

Page 70: A step by step guide on word press website

Click on Pages to open an existing Page.

Page 71: A step by step guide on word press website

Click on Pages to open an existing Page.

Click on Edit below any page. Here I have chosen About Us.

Page 72: A step by step guide on word press website

The above is the Title Box where we mention the Name of the page and below is the content box where we will 1st write some content

Page 73: A step by step guide on word press website

I have just written 3 line content as Heading 1, 2 & 3 and now we will convert them in H1, H2 and H3 tag which we learnt on On-Page SEO class.

Page 74: A step by step guide on word press website

1st select Heading 1.

Page 75: A step by step guide on word press website

And than click on content style tab in the 2nd row. If you aren’t viewing 2nd row than just click on the last icon of 1st row,

Page 76: A step by step guide on word press website

Now we have converted 1st line content as H1 tag. Similarly do the same for Heading 2 and 3 and convert them as H2 & 3 tag.

Page 77: A step by step guide on word press website

Select content in 2nd row.

Page 78: A step by step guide on word press website

Choose Heading 2.

Page 79: A step by step guide on word press website

Select content in 3rd row.

Page 80: A step by step guide on word press website

Now we have converted all three lines as H1, H2 & H3 tag. So just click on Update and view the page is a separate window.

Always update any changes made in a page otherwise that won’t be saved. After clicking on update. Just click View Page below Title box “About Us”.

Page 81: A step by step guide on word press website

All H1, H2 & H3 tags are properly updated. Now we will add some content below these Headings,

Page 82: A step by step guide on word press website

Return back to About Us page and write some content below Heading 3.

Page 83: A step by step guide on word press website

After adding content, click of update to save the work. Then go back to your site About us page, refresh it and view the changes.

Page 84: A step by step guide on word press website

Content below Heading 3 is live on About Us Page

Page 85: A step by step guide on word press website

Now lets add a Picture below the content.

Page 86: A step by step guide on word press website

1st click in Add Media button.

Page 87: A step by step guide on word press website

A pop-up will appear with the name of Insert Media. Above you have 2 options “Upload Files” from here we upload pictures in our website from our computer, which we will do in next slide and 2nd is Media Library which will be the collection of all of our images which we have uploaded from our computer.

Page 88: A step by step guide on word press website

We are in Upload flies and we will click on Select Files to upload images from our computer.

Page 89: A step by step guide on word press website

Now choose any image from your computer and click on Open

Page 90: A step by step guide on word press website

The image has been updated. But before updating this image in our page we will update some settings. Check next slide.

Page 91: A step by step guide on word press website

On right hand side we will make some changes in image structure. Title, Caption & Alt Text. Alt text is important as here we mention what image is about for search engines. Caption is the content which is visible below the image which will be visible on the page and Title is the heading of the content. So just mention the same content which you have added in caption. 4th description is optional.

Page 92: A step by step guide on word press website

Below we have ATTACHMENT DISPLAY SETTINGS. Here 1st option is Alignment (used to select the alingment of the image on the page), 2nd is Link to (preferably I will choose none) and is the size (always prefer the exact size of the image) and just click on Insert Image button in the bottom right.

Page 93: A step by step guide on word press website

Image is inserted in the page so just click on Update and check the update on your website. (Do refresh your website after every update)

Page 94: A step by step guide on word press website

Image is properly updated in the About Us page of our website.

Page 95: A step by step guide on word press website

And lastly we will add a YouTube video below the image. So 1st click on Text.

Page 96: A step by step guide on word press website

This the HTML structure our work which we have previously added. But in order to add a video we need to add a “Embed Code” which is in HTML structure.

How to get this code? Check the next slides

Page 97: A step by step guide on word press website

Open any video on YouTube and click on Share tab.

Page 98: A step by step guide on word press website

Now click on Embed.

Page 99: A step by step guide on word press website

This is the Embed Code which we will add in the HTML structure discussed in slide 84.

Page 100: A step by step guide on word press website

Paste the Embed Code from the previous slide and click on Update.

Page 101: A step by step guide on word press website

Refresh your page and you will find a YouTube video. (You can always change the size of this video.

Page 102: A step by step guide on word press website

Updated H1, H2 & H3 tag.

Content or Paragraph

Image with Caption and Alt Text

And a Video

Page 103: A step by step guide on word press website

That’s all folks