With reference to the earlier blog post : ‘How to install WordPress in 3 simple steps?‘, you can now begin creating your WordPress website by follow the steps shown below.
Login to your WordPress Dashboard.
Key in your website URL follow by ‘/wp-admin‘, you will see the login screen as shown below. Key in your ‘login id‘ and ‘password‘ to access to the WordPress Dashboard to begin creating your website.
Configure the Settings
Go to ‘Settings‘ and click on ‘Permalinks‘, you will be directed to the Permalink page to begin your site configuration.
Click on the ‘Post name‘ to select the text-format for representing your url extension for easy reading and reference. Next click on ‘Save changes‘.
Next, under ‘Settings‘, select ‘Discussion‘ to configure the Discussion settings. Under ‘Default article settings‘, untick the second and third box. scroll down and click ‘Save changes‘.
Configure the Theme
In the dashboard section, click on ‘Appearance‘, then ‘Themes‘, you will see the following screen. Click ‘Add New‘.
You will be directed to the following screen. In the seach box, type in ‘virtue‘ to search for Virtue theme. You will see the Virtue Theme appeared as shown below.
Click on the tab : ‘Install‘.
The Virtue Theme will be successfully installed. Next click on ‘Activate‘.
Configure the Plugins
Once Virtue Theme has been successfully activated, click on the ‘Begin installing the plugin‘ as shown in the screenshot below.
Next, you will be directed to the screen shown below. There is this plugin : ‘kadence Toolkit‘, click on this button : ‘Install‘ to complete the installation.
Once the installation has completed, click on the ‘Return to Required Plugins Installer‘.
You will see the following screen, Click on ‘Activate‘ to activate the Plugin.
You will see ‘The following plugin was activated successfully : kadence Toolkit’. Click on ‘Return to the Dashboard‘ .
Configure the Theme Options
Under ‘Appearance‘, select ‘Theme Options‘, you will see the following screenshot. Click on ‘Main Settings‘, to begin configuring the layout of the website.
- Under ‘Site Layout Style‘, click on the box without border to select a wide site layout style format for the website.
- Under ‘Footer Widget Layout‘, click on the box with a 3-column footer layout.
- Under ‘Logo Options‘ panel, ‘Logo Layout‘, select the equal 2-column layout for logo and text alignment.
- Under ‘Logo‘, click on ‘upload‘.
You will see the following screen shown below. Click on ‘Upload Files‘, then ‘Select Files‘.
A file folder will pop up. Go to the file folder which you saved your logo, select the logo and click ‘Open‘.
You will see the logo which you have selected for use, highlighted with a tick as shown below. Click on the button : ‘Select‘ to select the logo.
In the screen below, you will see that your logo has been successfully uploaded.
Next, scroll down you will see ‘Site Tagline – Below Logo‘. You can enter any tagline of your choice or simply leave it blank. Once this section is done, click on the ‘Save Changes‘ button to save all your selections for the Main Settings section.
The next configuration we want to do is the ‘Home Layout‘. Click on the ‘Home Layout‘, you will see the following screenshot.
- Under ‘Display a sidebar on the Home Page?‘, select the one with a sidebar on the right.
- Under ‘Choose a sidebar on the Home Page?‘, select ‘Primary Sidebar‘.
Once the above is done, click on the ‘Save Changes‘ to complete the configuration for this section.
The next configuration we want to do is the ‘Menu Settings‘. Click on the ‘Menu Settings‘, You can explore the different Font, Font Weight, Font Size or Color for your menu. Once you have selected the choice of font and its parameters, Click on the ‘Save Changes‘ to complete the configuration for this section.
Last but not least, the next configuration we want to do is the ‘Misc Settings‘. Click on the ‘Misc Settings‘. You can “select ‘On‘ to ‘Hide Image Border‘, enter your ‘Contact Form Email‘, and insert a ‘Footer Copyright Text‘ for your website. Once you have made your completed the above-mentioned, click on the ‘Save Changes‘ to complete the configuration for this section.
Add or Edit Pages
Go to ‘Pages‘, and select ‘All Pages‘, you will see the following screen shown below. The default theme that come with WordPress installation has already had a ‘Sample Page‘ created to help you with the page creation. For now, you can click ‘Add New‘ to create a new page.
You will be directed to the page : ‘Add New Page‘ shown below. In this section, give a title to this page. Let’s name it ‘Home‘. Next, to enable you to utilise the full features of the text editor, you can click on the ‘Toolbar Toggle‘ to expand the features.
In the following screen below, you will see that the text editor’s features are fully visible now.
Next, you are ready to type in the texts. In the following example, some dummy texts are typed in for demo purpose. In a webpage, you will commonly see, besides strings of texts, images and videos. Click on the ‘Add Media‘, to begin inserting images.
You will be directed to the ‘Add Media‘ screen shown below. You can choose to upload files from your computer by clicking on the ‘Upload Files‘ or if the files are already in your server, you can click on ‘Media Library‘ to get your image files from there. In this example, since there is no images in the media library, you can click on ‘Uploads Files‘ to select a image from your computer. Once the image is being uploaded to the Media Library, there are options of different sizes : ‘Thumbnail, Medium, Large, Full Size‘ to choose from. Once you have decided a size, click ‘Insert into page‘.
You will see that the selected image has been inserted into the page below the text. Next click ‘Publish‘.
Now, you can open another tab, enter your website URL to view your website. Everytime after making changes to the website, you can press ‘F5‘ to refresh your site, you will be able to see your changes updated accordingly. In the following screen, you can see that the earlier few steps we have performed are now updated and reflected in our website :
- Logo inserted
- Tagline below Logo
- The page title : ‘Home’, with the dummy texts and image
In this section, let’s see how we work with columns. Postion your cursor on the space below the image, then click ‘Insert Column‘.
A pop-up screen appears for us to select the type of columns we want to use. In this example, the ‘Two Column‘ option is selected as shown below. Click on ‘Insert‘ to proceed.
Once done, you will see the following coding appeared. Not to worry, no coding is required to continue with this site creation. Simply highlighed ‘add content here‘ and type in the texts. This is a 2-column text layout, hence, you need to type in the text in the 2 designated ‘add content here‘ space accordingly.
The screen below provides an example how this is done. If you have done the mentioned, click ‘Update‘ button to proceed.
Now, go the your website URL, press ‘F5‘ to refresh and view the site. You will see that the 2-column texts are presented as shown below.
At this juncture, you have already known how to insert text and image, let’s proceed to insert video into your website. Open another tab, google search, for example, ‘how to install wordpress video‘. Make a selection on the various suggested search titles and hit the ‘Enter‘ key.
You will be directed to a page which offer you many topic selections based on your search keywords. In this example, we are using ‘Famous 5 minute WordPress install Tutorial – YouTube.’ Highlight the URL of this site, right click your mouse and select ‘Copy‘.
Go back to your ‘Home‘ page, click ‘Insert Youtube‘ icon’,
An ‘Insert YouTube Video‘ pop up screen appears, paste the copied URL into the ‘YouTube Link‘ field provided and click ‘Insert‘.
In this screen below, you can see a string of code is being inserted into the text editor space. Click ‘Update‘ to proceed.
Now, go the your website URL, press ‘F5‘ to refresh and view the site. You will see that the YouTube video is being inserted into your ‘Home’ page as shown below.
WordPress text editor allows us to have different font size and it is presented as ‘paragraph’, Heading 1, 2, 3, 4, 5 and 6 shown below. Let’s take a look at different font size, taking ‘Heading 3‘ for example, click on the drop-down menu, select ‘Heading 3‘.
Type in the texts, in this example, ‘How to hyperlink Image and Text‘ is keyed in.
Let’s see how we can do a hyperlink of an image, a text and a link to an e-mail editor. First, insert an image. In the following example, a PayPal image is being inserted. Next, ‘Visit Paypal Singapore | Contact PayPal Singapore‘ is being typed in too.
To hyperlink an image, simple select the image by clicking on it, click on the ‘Insert/edit link‘ icon,
a link box appears. Type in the URL you want the image to be hyperlinked to and click on the ‘Apply‘ button.
Do the same for the text ‘Visit PayPal Singapore‘. Highlight the text, click on the ‘Insert/edit link‘ icon. A link box appears, type in the URL you want the text to be hyperlinked to and click on the ‘Apply‘ button.
Last, for the ‘Contact PayPal Singapore’, we are making this link for site visitors to contact the site owner via email. Hence, by clicking on this text link, it will allow the email editor to be popped up for the mentioned purpose. Highlight the text, click on the ‘Insert/edit link‘ icon. A link box appears, type in the following :
(in this case, the command ‘mailto:‘ is required before you complete with your email address)
then click on the ‘Apply‘ button. Next click the ‘Update‘ button to update all insertions.
Now, go the your website URL, press ‘F5‘ to refresh and view the site. You will see that the above insertions are updated in your ‘Home’ page as shown below. You can click on the image, texts to see the effect of this hyperlink.
For ‘Contact Paypal Singapore‘, once click, you will be brought to your email editor screen for you to begin writing your email to the site owner. See example below.
Working with Widgets.
Click on ‘Appearance‘ followed by ‘Widgets‘, you will see the screen as shown below. In this widgets section, there is the Primary Sidebar, Sidebar1, Footer Column 1, Footer Column 2, Footer Column 3. In the Primary Sidebar, the default widgets employed are : Search, Recent Posts, Recent Comments, Archives, Categories and Meta.
To remove a widget, simply select the widget, hold and drag it to the left, as shown by the red arrow. Similarly, to add a widget, simply select and drag the widget you want to use onto the Primary Sidebar or Footers. You can also realign the position of the widget up and down simply by select the widget, hold and drag up or down.
In the following example shown below, we want to insert a Image widget onto the Footer Column 1. Simpy by clicking on the down arrow of the Footer Column 1, the footer is expanded. We select the image widget and drag it over to the Footer Column 1. Next, we insert the image by clicking on the ‘Insert Image‘ button and to add a URL, we simple enter the URL into the field box of ‘Link to:‘ Then click on ‘Save‘.
For Footer Column 2, let’s insert a Page widget. Select the Page widget and drag it over to the Footer Column 2. Label the ‘Title:‘ Pages and for the ‘Sort by:’ select Page title, then click on ‘Save‘.
For Footer Column 3, let’s insert a Text widget. Select the Text widget and drag it over to the Footer Column 3. Label the ‘Title:‘ Contact Details and for the Text Editor section, type in your contact address, contact number and email, then click on ‘Save‘.
Now, go the your website URL, press ‘F5‘ to refresh and view the site. You will see that the contents you have just placed in the respective widgets are presented accordingly under the Site Footer section of your website.
Work with Menus
Click on ‘Appearance‘ followed by ‘Menus‘, you will see the screen as shown below. First, under ‘Menu Name‘, enter a name for the menu, in this example, we label the menu : ‘Main‘. Once done, click on ‘Create Menu‘.
You will see the following additional items appeared on the menus screen.
Under ‘Pages‘ – ‘Most Recent‘, tick on ‘Home‘ and ‘Sample Page‘, then click ‘Add to Menu‘. Once done, click ‘Save Menu‘.
You will see that the 2 selected pages : ‘Home‘ and ‘Sample Page‘ are added to the menu structure. Now, you can choose where you want your menu to appear. In this example, the ‘Primary Navigation’ and ‘Footer Navigation‘ are ticked. Once done, click ‘Save Menu‘. You have successfully created your menu for your website. So, whenever, you have created new page(s), you can come over to this section to add your page(s) to the menu.
For now, you have successfully acquired the basic skills on how to create a website. Utilising the skills learnt, do continue to work on the other pages. In no time, your website should be up and ready to serve your needs.