How to make a WordPress website from start to finish

With over 35% of websites powered by its technology, WordPress.org is one of the oldest, most trusted and widely used website builders around. This largely free, open-source software allows anyone to make a WordPress website, no matter their coding skill or design talent. And yet as amateur-friendly as it is, its capabilities are broad and flexible enough to attract advanced users, including major companies like Disney, MTV and Sony.

While WordPress is useful for non-developers, getting started involves a bit of a learning curve. To make it easier, we’ve put together the following guide on how to create a WordPress website from start to finish. And to walk through each step with you, we’ll be making our own WordPress website for one of our favorite, totally real family businesses: Bluth’s Frozen Banana.

How to make a WordPress website in 6 steps
—

1. Prepare your website content
2. Register domain and hosting
3. Install WordPress
4. Set up your WordPress website
5. Customize your WordPress design
6. Launch your finished WordPress website

Step 1: Prepare your website content
—

Before you build your site, start with your website content. Because WordPress is a content management system, you can always change or add content after the website is live. But getting most of your content ready beforehand not only makes building the website easier, it gives you a clearer idea of what your website needs to do and look like.

To that end, it is also useful to make a simple site map, listing out the number and purpose of pages (whether you’ll need a homepage, about page, contact page, store page, blog, etc.). Here is some common content you will want to prepare:

• Logo and branding (including brand colors and typography)
• Media (photography, illustrations, icons, video)
• Written content
  • Headlines
  • Subheadlines
  • CTA and other button copy
  • Body copy

For Bluth’s Frozen Banana, we already have a logo and mascot to work with, and we’ll be using the color picker in Photoshop to get the color scheme from these materials. In your case, you may need to purchase your own logo. For image assets, you may either hire a photographer or use stock photos and icons.

Step 2: Register domain and hosting
—

A website domain is the unique website address that people use to access your WordPress website. This should ideally be straightforward, such as your company name if you’re a business or first and last name if you’re an individual. We’ll be using bluthsfrozenbanana.com.

You will also need to secure hosting, which is a server that stores your website files. Many hosting platforms also provide domain registration as part of their service. When shopping for hosting sites, pay attention to things like data storage limits and bandwidth, but most importantly whether it supports WordPress. In this example we’ll go with Bluehost because WordPress recommends them, but there are plenty of other options to choose from.

 

In most cases you will have to pay for your domain and hosting. Bluehost for example offers domain registration at $12.99 and charges $7.99 per month for the first year (billed annually, not monthly). Once you click the Get Started link on Bluehost’s home page, enter your chosen domain address, and if it is available, you can buy it at the checkout page.

Once you have purchased a plan, you will be directed to make a password and log in to your account. Bluehost offers to guide you through creating your WordPress site, but we recommend skipping these steps as the resulting templates will cost extra.

Step 3: Install WordPress
—

In the My Sites tab on the Bluehost dashboard, selecting Add Site will prompt you to install WordPress. If you used a different hosting service, you will have to follow the instructions provided by that service, which is why it’s important to verify that the service integrates easily with WordPress beforehand.

Once WordPress is installed, press the Log in button with the WordPress logo (also in the My Sites tab). This takes you to WordPress.

In WordPress, you will see a dark sidebar to the left, and clicking on each menu item changes the content of the main page on the right. Let’s briefly walk through the most relevant items on this sidebar:

• Bluehost (or other hosting integration): Clicking on this takes you back to your account on Bluehost. There isn’t much you need to do here except eventually launch your site (until you launch, your site is not live and the domain you’ve chosen displays a Coming Soon message to the public).
• Dashboard: WordPress’s general hub for managing and viewing your site. It includes step-by-step actions, a log of your current site contents and recommendations for additional features.
• Posts: Where you can add and manage blog pages.
• Media: Your media library, where all your uploaded images and videos are stored.
• Pages: Where you can add and manage pages on your website.
• Comments: Moderate, respond to, or screen comments if they’re enabled.
• Appearance: Your main hub for editing the theme of your website.
  • Themes: Where you can browse and install free and premium themes.
  • Customize: Change the style of your chosen theme. Many of the other submenu items can be edited through here.
• Plugins: Where you can manage your website plugins (third-party software integrations that add additional, specific functionality to your website).
  • Installed Plugins: Where you can view, activate, deactivate and delete plugins that are already installed on your site.
  • Add New: Where you can browse and install free and premium plugins.
• Users: Where you can manage your password and user profile, as well as view/add team members and manage their access level to your WordPress admin.
• Settings: Manage specific options for your WordPress website

Step 4: Set up your WordPress website
—

WordPress gives you some basic starter content, which you can view under the Pages tab. This can be helpful for demonstrating how web page elements are built, but it’s best to start with a blank slate. From the Pages tab, select all existing pages by hitting the checkmark next to them and press the Move To Trash button.

There are two ways to start setting up your site: build it from scratch or use a template. The first option is frankly beyond the scope of this article as it requires proficiency in web development (in other words, writing code). We will cover it briefly so that you understand your options.

Building a WordPress site from scratch

Again, unless you know how to design and develop a website yourself or are willing to hire a WordPress designer, please skip to the next section.

First, you will need to set up your pages and add your content. Navigate to Pages > Add New, and you will be taken to the WordPress page editor.

There are two different versions of this editor, Visual and Text, which can be toggled via the tabs pictured here. The Visual tab allows you to edit a live preview of the page. You can copy-and-paste text content into the main canvas and use the toolbar above it to style it as you would in a word processing program. The Add Media button above the toolbar allows you to add videos and images from your media library.

The Text tab is where you work with the code that your page is based on. While the visual editor gives you some tools for styling and arranging your website, you still need to know how to write in formatting languages and code to truly build a website that looks and functions in a more sophisticated way than a Microsoft Word doc. This is why we discourage this route for beginners or those unwilling to hire designers and developers.

Assuming you do decide to work with freelancers: 99designs can connect you with a pool of curated WordPress designers who, along with 99designs’s coding partners, will design and develop your customized WordPress website at an affordable cost. Check in here for a free consultation.

Next, let’s discuss WordPress themes. Themes provide the layout, color scheme, font choices, button shapes and more for the entire website—essentially, the branding. Designers can create custom WordPress themes or you can choose from one of the thousands of premade themes WordPress offers (note: in either case, page construction and layout still need to go through a developer).

After your content is uploaded and arranged, go to Appearance > Themes. This shows the themes you already have installed and you can activate them by clicking the corresponding button when hovering over the thumbnail. To browse and install new themes, click the WordPress.org Themes button at the top of the screen.

Once you have your preferred theme activated, you can edit it by navigating to Appearance > Customize. The sidebar here on the left gives you limited options for changing everything from the typography and color to the basic layout of elements like menus and headers.

Building a WordPress site from a template

The much more beginner-friendly DIY option is to start with a template and customize your site from there. To do so, you need what is called a plugin: third-party tools that you can install to extend the capabilities of WordPress.

Because WordPress is free and open-source (meaning anyone can contribute to its code), many developers have built their own integrations to make using WordPress easier or make certain website functionality possible. It’s a good idea to research some common plugins your website might need once you get down to customizing it. For now, we’ll be installing a website builder plugin.

Navigate to Plugins > Add New. Using the search bar, enter a term like “starter sites” or “templates.” We chose to work with the website builder Elementor, but feel free to review your options. Press the Install button and navigate to Plugins > Installed Plugins. Scroll down to find your new builder plugin, and click the See Library link. This will take you to a display of free and premium templates you can browse.

The thing to look out for here is how well the template matches the amount and nature of your content—for example, if your content is text-heavy, don’t start with something image-based like an art portfolio template. With that said, you can always test out a template, delete the pages and start over as many times as you need to find a good match. For the Bluth Banana Stand, we went with the Fresco Italian template, since a restaurant website is closest to what we’re making.

When you’re ready, select the template and choose Import Complete Site. Once the install process is finished, you’ll have a complete starter website to work from.

Step 5: Customize your WordPress design
—

(For the remainder of this article, we assume you’ve built your site with a template.)

To customize your template, navigate to Pages, select the page that you want to work on (we’ll be working on the Home Page) and click the Edit with Elementor button on the screen that follows.

Edit the WordPress theme

You will see a sidebar menu of tools and a live preview of your web page, which you can directly edit. We’ll start with the theme.

Select the hamburger icon in the upper-left corner of the sidebar and choose Site Settings. Under Theme Style, you’ll see four options: Typography, Buttons, Images and Form Fields. Clicking on any of these brings up styling options for each of these theme elements, according to your visual brand guidelines. For example, in the Typography section, you can change the font, size, color, weight, etc., for all of the different heading levels across your entire website, rather than changing each text box individually.

Set your logo and site identity

Navigate to Site Identity in the same Site Settings section of the sidebar. Here, you can set up your site name and description, as well as swap out the logo with your own and even add a favicon. When you’re done, press the Back button in the sidebar and close out of Site Settings.

How to add, edit and delete page sections

Pages are built on a grid, with each section organizing site elements (alternatively called widgets) into a number of invisible columns. When you hover your mouse over the top of one of these sections, a blue tab with three icons appears at the top of it:

• The plus icon allows you to add a section above the current one. To do so, you will be prompted to choose the number of columns. You can then drag widgets from the sidebar into the new section.
• The dot grid icon brings up the properties for the entire section in the sidebar.
  • The Layout tab allows you to change the spacing and alignment of all the elements in that section.
  • The Style tab allows you to change the background image and other specific theme choices for that section.
• The x icon deletes the section.

How to edit website copy and media

As you hover over elements in the live preview, you will notice boxes appear, letting you know that you can edit them. Clicking and dragging on these elements allows you to move them within their section on the grid.

Selecting an element also brings up its properties in the sidebar, where you can change the content. Each widget will have its own specific properties separated by the Content and Style tabs. To delete elements, right click and select Delete.

 

To edit images, select the one you want to change. In the sidebar, click on Choose Image. This brings up the Insert Media dialogue box. Choose the Upload Files tab, and drag your selected image inside. This adds it to your Media Library, and once it is finished uploading, you will see a checkmark next to it. On the right side of the dialogue box, you can edit the cropping, alt text, caption and description of the image. When you’re finished, press Insert Media on the bottom right.

This is essentially the basics of what you need to know in order to work with content throughout all pages on your site. As you go, don’t forget to save your progress by selecting Update at the bottom of the sidebar. If you want to preview your site in full, head back to the WordPress admin, go to your Dashboard and select View your site.

Step 6: Launch your finished WordPress website
—

Once you’ve finished editing your content and installing any additional plugins, you are now ready for the shortest and easiest step: launching your website.

Head back to the Bluehost tab and press the Launch your site button. (The button will change to Restore Coming Soon, in case you changed your mind and need to take your site down.) Enter your website domain in the URL and you will be taken to your live, finished WordPress website.

Your WordPress website is live
—

WordPress is one of the cheapest and most popular tools for building websites, used by everyone from novices to major corporations. But as accessible as it is, it does take some time and practice to get used to. Now that you’ve got the basics in hand, we encourage you to take advantage of the flexibility WordPress offers to build more and more advanced features into your website.

Unsure if WordPress is right for you? Take the interactive quiz below to find the right web solution for your needs!

The post How to make a WordPress website from start to finish appeared first on 99designs.