How to create a professional website with WordPress

We are going to see the different steps in the process to create a professional website with WordPress, the most used CMS worldwide.

Some steps when creating a web page with WordPress will be more general and others specific to this Content Manager.

1.- The domain

One of the first things we should think about, before starting to create a WordPress website, is the domain name that we are going to choose for the website.

The domain will be the name through which we will access the website. This is registered and we have to renew it when the contracted period expires. That is, it is not something that is bought at once and we can have it for life.

We must also decide its extension: ".es", ".com", ".org", etc.

If the web page that you are going to create is designed for the Spanish national market, you can use a “.es” or “.com”. Conversely, If the website is designed for Spain and Spanish-speaking countries, I recommend the ".com".

The most common is to register the domain with the same company that we hire the hosting, although we can contract the hosting and the domain with different companies and then point the DNS to the servers of the company where we have the web hosted.

2.- The hosting

The second step of our cumin to learn how to make a web page step by step will be the choice of web hosting or hosting. A web hosting that we can recommend is Ionos.

Hiring a hosting or web hosting is essential to make a website with WordPress since we need a place to host said website.

Lets start by the beginning. A web server is an application that is installed on a computer to allow it to serve web pages to clients who request it..

A hosting or web hosting is a service offered to us by a company that has web servers. The companies will offer us different plans according to the characteristics of the service.

The usual thing is to hire a shared hosting. This is a hosting service in which a web server is "divided" into many parts and those parts are rented to different clients. Obviously this makes this type of plan the cheapest.

In any case, it is very important to choose a good hosting and that it is optimized for WordPress.

3.- Install WordPress

To create a website with WordPress we must first proceed to install the application on the hosting under the domain name that we have decided.

Today, most hosting companies have one-click installers. One-click installers are applications that allow you to install WordPress and other CMS in a very simple and intuitive way.

Traditionally, to create a website with WordPress, you had to download WordPress, upload it via FTP to the hosting, create a database and proceed with the installation. Nowadays, as I say, all this is not necessary since most hosting has this type of installers in 1 click.

4.- Access to the WordPress administration panel

We already have the first big step taken when creating a WordPress website. Now we must try access the private part of the web, called as Back Office or administration panel.

To access the WordPress administration panel you must enter the following URL:

www.nombredemiweb.es/wp-admin

Now you should see the access panel to the Back Office of the WordPress application that you just installed.

Username: Now you must enter the name of the administrator user that you included in section d.- ii.- of the WordPress installation.

Password: Here you must enter the administrator password that you provided in point d.- iii of the WordPress installation.
Remember password: A little further down you have a check box so that the application remembers the password entered
Recover password: A little further down we have a link to recover the password in case we do not remember it (we will recover it through an email that will be sent to the email that we enter in section d.- iv.- of the installation)

5.- Initial settings when creating WordPress website

Be very careful about some of the initial settings when making a wordpress web page. Especially on the subject of friendly URL settings and the ability to disallow Google indexing.

Once WordPress is installed we will perform a series of initial settings:

a.- General Settings: We will go to "administration panel> Settings> General" and the Time zone section we will select: "Madrid"

b.- Do not allow Google indexing: It is important that until we have the web with the urls of each page defined and the more or less finished content we do not allow Google or any other search engine to index our website. For this we will go to: "administration panel> Settings> Reading" and we will see that at the bottom of the page there is a label entitled: "Visibility for search engines".

Mark the check box with the text: "Discourage search engines from indexing this site" and hit the save button.

NOTE: Remember that when you have more or less finished your website and you want Google to index your site, you must unmark this check box and press the save button.

c.- Friendly URLs: it is essential for SEO to use friendly URLs. For this we go to: "administration panel> Settings> Permanent links"

In the Common Settings section, we will mark the following radio button: "Entry name" and we will press the save changes button located at the bottom of the web.

d.- Website under maintenance: It is interesting that throughout the process of creating a web page with WordPress the site publicly displays a maintenance page.

In section b) we have configured the web so that it cannot be indexed by Google, but that does not mean that internet users cannot see our site. To put the website in maintenance mode and for potential visitors to see a presentation page, we must use a plugin.

I usually use the free plugin Maintenance.

6.- Structure and design of the web

At this point it is time to get down to work on creating the structure and design of the web.

Define the structure of the web

We must decide what inner pages will the web have. This structure will be reflected in the top menu of the web.

Usually a corporate website will consist of at least the following pages:

Start : home or home page of the web
who we are or us or the company: Corporate information page
services and / or products: commercial page where the services and / or products of the company are displayed.
Contact: page with location and contact information

Some corporate websites also include:

Portfolio: this page shows the work carried out by the company
Blog: many websites incorporate a blog to improve positioning and create a community around the company.

The page of services or products can gather all of them in a single page or we can create specific pages for each service or product that are displayed from the menu item services or products (fig. 1)

My recommendation is that you include a page for each service and / or product to try to position them separately in Google.

For this I strongly recommend that search with him keyword planner the services you are going to offer, in order to know what words people use when searching Google when looking for services like the ones you are going to offer on your website. Take into account the filters of the keyword planner by provinces and cities

Web design

The colors to be used on the page will normally be those that make up the logo. If you don't have a logo, it's still time to have one designed for you.

Here I leave you this very interesting post by Arturo García about the colors to use in a web. It can also be used to choose the colors for the logo

Another thing you have to do is take several pages and draw a sketch of the composition you want to make on each of the web pages, especially the home page. Draw the different areas or blocks into which each of the pages will be divided.

7.- The WordPress template

An essential point when creating a wordpress website is to choose the template or theme.

Templates (we should really say themes or themes) give us the aesthetic part of the web.

There are free and paid templates. Free templates are much more limited, while paid templates have a lot more customization options. So I recommend that to create a professional website you go directly to a paid WordPress template.

Within the paid templates, there are companies that offer us packages with many templates developed under a framework at the price of what a template costs.

Some companies even include interesting plugins in the price of the template packs. Of course, we can also buy individual templates.

A little further down I'm going to leave you a link to a mega guide in which the main options for WordPress templates on the market are analyzed.

In any case, before purchasing a template you must take into account the following points:

a.- Single payment or annual payment: There are templates that are paid only once, as is the case with the ones you can buy in the Theme Forest market.

There are other templates or template packs in which the payment entitles you to use the templates for life, but you must pay again annually to enjoy updates.

b.- License for how many websites ?: You should look at the license that comes with the template. There are templates licensed to be used on a single website and other templates licensed to be used on all the websites you want.

c.- Do I need to have technical knowledge to use the template ?: There are templates such as those built under the Genesis framework, which to take advantage of it you must know HTML, CSS, even some PHP. On the contrary, there are other templates in which you will not have to have any kind of programming knowledge to take advantage of it.

d.- Does it include page builder? With updates ?: A page builder is a complement that will allow us to create complex structures on the pages, and include elements or modules within them in a very simple and visual way known as "drag and drop", providing the pages of our site from a professional look, which would be impossible to do using the page editor that comes by default in WordPress.

There are some templates that include a page builder as a plugin or in the core of the template. We must take into account if when buying a template that includes a page builder, it includes, in addition to future updates to the template, future updates to the page builder.

f.- Does it include updates and support? For how long?: It is important to be clear if when buying a template, it includes updates and support. And also for how long does it include these services.

8.- WordPress web design, The page builder

The choice of the page builder is another key action when creating a website with WordPress.

As I have told you before a page builder is an element that will allow us to create complex structures on the pages through sections, rows and columns. Rows may have specific column layouts such as:

1/ 1

1/2+ 1/2

1/2 + 1/4 + 1/4

1/ 3 + 1/3 + 1/3

1/4+1/4+1/4+1/4

etc.

Page builders include a wide repertoire of modules with specific functionalities such as: form module, image module, text module, icon module, dropdown button module, accordion module, slider module, etc. Within the columns, any of the aforementioned modules can be inserted in a very simple and visual way known as "drag and drop", thus giving the pages of our site a professional appearance, which would be impossible. to achieve using the page editor that comes by default in WordPress.

Some templates include a page builder. Some include it through a plugin and others in the very core of the template.

But there are also paid templates that do not include a page builder, in these cases you can install one through a plugin. Among the free templates, practically none include a page builder.

Features to look for in a page builder:

High usability: it is important that the page builder has a high usability to be able to work with it in an easy and fast way. There are page builders where it is difficult to specify where to drop the module so that it is placed in the place we have in mind, on the contrary there are others where this operation is much more precise. Some page builders include tools to duplicate modules, sections, rows or columns, considerably reducing page creation time.
Simple and intuitive: it is essential that the page builder is simple and intuitive. The main demonstration of this feature is to take the page builder, test it and in a while get to find out how it works in general without having to read any type of tutorial.
Loading time: It is important that the page builder is not heavy since we want the web to have a low load time when it is visited by a user. In addition, a heavy page builder will slow down the loading process of the page under construction of the back office and ultimately our creation work.

9.- WordPress plugins

When making a website with WordPress we will need some plugins to provide the CMS with some functionalities that it does not have by default.

Plugins for WordPress are elements that extend the functionalities of the application. There are all kinds of plugins: The Woocommerce plugin to provide WordPress with the functionalities of an online store, the maintenance plugin to create a maintenance page, the WP Super Caché plugin to create a cache and accelerate the loading speed of WordPress, etc. .

Nor is it convenient to overload the page with an infinity of pluigns. Use only those that are necessary to create your website.

For me there are a series of essential plugins to create a professional website, all of them free:

Yoast SEO: This plugin is mainly used so that we can edit the HTML tags for the SEO on Page of each of the web pages. Yoast SEO He will also provide us with a series of tips related to the SEO on Page of each of the pages, in addition to creating the web sitemap and others.

W3 Total Cache: This plugin is essential to create a cache and reduce the loading time of the web. There is also the option of WP Suepr Caché.
Contact form 7: this plugin that allows us to create a totally personalized contact form. It is also true that there are already some page builders that include a simple form module, even some already include a module to create a form with custom fields.
Maintenance: plugin which is used to put the web in maintenance mode, and that it cannot be visited by anyone, while we are in the process of creating it.
Google Analyticator: I use this plugin to connect WordPress with Google Analytics. In addition, this plugin incorporates a statistics summary panel in the WordPress administration panel.
Black Studio TinyMCE Widget: plugin which is used to create a type of Widget that incorporates a text editor and thus not having to know HTML and CSS to work with Text Widgets.

It's time to design the header of the web. The header will be repeated on each of the pages of the website. WordPress templates usually have a specific section to configure the design of this area so important.

In many templates you will have the option of placing social media icons in this area, along with your contact telephone number and email.

The template you use will surely let you choose between various header options. I give you an example of a well-known template:

Logo on the left items on the right: This is the most typical header with the logo on the left and the menu items on the right.
Slide in Header: With this heading the logo appears on the left and on the right a hamburger-type icon, which is the icon that appears on mobile phones to display the menu. By activating the icon a sidebar with the menu items is displayed

Full Screen Header: With this header the logo will also appear on the left and a hamburger-like icon on the right. By activating the icon, the menu items will appear occupying the entire screen.

These are some examples of headers, as I told you, the template you choose must have different design options for the header. This circumstance should appear in the template demo.

Another very important part when making a website with WordPress is the footer or lower part of the website. WordPress will provide us with elements called Widgets that will help us build this area of the web.

As with the header, the footer will be repeated on each of the pages that make up the website.

In many templates you will have to modify the code in the footer.php file of said template to be able to customize the text that appears in the lower part of the footer.

Usually in WordPress templates you will have the option to place social media icons in this area.

Footer Widgets

A widgets is a kind of module that has a specific appearance and function and that in general we can place in the sidebar or sidebar of the web and in the footer.

WordPress includes by default many and varied Widgets: Text Widget (HTML), Latest Post Widget, Category Widget, etc.

Before I have recommended you install the plugin "Black Studio TinyMCE Widget" that will create a Widget with a text editor (with it it will not be necessary to know HTML). This will surely be the Widget that you will use the most in your footer.

Design the different blocks of Footer Widgets on a piece of paper and get to work by accessing: "administration panel> Appearance> Widgets". Here you can select them, drag them to each area of the footer and finally customize them.

12.- The home page

The home page is the most important page on our website. The ideal is to make a preliminary design on a sheet and then build it with the page builder.

If you put a slider, do not put too many images and take care of their weight to avoid making a heavy home that takes a long time to load. My recommendation that you do not put more than three and that the images in the slider do not exceed 130 KB approx.

On the home page, visual elements such as images and icons should predominate, but we must not forget the text, mainly for SEO issues.

A little trick to enter text without overloading the page is to use resources such as drop-down buttons.

With the drop-down buttons, visitors will not see the text unless they press the button to display it, so the design will be very clean. On the contrary, Google will "read" the text as if the button were displayed.

Create home

To create a page in WordPress you must go to: "administration panel> Pages> Add new".

We will establish the name of the page, create the content of the same and save.

In the next section dedicated to the creation of inner pages I explain the creation process in detail.

Set home

Once the home page is created, we must "tell WordPress" that it is the home page. To do this we will go to: "administration panel> Settings> Reading"

Where it says: "Front page shows" check the option "A static page (select below)"

In the label "Home page" we will select the home page that we must have previously created.

Then press the save changes button.

13.-The inner pages

Once the home page has been created, we will enter the internal pages of the web, following the structure that we established in section 6.

To create a page we will go to: "administration panel> Pages> Add new".

a.- Title: just below the label "Add new page" located at the top we have a text field where we must enter the title of the page.

b.- Screen options: In the upper right part of the interface you have a drop-down called "screen options".

The marked elements will be the blocks that will appear in the interface. Unchecked items will remain hidden.

c.- Page builder or text editor: To create the content of the page we can choose the editor that comes by default in WordPress or use a page builder and be able to create more elaborate designs (note: the page builder does not come by default, we must choose one and install it).

d.- Publish: on the right side we have a block called "publish". If we press the "save only" button we will save the page as a draft. That is, it will not be visible and it will not be possible to add it to menus.

If we press the blue "publish" button located a little further down, the page will be visible and will be available to add to menus.

Once a page has been published, the option that will appear will be to "update".

It is possible to go from published to draft. We will only have to edit the status, modify it to "draft" and save.

f.- Yoast SEO: If you installed the Yoast SEO plugin, you will have a block on the page where you can set the "title" and "meta description" tags for each of the inner pages.

g.- Slug: With the slug block you will be able to modify the friendly URL of the web, which together with the tag "title" and "meta description" are fundamental elements in on page SEO.

Once the home page and the interior pages have been created, we can add them to the menu of our WordPress.

To manage the menu we will go to: "administration panel> Appearance> Menus".

Note that the locations available to place a menu depend on the template you are using. There are templates that have a single location to put the menu and there are others that have multiple locations.

Create a new menu

Once you access the WordPress menu management page you will see a text field labeled: "Menu name". Enter the name you want to give the menu you are going to create and press the "Create menu" button.

This name serves to differentiate it from other menus that you may create in the future. In WordPress we can create several menus and place them in different locations (depends on the template).

Add pages to menu

On the left side you will see a block with several sections: Pages, posts, Custom links and Categories.

Displays the "Pages" option if it is not displayed.

To find a page that you have previously created and to be able to add it to the menu, you have 3 tabs:

More recent: the last pages created are displayed
See everything: shows all pages created
Search: you can search a page by its name

Note: remember that the page must be published for it to appear and can therefore be added to the menu.

Mark each of the pages you want to add to the menu and press the "Add to menu" button (you can do it one by one or by grouping several).

Organize menu

The topmost menu item will be the one that appears to the left of the menu. To change the position of the menu items, hover over the item you want to move, click the left mouse button and drag the block to the desired position.

Menu locations

A little further down you have a section called: "Menu options". In the section "Location of the theme" you will have the different location options available to the template to locate the menu.

In the example template in the image we have the locations: Main menu (usual menu position), Secondary menu (area above the main menu) and Bottom menu (area in the footer).

Mark the location or locations for the menu and hit the "Save Menu" button.

Create menu items with nofollow links

It is possible that there are menu items that interest you that are of the nofollow type, so as not to convey authority, such as a link to the legal notice, privacy policy or cookie policy.

To add this type of links to the menu, we must go to: «admin panel> Appearance> Menus»

Click the button "Screen Options" located at the top of the interface.

In the drop-down menu check the option: "Relationship with the link (XFN)" and press the "Screen Options" button again in order to collapse the menu again.

Having activated this option, when we display a menu item, the field will appear: «Relationship with the link (XFN)».

To make a menu item have a nofollow link we will simply have to write «nofollow» in the field «Relationship with the link (XFN)».

15.- A blog

Adding a blog to a corporate website is very interesting to improve your web positioning and to create a community around your website.

Add the blog if you are willing to use it. It is not good to enter the blog of a corporate website and find only the WordPress example post.

To create blog entries you must go to "administration panel> Entries> Add new"

To add the blog to the menu:

Create a new page titled blog
Tell wordpress. Go to "administration panel> Settings> Reading" and in the drop-down: "Posts page" select the page you just created for the blog and press the save changes button.
Add the page to the menu: Go to “admin panel> Appearance> Menus” and add the blog page to the menu.

Here you have a very interesting post from R Marketing Digital in which you can find many fundamental aspects when creating a blog

Create blog categories

It is important to create a coherent and consistent structure. I recommend that you have the least possible categories.

When we start a blog it would not be common sense to create many categories and have little content. You can start with 4 or 5 categories or you can even start with a single general category.

Using blog tags

Unless it is a very specific case or you know in depth how it works I do not recommend using tags on your blog since you can get more disadvantages than advantages.

The main drawback of misusing tags is generating duplicate content.

16.- SEO Onpage and Offpage

For your page to be positioned properly it is important that you take care of SEO.

Optimize the pages of your website to position yourself by the keywords that interest you (SEO on Page) and work outside your website to get quality links (SEO off Page).

Here is a very interesting post from Rubén Alonso's blog that will help you to enter the world of web positioning.

17.- Tips and tricks

I.- Subscribers: Try to capture and create a list of subscribers from day one. Make a claim, get going with an email marketing platform and a plugin like Sumo Me.

II.- Backup copies: learn how to make backup copies of your WordPress and make regular copies. Even if your hosting makes copies every so often. The control and responsibility of your project correspond to you.

III.- Protect the content of your blog: Make your feed show only the summaries of blog entries to avoid using tools to copy the content of our posts in others.

To do this you must go to: «administration panel> Settings> Reading». Once there where it says: "Show, for each entry in the feed" mark the option: "Summary" and press the save button.

IV.- Add an authorship link in the feed: I recommend adding an authorship link in the feed to make it easier for search engines to verify the authorship of our post.

We are going to use the Yoast SEO plugin.

For this we go to: «Administration panel> SEO> Advanced». Now check the "RSS" tab.

Where it says: «Content that will be put after each post in the feed:» write something like this:

This article is an original content from the Horizonweb Blog

Note: replace "www.horizonweb.es" with the domain name of your website and the text "Horizonweb" with the Name of your website.

V.- Registration in Google Search Console, old Webmaster tools: Create an account in Google Search Console and analyze the impressions and clicks of the pages of your website. Through this tool you can also add a sitemap, index pages quickly, etc. You only need a gmail account.

VI.- Registration in Google Analytics
Create an account in Google Analytics and analyze the statistics of your website. The amount of data that you can analyze with this tool is incredible.

To connect the Analytics account with your WordPress I use the Google Analyticator plugin

VII.- Modify the link in the footer:

You will see that many WordPress templates include a link in the footer to the official template page. In many cases this link cannot be modified from the WordPress administration panel.

If this is your case and you want to modify it, look for the footer.php file located in the path wp-content / themes / templatename

Be very careful when modifying this file and keep a backup copy of it

I hope this comprehensive guide helps you create a professional website for your business step by step.