Easily Setup Your Website Using WordPress

While yesterday’s world required webmasters to have advanced programming skills, today’s world allows individuals to create websites in as little as a few hours. Although there are many available platforms, such as Wix, MoonFruit, and FreeWebs, that allow users to create websites via pre-built templates and drag-n-drop tools, these sites usually display ads or their own branding on your website and are often limited in customizability.

Easily Setup Your Website Using WordPress

Instead of using these platforms, users can build websites with the help of CMS (Content Management Software) platforms, such as Blogger, WordPress, Joomla, and Drupal. All of these platforms are essentially the same, but WordPress is the most popular and easy-to-navigate for most people. This article will explain how to create a WordPress site on your own server, register a domain name, and customize your website to your liking.

NOTE: This post is an extended part of our past published post WordPress 101: Beginners Guide to WordPress

Setting Up Hosting

While many people choose to pay for their hosting, whether it is bundled with a domain name purchase or not, there are many free hosting plans available that allow individuals to create amazing websites and have full control of every aspect, from databases to PHP files. Both NEQ3 and 1FreeHosting provide users with free hosting and have the exact same features, but NEQ3 has been known to have nameserver issues with some of the major domain registrars. For this reason, I would strongly recommend 1FreeHosting, but either platform will work fine. For the purposes of these instructions, we will be using 1FreeHosting, but NEQ3 is basically the same layout.

To setup a hosting package, simply go to either hosting site and click the Sign Up button (on 1FreeHosting, it’s a button that says “Get Free Hosting”). Fill out the form, making sure to choose a subdomain even if you already have a domain name registered since you won’t be able to configure WordPress until the domain is forwarded to your new site (which can take several hours). Now check your email, click the activation link, sign in to the control panel with the information provided to you in the email, click the “Control Panel” link if its not already on that page, and then click “Switch” next to the domain you’ve setup.

For those who are more technically inclined, both of these platforms use cPanel, which includes the Softaculous auto-installer. We will be using this feature in the next section.

Installing WordPress

Once you are signed into the control panel, click the “Auto-Installer” feature listed in the “Website” category, which is below the “Domains” category. Click the “WordPress” icon in the “Blogs” section. Leave the “Install To” field blank and choose a username and password. A common username is “Admin”, but you should setup your own password so its not so easy for people to hack into your website. Enter email address where you will get all admin notifications.

Leave Database Name field and Prefix field as it is if it is already filled or else if it blank, enter any name there.

Click the “Install WordPress” button and ignore the popup that says the directory will be over-written. A “Results” popup will say that WordPress is processing. When it reaches 100%, click the button that says “View Results”, and then click the “Manage” link next to WordPress.

instantShift - Installing WordPress

Note: The login page it takes you to can be reached at either www.yourdomain.com/wp-admin or www.yourdomain.com/wp-login.

Setting Up A Domain Name

While you can go ahead and customize your WordPress site at this point, you should go ahead and setup a domain name as it takes a few hours to take effect. While you can use any domain registrar you want (NameCheap, GoDaddy, 1and1.com, register.com, Network Solutions, etc.), we will be using Network Solutions for the purposes of this tutorial.

Simply go to NameCheap, enter the domain name you wish to purchase. It may or may not be available but you will get matching suggestions by the registrar. You will have to register to further proceed with payment. After payment, login to your account if you are not already logged in, choose Manage Domain from top Dropdown Domain menu and click on the domain name you have registered, this will take you to the modify domain feature. Here choose ‘Domain name Server Setup’ from left mene bar.

Now you can enter the nameserver information for your hosting account. For 1FreeHosting, this will be “ns1.1freehosting.com” and “ns2.1freehosting.com”, respectively. Two nameservers is enough, so just ignore the other fields.

instantShift - Setting Up A Domain Name

Now go back to the 1FreeHosting control panel and click on the “Parked Domains” feature in the “Domains” category. Type in your domain name and click “Park Domain”. Once the nameservers are setup, allow at least 4-5 hours for your domain name to start working.

Note: If you do have a NEQ3 hosting package, you could park the domain on the NEQ3 account using the same instructions and just use 1FreeHosting’s nameservers (or any nameservers). Since the domain is parked at NEQ3, the domain name still points to that account.

Setting Up A Theme

Once you’ve completed the above steps, you can go back to the WordPress login screen and sign in to your WordPress admin account. You are now going to need to pick a theme for your website, which can be done by going to the “Appearance” section on the left-hand side of the screen and clicking on the “Themes” subcategory. Now click the “Install Themes” tab at the top of the page and search for any particular theme by name or select a few filters. My personal favorite is called “StartupWP”, which we will be using in this tutorial.

instantShift - Setting Up A Theme

Once you have chosen a theme, click “Install Theme” to add it to your server and then click “Activate Theme” to make it your primary theme. This can all be changed later if you don’t like it.

Setting Up WordPress Pages

Setting up WordPress pages is as easy as going to the “Pages” tab on the left-hand side of the screen and clicking on the “Add New” subcategory. Here, you can add a title for your page and create some content in either Visual or HTML mode. If you don’t know anything about HTML, you can look up some cool tricks on Google, such as how to create a DIV table or style text. For now, just stick to the Visual mode. Before you publish the page, you can decide whether the page should be a “parent” page (pick this option if the page is going on your navigation menu) or a “child” page (pick this option if the page is going in a submenu), in which you would simply select the appropriate parent page from the drop-down list. Go ahead and call this page “Home” and publish it without changing anything. We’ll use it later to setup your homepage.

instantShift - WordPress Page

Setting Up A Navigation Menu

Once you have created a few pages, you can setup a navigation menu for your website by going to the “Appearance” tab on the left-hand side of the screen and clicking on the “Menus” subcategory. From here, you can create a new menu by giving the menu a name and clicking on the “Save Menu” button.

Note: The name won’t be displayed on your website, so any name will do. I usually use “Navbar”.

instantShift - Setting Up A Navigation Menu

You can now select your menu from the drop-down list under “Main Menu” in the “Theme Locations” module and click “Save”. Now find the “Pages” module, select the pages you want, and click “Add to Menu”. Once the pages are in your menu, you can drag them around to adjust their order or make submenu pages.

instantShift - Setting Up A Navigation Menu

Using Plugins

Plugins are extra tools that can be installed to your copy of WordPress in order to enhance the features and capabilities you have at your disposal. WordPress has plugins for virtually everything and can be used to create online stores, automatically block spam, or a variety of other cool stuff. To manage your plugins, click on the “Plugins” menu on the left-hand side of the screen. Here is a list of all of the plugins you already have installed. Each plugin can be activated or deactivated by selecting the appropriate option on each plugin.

Note: Deactivating a plugin turns the plugin off, but doesn’t remove it from your server. Once a plugin has been deactivated, though, it can be deleted by clicking the “Delete” link.

You can search for new plugins by clicking on the “Add New” link at the top of the page and searching for any keyword.

instantShift - Using Plugins

Using Widgets

Widgets are similar to plugins, but are displayed in your sidebars. You can manage your widgets by going to the “Appearance” menu on the left-hand side of the screen and selecting the “Widgets” submenu item. From here, you can see the widgets you have available as well as the widgets your site is currently using. By default, you’ll have a few blog-like widgets in the “Sidebar Widget Area” module on the right side of the screen. I’d recommend removing all of these widgets by dragging them to the Available Widgets module on the left and then dragging individual widgets you like back to the sidebar.

Some plugins you install may include their own widgets, which will appear in this screen. You can create your own widgets, however, with a plugin called Widget Builder that allows you add html, javascript, or even PHP (using a plugin called PHP Code for posts) to a widget in the same way pages are created. Any widgets you make will automatically appear in the Widgets screen.

instantShift - Using Widgets

Inserting A Logo

In order to insert your own logo into your site, you’ll need to do a little bit of coding. Before you do, though, upload your logo to the Media Library by clicking on the “Media” menu on the left-hand side of the screen and then clicking “Add New”. Now you can upload your logo.

instantShift - Inserting A Logo

Now for the fun stuff. Go to the “Appearance” menu on the left-hand side of the screen, select the “Editor” submenu item and then select the “Header” template on the right-hand side of the screen. Now would probably be a good idea to copy and paste the content into a Notepad document in case you make a mistake.

Now find this block of text:

<div id="branding">
<div id="site-title">
<?php
if (!is_singular()) {echo '<h1>';}
echo '<a href="PUT THE LINK YOU WANT YOUR LOGO TO HAVE HERE" title="'.esc_attr(get_bloginfo('name')).'" rel="home">';
if ($options['logo']!="Logo Here")
echo '<img src="PUT THE URL OF YOUR LOGO HERE" alt="'.esc_attr(get_bloginfo('name')).'" id="logo" />';
else
echo esc_html(bloginfo( 'name' ));
echo '</a>';
if (!is_singular() ) {echo '</h1>';} ?>
</div>

Note: The “PUT THE LINK YOU WANT YOUR LOGO TO HAVE HERE”, “Logo Here”, and “PUT THE URL OF YOUR LOGO HERE” parts won’t be in the text. These are simply the spots you need to put your links at. However, the part that says “Logo Here” needs to be added to your text in the appropriate spot because StartupWP seems to get confused if its left on the default text. My suggestion would be to copy the above text, find it in your Header template, select it, hit the Paste button, and then edit the appropriate fields by inserting the url of your logo (which can be found by going to your image in the Media Library, clicking “Edit”, and copying the URL it shows for that image) as well as the url of a page you want your logo to point to (your homepage would be the obvious choice).

instantShift - Editing Header template

Miscellaneous Improvements

In addition to the above instructions, there are a few extra modifications you can make to further customize your new WordPress website. For example:

  1. You can change the background color by going to the “Appearance” menu on the left-hand side of the screen and selecting the “Background” submenu item. Under “Display Options”, you can simply select a color and save your changes.
  2. To remove the comments section you will have undoubtedly seen on your pages, go back to the “Editor” submenu item under the “Appearance” menu and select the Page template. Once again, copy and paste the content into Notepad in case you make a mistake.

    Now find this line, delete it, and save the changes:

    <?php comments_template( '', true ); ?>

  3. To make your URLs look better, go to the “Settings” menu on the left-hand side of the screen and select the “Permalinks” submenu. Under “Common Settings”, select the “Post name” option and save your changes.
  4. To change your homepage, click on the “Reading” submenu under “Settings” and select the Home page you’ve created in Pages on the drop-down menu for “Front Page” and use the default page for “Posts page”.

    Note: If you’ve already deleted the default page, just create a page called “Blog” or something similar to it and use that as your Posts page. Your viewers won’t see it unless you put it in your navigation menu.

  5. To setup your domain name to work with WordPress, click on the “General” submenu item under the “Settings” menu and set both the WordPress Address URL and Site Address URL fields to your new domain name. While you’re at it, create a title for your website and add a tagline.

    Note: If you change the URLs mentioned above to your new domain name before it is finished processing, you (or anyone else) will not have access to your WordPress site (including the control panel) until it is finished. You can check to see if your domain is working yet by entering it into the browser and seeing what comes up. If it’s your site, you’re good to go.

WordPress 101: Beginners Guide to WordPress

Image Credits

Like it? Share it.

5 Comments

  1. very good tutorial for web designer.

  2. very good tutorial for web designer. i shall expect more tutorial.

  3. I managed to install wordpress but don’t know how to get to the page where you install wordpress themes. I am using NEQ3. please help

  4. This is very good website and good develop well done

Leave a Comment Yourself

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>