DEV Community

Cover image for Installing WordPress locally and build your website in it
Chesed Wolfjager
Chesed Wolfjager

Posted on

Installing WordPress locally and build your website in it

In this article, you will learn to install WordPress locally on your computer. I will tell you which steps you need to complete.

HTML is the basic. It stands for HyperText Markup Language. It is the backbone of the internet. With PHP you can build a server-based app. PHP is the abbreviation of Hypertext Preprocessor. We're going to set up a server locally if we want to work with PHP. That is going to happen with XAMPP.

WordPress.org gives you the chance to download WordPress.
WordPress.com gives you the possibility to build on a subdomain.

WordPress in a hosting environment: for hosting we use cPanel. With WP Local you need to clean up your cache.

cPanel gives you the possibility to install WordPress directly.

E-commerce is very popular also.

When you put together a site in WordPress, you can edit live. For sure with plugins.

There is a lot we don't do because we don't code.

It is very limited what the theme has to offer. If the theme is outdated, you can get errors. Version problems

Location of WordPress in the folder: C://xampp/htdocs
We need to unzip WordPress. Make use of localhost. On a lot of PCs, localhost is an alternative name to 127.0.0.1. When this address is pinged, it communicates with itself. Localhost is valuable for software testing and security purposes, allowing for isolation from larger networks.

Now it gives an error. It has to do with PHPMyAdmin. That is the database. It asks for dbname and dbusername. I have to give them specific names. And assign global privileges to them. Also have to copy the password. I clicked on Settings. Now I get an error. Now he gets another error with the database.

It seems to be broken by now. He must have it completely. Let's start over.

The site is there but I don't think you can log in.

XAMPP is OK. We have to put up the website.

Navigate to localhost/

Choose your password

Dashboard from WordPress

Navigating into the WordPress Dashboard

The themes that WordPress provides are ugly. "2017" gives errors. Plugins make it easier. Now we have to install Elementor and Contact Form 7.

Now it's waiting when me can log in to the website.

We're going to the menu.

Theme 2017 is outdated.

That other student is quitting.

Half of the time goes into some guy who doesn't have his stuff in order. But I understand.

We're going to install the default homepage itself. We're going to continue with the plugins:

  • Elementor

  • Contact Form 7

You have to look at the ratings.

We have to add the favicon. I have to do that also...

We can only add the header and footer when we have already installed Elementor. It's a plugin that lays the structure for the WordPress website. Everything that you do in it is in a container. A container is a box that holds your webpage elements, including widgets and other nested containers, to create the desired layout. Note: this is NOT an Elementor training. If you become good at it you can craft together very beautiful websites.

We have to activate the OceanWP theme.

We chose OceanWP. We need to check if Ocean Extra is already activated. Then we need to create a menu. I already created it.

The theme must have enough customization abilities. We need to set up the top bar. We need to make use of FontAwesome. Font Awesome is the web's icon library and toolkit, trusted by millions of designers, developers, and content creators. We're going to add a phone number and an email address on the top bar.

We go to the top bar and add social media icons.

We're going to Customize > Homepage (Ocean Extra settings)
Home > Edit with Elementor.

We're going to delete all content.

We're going to use 2 containers. We are going to use an image. We can make use of Photopea. We still need to set it up.

We can make buttons bigger to hit "Justify".

I need to fix the SQL port because it's giving me problems. I fixed the error, it should be removed by now.

The problem is solved. We want to add a counter. 3-piece counter. I can adjust the transparency of the block. I can't do the assignments of "the agents", so I skipped them.

Now I need to update the plugins.

Need to place the pictures

Now we're going to place a blog.

We go to Settings > Reading

We need to place the blog

Go to Appearance > Menu

We need to bring the online server to an offline server

Hosting online

Why host online?
You get possibilities from your hosting provider. The trainer has his own hosting company.

We need cPanel. We navigate to it, and go to the "File Manager". Back to htdocs. Zip all files, going to upload. For files that you have zipped, you have to place them in there. I grabbed the folder and dragged it here. The database still has to work. We need to add the database in cPanel. We need to change the name in the database. We need to edit the wp.config file. The wp-config file contains a set of authentication keys and salts that play a crucial role in enhancing the security of your WordPress website. These keys are random strings of data that provide an extra layer of protection by encrypting the login information stored in cookies when users log in. There are eight specific variables within this file, and each one helps safeguard your site against brute-force attacks by making it harder for unauthorized users to tamper with the login cookies. I need to adjust the privileges.

I need to fill in the username and password in the wpconfig.php file.

Also, go to the localhost SQL. Export in PHPMyAdmin.

Go to PHPMyAdmin. PHPMyAdmin is a free software tool developed in PHP designed for managing MySQL or MariaDB database servers. With PHPMyAdmin, you can carry out various administrative tasks, such as creating databases, executing queries, and adding user accounts. Import the file

Assignments

Add 3 pictures of agents.

Contact Us
The contact form should be at the top.
Google Maps should be integrated.

Disclaimer

This info was gathered from a course I followed online in Suriname. Glad to contribute to the developer community.

Top comments (0)