Many people would like to create their own website. Some struggle to get started for various reasons. In this series of guides I aim to make this easier. There are many choices on the internet of where to create a free website. From WordPress and Weebly to Google sites, Wix and many more. Over the coming weeks I plan on creating these guides to help you get your site up and running. Nothing fancy to just enough to say that is a website and I did that.
I’ll show you how to add a page and if appropriate a blog on the same site, how to add a navigation menu and a contact form to allow visitors to leave you messages and how to add some buttons to link to your pages on social networking sites. There will be some stuff that can be done within the WYSIWYG (What You See Is What You Get) system of each website creation service and some that has to be coded in HTML (HyperText Markup Language). Where I have to use html I’ll show you the code and a link to more info on what I used at W3 Schools. This is a great resource if you need to find out how to do something in HTML or even CSS (Cascading Style Sheets).
I’m starting with WordPress.com as that is what I am currently using. I’ll pop a question over at the Facebook page for the next edition of the guide with a few choices of where you would like me to make a guide on next. There will be a lot of images in this guide clicking any image will open up a larger version with buttons to click through each image in that group of images. Single images open up in a new window. If any don’t please let me know. Grab a cup of your beverage of choice and we shall begin.
First we have to head on over to WordPress.com to begin the registration process. Click the get started button to begin.
Lets go back to My blogs and click on Blog Admin.
As you can see there are lots of items down the menu on the left, each of which may have various options underneath that. Lets start first of all by deciding whether this is a blog or a website. By default WordPress.com expects the front page of your site to be a blog roll page. This page shows either the full text of each post or excerpts of each post. You can if you wish change this to allow your site to have both a Home Page as well as a Blog page.
To do this we need to first of all make a new page. To do so click on Pages then Add New.
Use Home page as the title, as we will need to refer to it later. Enter the text you wish to be displayed when a visitor lands on your site. This could be a simple welcome message or a little about what you do. You can use the buttons in the bar to format your text and add media (pictures, music etc), polls and forms which I will cover later. On the right hand side you can see the Page Attributes box. This allows you to set the Parent Page and the template. The choices for the template will depend on what are made available in your chosen theme. If you have any images in your page you can choose one to be the featured image. Once finished you can choose to save as a draft to edit again later, preview which allows you to see what it will look like once published.
You can also change the posts visibility, who can see the page or post. Public is everybody, Password Protected means only those whom you have given the password to and Private is only those with access to the admin pages for your site can see this page. For your Home Page I recommend public so everyone can see it. Once you are happy click publish.
We are also going to need a page for blog posts to be shown on. So click Add New Page again.
This time just enter the page name I’m going to call this one Blog and then just publish the page. We do not enter anything other than the title.
Now we have to let WordPress know that we’re going to have a Home page and a Blog page. To do so Click on Appearance then Themes.
This will open the Theme customisation page. From the panel on the right, click on Static Front Page under Layout. Then Front Page Displays A Static Page. From the drop down menus select your home page name and blog page name under Front Page and Posts Page respectively as shown below.
Click Save and Publish to save your changes. Pop open the bar again and click on Close to return to the Manage Themes page.
Click on Theme options.
On this page you can choose various options depending on which theme you have chosen. As you can see in the image above the Skeptical theme allows us to choose the colour scheme and whether to show the RSS link in the Header. I’m going to choose the red theme and not to show the RSS link as I am going to add that in my social links widget which I will get to next. Remember to click Save Options to save your changes.
Next click on Widgets under Appearance and we will set up our widgets that appear on the right and bottom of each page or post when using the default template.
As you can see there are many options to choose from here. I’m not going to go into detail on each of them but I will highlight a few. The bulk of the window is taken up with the available widgets, each widget has a short description under it. To use a widget simply drag it to an open widget area on the right. Opening a widget area is as simple as clicking the triangle on the right of the widget title. Lets start by adding the Search widget to the Sidebar Widget Area by dragging it over. Notice that the box for the Sidebar widget got a little longer when we added the widget. We can add as many widgets as we want to each area it adjusts accordingly. Clicking the triangle to the right of the widget title allows us to make changes to the widget. In the case of the Search widget that allows us to change the title. I’m going to leave it blank but you can enter a name if you want.
I’m going to need some images for the Social links so lets upload them now. We need to go to Media and Add New.
From this screen we can either click Select Files to open a standard File Open Browse windows in your Operating System or you can find the files you want and drag them to the dotted box and drop. Once you chosen the files to upload a screen similar to the one below will be shown.
As you can see I have chosen 5 files to be used as my icons for the Social Media Links widget. Once uploaded click on Edit to view the attachment details page.
On this page you can see various details of the media item. In this case it is the icon for Facebook. Enter any details you want and take not of the File URL as shown on the right, we’re going to need that later. Once your finished entering details click the Update button to save your changes.
Next we’re going to set up the Social links widget. For this we are going to use a text widget which allows us to enter html etc. Note WordPress.com does not allow various objects to be embedded including flash objects. For more info see this page from the support site. http://en.support.wordpress.com/code/
Drag a text widget to the Sidebar widget area and drop it under the search widget. It should open on its own but if it doesn’t click the little triangle. For each Social Networking page we’re going to use a picture as a button which when clicked opens a new tab or window and goes to the appropriate link. The info on how to set this up can be found here http://www.w3schools.com/html/html_images.asp . I am using an image as a hyperlink. You will find the link to try that near the bottom of the page.
<a href"destination address"><img src="image address" alt="text to show when moused over" /></a>
First we need get the address for the image. This was the File URL that is said to take not of earlier. Lets enter that and see how that looks linking to the Easy as 1 2 PC Facebook Page.
<a href"http://www.facebook.com/easyas12pc" target="_blank"><img src="http://easyguideto.files.wordpress.com/2013/01/facebook40.png" alt="Easy as 1 2 PC Facebook Page">
target="_blank" Opens the link in a new tab or window depending on which browser is used to access the site.
Take care not to make any changes unless it is between quotation marks otherwise it will show as text on the page instead of this:
We do the same for each of the social links until we end up with something that resembles :
<a href="http://www.youtube.com/easyas12pc" target="_blank"><img src="http://easyguideto.files.wordpress.com/2013/01/youtube40.png" alt="Easy as 1 2 PC on Youtube" /></a>
<a href="http://www.facebook.com/easyas12pc" target="_blank"><img src="http://easyguideto.files.wordpress.com/2013/01/facebook40.png" alt="Easy as 1 2 PC on Facebook" /></a>
<a href="http://plus.google.com/116907261384504584106" target="_blank" rel="publisher"><img src="http://easyguideto.files.wordpress.com/2013/01/plus40.png" alt="Easy as 1 2 PC on Google+" /></a>
<a href="http://www.twitter.com/easyas12pc" target="_blank"><img src="http://easyguideto.files.wordpress.com/2013/01/twitter40.png" alt="Easy as 1 2 PC on Twitter" /></a>
<a href="http://http://easyguideto.wordpress.com/feed/" target="_blank"><img src="http://easyguideto.files.wordpress.com/2013/01/feed40.png" alt="Easy as 1 2 PC on RSS" /></a>
The eagle-eyed among you may have noticed I added a rel=”publisher” to the Google+ link. This is very useful for Google search ranking but also to authoritatively link your site to your Google+ brand page. I also use Rel=author when posting and link to my personal Google + Profile. If you have a Google + account I highly recommend adding these two little tags. To check that they are working you just enter your site address here : http://www.google.com/webmasters/tools/richsnippets.
Once viewed on the live page that should all look something like:
We continue adding widgets including the Meta widget which allows us to log in to the admin section of the site.
Let’s make a page where visitors can contact us without them needing our email address. Click on Pages Add New again.
We will call this page Contact Us and then click on the third button below the Page Title to Add a Custom Form.
This pop up window allows us to create a form. Moving your mouse over each field highlights it and brings up the options to Move or Edit the field. Clicking on Move allows you to drag and drop the field where you would like it placed. Clicking Edit allows you to edit each field. With option to change the label and also the field type. For more info on all the options available follow this link http://en.support.wordpress.com/contact-form/.
Arrange the fields as you like I’m going to leave it as is. Lets click on Email Notifications at the top. This allows you to enter an alternate email address to send the responses to and to change the subject line. There is no need to do this if you want the emails to go to your email address as registered with WordPress.com. If you do make changes remember to save them by clicking the blue Save and go back to form builder button. Once you have finished building your form click Add this form to my post to save the form. You will now see the short codes for the form. If you wish to enter text to go between fields carefully enter it between brackets e.g.”] text here [" If you enter text between these bracket [ ] you will cause errors in your form. Again when you have finished making any changes hit the publish button.
Next we will add a simple navigation menu to allow visitors to get around our site. To do this we click on Appearance and Menus.
Click Create Menu to begin creating our first menu. Different themes support different numbers of menus. Some allow more than one, whereas others including the Skeptical theme supports only one menu.
The first thing to do is give the menu a name I chose Navigation. Once you do that a new check box will appear with the option to Automatically add new top-level pages. Select this if you want all top-level pages to be automatically added. I prefer to leave this unselected to allow me create sub-menus and hide pages from the navigation menu. However you can check it if you want all pages to appear in your menu.
We add the Home page and the Blog page and the About page to the menu by checking the boxes and clicking Add to Menu. Notice that you can also add Categories to the menu. We haven’t created any Categories yet but they will become available to add to the menu once we have.
You can also add custom Links to the menu by entering the URL and label. Once you have items in the menu you can rearrange them by dragging and dropping just like the widgets. If you indent one item below another then it will become a sub item of the item above. Under the Theme Locations box you can choose the Primary Navigation (menu) to use for your site. Select your menu from the drop down.
Our menu now looks like this.
Don’t forget to click Save Menu to save any changes you have made.
Lets add a custom header to our site. Click on Appearance then Header. The Skeptical theme prefers a header image that is 940 x 200 pixels. In true Blue Peter style, here is one I made earlier :D
All that’s left to do now is edit the About Page to let visitors know more about the site. This is done by clicking Edit under About in the Pages section.
WordPress.com allows you to connect your blog to social network sites and automatically share posts with fans and friends. To do so click Settings then Sharing.
Here we have the Publicize settings page. Entering the details for each connection will allow WordPress.com to share your posts on these social network sites.
To see the finished site as used in the guide head over to http://easyguideto.wordpress.com
Thank you for reading this guide which turned out longer than I expected but hopefully I gave you enough information to get started with a WordPress.com site.
If you have any questions feel free to ask below or on the Facebook or Google+ pages.
Please spread the word, share on Facebook, Twitter etc. Sharing buttons are just below. Thank you.
Author: William Winslow
Find me on Google+