September 11, 2018

How to build your own website

website

Building a website difficult? No! At least, not if you opt for an easy content management system like WordPress.

What is WordPress?

Chances are you sometimes from WordPress have heard. It is one of the most famous and popular platforms to experience a website. WordPress is a so-called cm, which stands for the content management system. It is open-source, which means that everyone can use it for free, both for personal and commercial purposes. In the beginning, the system was mainly aimed at bloggers, but this is no longer the case. You can now, for example, create your own webshop, design a site for your business or restaurant, or present it as a designer or photographer.

There are two versions of WordPress: WordPress.com and WordPress.org. The first is a commercial version of WordPress, here you can build a simple website on the servers of parent company Automattic, you pay a certain amount per month. However, we focus on WordPress.org, this version you submit yourself to a host of your choice. This offers many advantages: you can choose a provider yourself, you can install themes and plug-ins and you can completely customize the website. On https://wordpress.org read more information.

 Web host

Before you download WordPress you have to choose a web host. For this article, we use So Hosted, a USA hosting company, but of course, you can use any other host. The steps that have to do with the installation can therefore deviate. You need two things from a web host: a domain name and space on their servers where you will put your website on. Most hosting providers offer a combination package for this. The first step is to investigate whether the desired domain name is still available. The costs of a domain name per year are often the same for the various hosting providers. However, there is a difference in the type of domain name: for .com you pay about 12 euros per year, for a .audio, .auto or .hosting domain you can lose hundreds to thousands of euros per year.

After selecting the domain and the name, click on Register and choose which hosting package you want to purchase with your domain name. The prices for the hosting package are shown per month, often about 5 to 10 euros, depending on the provider and the services offered. It is important that the web hosting supports MySQL databases, that you can set up multiple e-mail accounts, offer SSL support and that you get unlimited data traffic (or at least many gigabytes). How much server space you can use is also important. For a small website, 5 to 10 gigabytes is more than sufficient, only if you plan to upload a lot of audio or video files to your website, do you need more gigabytes.

You need two things from a web host: a domain name and space on their server

Preparations

When you have ordered everything, you will receive all the data from your hosting provider within a few hours. This concerns the account details of the hosting provider so that you can create new email addresses or automatically install WordPress, and a username and password for the FTP server so that you can upload files from your PC to your web server. If your web host can automatically install WordPress for you on the server, you will also receive the access codes, together with a username and password of the used MySQL database.

Each and every one of these is all data that you need to save! The backend of a website at SoHosted is provided by Plesk, this is an environment from which you can set all kinds of things concerning your new website. You can find this at My Services / <your website> / Manage web hosting. Click Open Plesk. At the bottom left, click WordPress and choose Install to automatically install WordPress. If you use a different hosting provider, this can look completely different, especially if the host does not use Plesk.

Install

Plesk has automatically created a user and password for WordPress. To view the password, go to Websites & Domains / WordPress / Installations and click on Change login settings under Access info. Behind Current password, click Show. Now that WordPress has been installed, you can log in to your site for the first time. Go to www. <Yoursite.com> /wp-login.php and log in with your account details. If all goes well, you will now be redirected to the Dashboard, which is the page from which you will arrange almost everything for your website. To change the language to Dutch, go to Settings / General / Site Language. Click Save changes.

It is advisable to also change some other things there, such as the time and date format, the time zone, and the e-mail address. Behind Site Title, you enter the name of your website, with Subtitle you can enter a subtitle. To set which information is displayed in the Dashboard, click on the Dashboard on the left and then on the Screen Settings screen at the top. If you want to view your site, click on the name of your website in the upper left corner.

Searching for a theme

Of course, you want your site to get a personal touch. You can do that easily by installing a theme. By default, WordPress has installed a theme that you can use. If you prefer a different theme, you have to add it yourself. You can install a free theme by at Play / Themes to add a new theme click. For each theme, you can click Preview to see what the theme looks like. If you have special requirements for your website, you will probably have to move to a paid theme. That will cost you a one-off 40 to 50 euros. The best and most themes can be found here.

Note that a theme gets good reviews and has recently been updated. After payment with your credit card or PayPal account, you can download your theme as the zip file. In WordPress, click on Upload Top now and select the zip file. You can install as many themes as you like, the theme of your site will only change once you click Activate. For this workshop, we have chosen the free theme Customizr.

Giving your website a personal touch can easily be done by applying a theme to it

Child Theme

Almost all paid themes contain a child theme in addition to a normal theme. The function of this is that in the child theme you can make advanced adjustments that are not included in a theme update. The use of a child theme is not necessary if you only make adjustments in the Customizer.

Design

Once you have installed your theme, you can click on View / Customizer (which is confusing, but the WordPress Customizer has nothing to do with the name of the theme Customizr). You can now see what your website looks like, with a lot of options on the left to change the design. Which settings you can adjust varies per theme, but in most cases, you will find options to change the colors and fonts and you can choose how your header or footer should look like.

The header is the topmost strip of your site where the menu is located, the footer is the bottom part with your contact details. With our chosen theme we can click on Global settings and upload a logo with Site Identity. belowFavicon upload a variant of your logo that appears in the browser bar. All uploaded files are stored centrally in the Media Library. If you have adjusted something in the Customizer, click on Publish to make the change. The view of your site is a temporary view, it is necessary to save your changes via the publication button.

Google Fonts

Almost every theme currently supports Google Fonts. These are especially typed by Google that looks good on every website. For an overview of all Google Fonts, go here. In a theme, you usually can not choose from all Google Fonts, but a selection from 100 to the 200 most popular.

Create a page

You can change the design at any time, but we will now place some content first. In principle, there are two ways to put information on your site: via a message or via a page. A page is information that you usually access directly from the menu. Think of an information page about your company, a contact page or a portfolio overview of your work. A message is slightly more volatile, for example, a blog post, a news item or another message. These messages are usually not accessible via the menu.

To create a page, click on Pages / New Page. Enter the name of your page and type in the text field below the text you want on the page. Click Add media if you want to add a photo to your page. To make your page visible on the site, choose Publish. It may be that more options are visible above or below the Publish tab, depending on the installed theme. For example, in our Customizr theme, you can choose whether the page should have sidebars; columns next to the page. To view the page, click View Page at the top.

There are two ways to put information on your site: via a message or via a page

Post a message

Placing a message is done in the same way as a page. Now click on Message and choose New message. Again you can add another image, something we can recommend when it comes to a blog or news item. Under the title, you see a so-called permalink. If another website wants to place a link to your article, a permalink is required: a permanent URL that leads to this message. By default, a permalink in WordPress looks like this:

Testing

Nowadays it is important that a website is adaptive (responsive in English), with this the design adapts itself to the device on which it is displayed. As soon as you open a website on a smartphone, you see for example that the menu is displayed as three dashes, while the same website in a browser on the PC has a menu with words. Nowadays most themes are adaptive, you can test it by opening the theme on your tablet or smartphone and see if the menu consists of dashes and if the text on a page is easy to read. You can also quickly test in some browsers if your website looks good in a different screen resolution.

For example, in Chrome, go to View / Developer / Developer Tools and click the icon to the left of Elements (the option is called Toggle Device Toolbar ). In Safari, click on Develop / Switch to adaptive design mode.

An adaptive website adapts the design of the site to the device on which it is displayed

Create a menu

If you have created a few pages, it is time to put together a menu. There are several options for creating a menu, but the easiest way is via the Customizer, provided your theme supports this. We show this way. Go to View / Customizer and see if you see the Menus option. Click on it and select Create new menu . Give your menu a clear name, for example, Main Menu. Under Menu locations, you select where your menu should be shown on your website. In our theme we have four options, these are checked by default. Click Next and select + Add items. You can now add pages to your menu yourself by clicking on the plus sign for the name of the page. It is also possible to add messages to your menu, but in most cases that is not necessary. Click Publish when your menu is complete.

Privacy policy

Since May this year, it is necessary to display a good privacy policy on your website if you store and process data from others, this has to do with the General Data Protection Regulation ( GDPR ) / General Data Protection Regulation (AVG). If you make a blog as a private person, there is not much to worry about. However, once you sell things or collect email addresses for a newsletter, it is mandatory to have a statement on your site. Create a privacy page with information about what you collect and how you process this data and then go to Settings / Privacy. Select your privacy information page and click Use this page.

Plug-ins

To expand the functionality of your website, you can use plug-ins. By default, two plug-ins are installed, Hello Dolly is pretty useless, but Akismet ensures that spam is less likely to come as a comment on messages. At least, if you have allowed responding to your messages (at Settings / Reactions / Allow visitors to respond to new articles ).

You can install thousands of plug-ins for free if you click on Plugins and choose New plugin. With each plug-in, you see two important things: how the plug-in is appreciated by users and when the last update was. Especially the latter is extremely important: never install plug-ins that have not had an update for more than six months or that are poorly valued, these plug-ins can pose a security risk for your site. A good plug-in for the security of your website is All In One WP Security & Firewall, you can read more about this in tip 3.

If you need a contact form, Contact Form 7 is the best plug-in, for a bilingual site install you are the best Polylang or WPML and for a webshop WooCommerce is the most used. Click on Popular to see which plug-ins are often installed. Behind the name of the plug-in, you want to install, choose to Install now. Then you have to activate it by clicking Activate. In some cases, the plug-in is also added to your menu on the left side of your WordPress Dashboard.

To extend the functionality of your site, you can use plug-ins

Install updates

You will see that after some time red bubbles appear behind certain menu options, which means that an update is available for that item. Updates can appear for WordPress itself, as plug-ins or for themes. It is important to implement these updates and keep your site fully up-to-date to be less susceptible to hacker attacks or other errors. Click on Updates and checkboxes for the things you want to update. Then select Themes update or update plugins. If you update your theme, be aware that changes may be lost if you have not used a child theme. This only applies, however, if you have run the PHP files yourself or have added CSS code to the so-called stylesheet. If you have only made changes via the Customizer, you can safely update your theme.

Safety

Internet crime is rampant, which is all the more reason to ensure that your site is well protected against all kinds of attacks. The most important thing is of course that you choose a password and username that are not too easy to guess (‘admin’, ‘Jan’ or ‘administrator’ are very easy to guess, ‘gv76t7gb75’ for example is not that simple) and that you have your website up-to-date. Then install the plug-in All In One WP Security & Firewall. After activation, you will see a new menu option called WP Security. The plug-in provides a complete overview of all the elements on your website that you can secure.

Under Critical Features, you see things that you should all put ON. Click Login Lockdown to ensure that users are blocked for an hour if they enter an incorrect password three times. Then put a checkmark for Check this if you want to enable the login lockdown feature and apply the settings below and put the number 3 behind Max Login Attempts. Checkmarks behind Display Generic Error Message and Instantly Lockout Invalid Usernames ensure that special bots are immediately excluded if third parties try to hack your site.

Login Lockdown blocks users who enter a wrong password a number of times

Contact form

Through a contact form a visitor can easily contact you, but also a plug-in is required. By far the best known is Contact Form 7. Install and activate the plug-in, you will see that the Contact option is added in the WordPress menu. Click on it and select Contact form 1. Change the name at the top and click Save. You see that the code underneath has changed. This code is important because you have to paste it on a contact page. The contact form contains five tabs, of which Form and E-mail are the most important ones. Under Form, you determine how your contact form will look like. For example, if you want to add an option for a phone number, type <label> Your phone number [tel your-phone] </ label>. Where you can change your phone number into your own text.

If you place a * behind tel, you are saying that entering a telephone number is mandatory. For the sake of clarity you can in that case (mandatory) behind your telephone number. If a visitor does not enter a telephone number, the contact form will indicate this and still ask for a telephone number. Under E-mail, you have to make sure that you specify Back to your own e-mail address. For more options click on Set up e-mail or read the documentation of Contact Form 7. Save everything and create a new page called Contact. In the text field, enter the code and click Publish. Do not forget to add your newly created page to the menu, how you do that. You could read in part 1 at tip 10.

Categories and tags

If your website is going to contain a lot of messages. For example, a blog, then it’s smart to make a subdivision into categories. That may not seem very important if you only have ten messages, but as soon as you have posted hundreds of messages on your site. You would have wished you had started building categories earlier. Creating categories is very simple and can be done simply when you write a new message. Open a message or create a new message by clicking the Messages / New message. On the right, you see that there is a checkmark for Uncategorized. You create a new category by choosing to create a new category.

Choose a name and click Add new category. Incidentally, you can subdivide the categories into main and subcategories by simply selecting a category in the menu below. The new category is placed as a subcategory under this main category.

Below you can add tags to a message. This makes it easy for visitors to see what topics a message is about. The difference between categories and tags is that a message usually has only one or two categories, but can contain dozens of tags. There are plug-ins or widgets that allow you to place a cloud tag on a page. This shows all used tags on your site, visitors can click on a tag and the relevant messages are displayed.

Slider

In the theme we have chosen for our site, a slider is built into the top of the site. A slider consists of multiple slides, on a slide you can add a background photo, write text or create buttons that lead to certain pages on your site. You can easily adjust such a slider. First, determine what information you want to lose in the slider. Then log in to your site and click on your name at the top left and view it on the Site. Your site is now showing editing options. On the slider you see the option Customize or remove the post slider.

Click on it and under Slider options you can see that the latest blog posts are shown on this site by default. You can create a new slider yourself by making a slider to click. At tiny.cc/wp slider you can read more about how you make a slider yourself with the theme Customizr. If you use a paid theme, the plug-in Slider Revolution is probably already installed. You can also install this in a free theme, but the plug-in costs 25 dollars.

Design a page

How you can precisely shape your site and which elements you can all change depends on the theme you use. You can customize many themes, including our Customizr theme, by clicking on your name in the Dashboard at the top and choosing the Visit site. Your site will be opened while you are logged in and you will see the text Customize it now with elements that you can change. This can also be called Edit, Edit or something similar. To change fonts, font sizes, and colors. You have a special menu option for most paid themes, which can be found under View.

 Need help?

Because WordPress is an open-source system, you do not have an official helpline that you can call if you do not understand something. Fortunately, a lot of information can be found on the official site and on the WordPress forum. The enormous library of help pages can be found at codex.wordpress.org. Under Learn How to Use WordPress you will find topics on which you can walk as a WordPress beginner. If you have a specific problem, you can search the forum by clicking Support / Forums at the top. Under Welcome to Support click on Get started to read the instructions, below you will find all kinds of different forums. To be able to post a message, you have to register at the top by clicking on Register.

Adding SEO

With the addition of plug-ins, categories and tags and after you possibly have the site in terms of design still put to your hand, your website is almost ready-to-go! The last, but certainly not insignificant, the step is to make your website visible in Google. Start by checking if Settings / Readers do not have a checkmark for Block Search engines to index this site, otherwise, the search engines can not include your site in their results. That checkmark should really only be on as long as you are working on your new website and do not want your site to be found on Google. To get high in Google’s search results, it’s smart to install a so-called SEO plug-in. So that good SEO (search engine optimization) terms are added to each page. Install and activate the Yoast SEO plug-in and click SEO links.

Then choose the configuration wizard. You will now be directed to a special page where you have to go through twelve steps to prepare your site. For example, the wizard asks what kind of website it is and whether your site represents a company or person. Everything with the aim to make your site better display on Google. At step 12 you will be asked for your e-mail address for the newsletter, you can just leave it empty and click Next. Once you have completed the wizard, you can get tips on writing SEO texts by clicking on SEO Copywriting Training. If you write a new post in the future, you’ll find a lot of SEO tools below the text field to write a text that better indexes Google.

Leave a Reply

Your email address will not be published. Required fields are marked *