WordPress Tutorial Featured

How to Create $1500 WordPress Website from Sketch

Views: 538

In previous WordPress tutorial, we learned about installing WordPress in both local and server environments and creating required databases for WordPress, in this tutorial we will learn how to create a $1500 website within few hours. If you have missed the previous tutorial then you can follow the link below.

How to Install WordPress Step by Step Tutorial

A lot of people think this once in a while “Why to use WordPress for building websites?”

Well let me answer this question, WordPress is a CMS with rich library of plugins and themes which allows us to customize out websites or blogs as much as we want, also WordPress is an open source CMS which means you never need to pay a penny for building your websites or blogs with WordPress, you just pay for themes and plugins you buy and the hosting space you use. In the previous WordPress tutorial we learned about installing WordPress, now we will see how we can make a $1500 website using WordPress CMS within no time.

Creating $1,500 WordPress Website from Sketch Tutorial for Beginners

WordPress is an easy to use and very flexible CMS which can adopt any environment i.e. a blog or website or eCommerce website, all can run with WordPress, while you take care of your contents WordPress takes care of your website or blog, you can do is setup your theme and plugins for user experience and looks, so let’s start building our website with WordPress. Login to your admin panel which you can find at www.your-website.com/wp-admin with your WordPress username and password you created during installation. Now we will setup our theme.

Wordpress Admin Dashboard - Navigation Menu

How to Install WordPress Theme

A theme is set of your view templates which are used by WordPress to display your contents like post and pages, there are three methods you can install a theme to your WordPress project.

  1. Uploading your theme folder to WordPress theme directory with FTP.
  2. Uploading your theme to your WordPress project using wp-admin’s theme uploader.
  3. Using WordPress theme library to install themes.

Uploading your theme zip folder to WordPress theme directory with FTP

A theme is the main component for our websites, we need to be sure about what theme we will be using for creating our WordPress website because the theme will control the whole user’s view part. If you have a zip file of your theme then you can use FTP clients like filezilla for uploading your theme, and later you can install and activate your uploaded theme. For uploading your theme follow the steps.

  1. Extract your theme files.
  2. Login to your server using any FTP client.
  3. Go to your WordPress installation directory, and open wp-content, then open the themes directory, upload your theme directory here.
  4. Once done open your WordPress dashboard (wp-admin area) in the sidebar find “Appearance” then click “Themes”, once there you can see the new theme you uploaded.
  5. Hover over the new theme you will see two options Activate and Preview, now you can activate the theme. And the theme will be applied to whole WordPress website.

Uploading your theme to your WordPress project using wp-admin’s theme uploader.

We can also directly upload our theme from our dashboard and this is the easiest way of installing a theme manually. Just a few simple steps and you are done.

  1. Go to your WordPress dashboard then “Appearance” then go to “Themes”.
  2. Then go to add new then upload the theme, click choose file, select your theme zip folder and click install now to upload your WordPress theme.
  3. Once the installation is complete, WordPress will display success message, there you can preview the theme and also activate that. Click “Activate” to activate the new theme.

Using WordPress theme library to install themes

As I mentioned before WordPress has a rich theme library, we can browse WordPress theme library from our own admin dashboard and install the desired theme to our WordPress. For installing theme directly from WordPress theme library follow these steps.

  1. Go to your WordPress dashboard then “Appearance” then go to “Themes”.
  2. Click “add new” button, WordPress will take you to a new page with a gallery of themes, search your preferred theme.
  3. Hover your courser over the theme you want to install, you will see an “install” button there, click that. If you want then you can see a preview by clicking the “preview” button.
  4. Once the theme is installed the theme will have an “Activate” button over it, click that to activate the theme, else you can go to appearance/themes and activate the theme.

Once you have installed the theme with your preferred way, open WordPress install URL in the browser. You can see a change in the display of your website, means we have a new theme installed now instead of default one.

Creating Our First WordPress Website’s Page

WordPress has two categories of web pages namely post and page, for websites we use pages whereas for blogs we use posts, once we have a theme ready we can move to create our first page which will become our home page.

On WordPress admin menu go to “page” then click “add new” you will find various options there let me explain them to you.

Wordpress Add New Page

  1. Screen Options: This allows you to control what options is displayed on the “add page” screen.
  2. Enter Title Here: Here you can enter the title for your new page, for now, we will use “Home” as the title.
  3. Add Media: By clicking this button you can upload media files like images, zip files etc. to WordPress and use them in pages or posts.
  4. Toolbar: Below the media button there you can locate a toolbar, it helps us to customize our content like making text bold, italic or align contents etc.
  5. Rich Text Area: This is the big white box underneath the toolbar, this is where we write our page contents.
  6. Publish: This allows us to save our WordPress page and posts as a draft and preview them or after final audit publish our pages, there are three options, preview, save a draft and publish.
  7. Page Attributes: Here we can select the parent page for our new page and select the template we want to use for our page, WordPress themes come with different templates for different use, check the theme manual or theme details for more information about the templates provided with your theme.
  8. Featured Image: While creating WordPress pages or posts people sometimes confuse with featured image, featured image is the image that features the page or post it is used in, it is used as thumbnails or theme developers may use it as header image for the post and pages etc. So I will suggest you to configure it for your every post and page.

So now let us add some content for the page, put some text inside the rich text area and set the title to “Home” then click on save draft, additionally you can change the template for this page, now click the “preview changes” button, a new tab will open displaying you the page just created. Once you are satisfied with the new page to publish the page, similarly you can add more pages to your WordPress website.

Creating WordPress Website’s Custom Navigation Menu 

Now as we have created our WordPress pages we need for our website, we will want our users able to navigate through our pages so we need to create a navigation menu for our WordPress website which allows users to drive through all our pages, for adding custom navigation menu open appearance then click on menus. Now check the following steps.

creating wordpress custom menu

  • Menu Name: Enter a name for your new navigation menu and then click create a menu, your new menu will be created.
  • Menu Settings: Once the menu is created, under the menu settings choose where you will want to use this menu. I will set it as primary menu. Auto add pages will automatically add top pages to menu so I will keep it unchecked as I want a default structure of menu with my selected pages.
  • The Accordion: On the left of menu creation page you can locate an accordion with four tabs.
    1. Pages: Here you can find all pages that are published.
    2. Posts: Here you can find all posts that are published.
    3. Custom Links: Here you can add a custom link to your menu, URL is the location of that page you want to add and link text is the text used for the anchor tag.
    4. Categories: Here you can find all categories that have been created in your website and you can add the categories to the menu.

Now select the pages you want to add in the menu and click the “add to menu” button, leave our new home page, we will use that later on, go to “custom links” type in your WordPress installation URL and name it as “Home” then click “add to menu”. Once done, drag and position the menu elements in the order you want it to be displayed and then click “save menu”. Now our menu is ready, browse your WordPress URL, can you see the new menu structure you just added? Great job you have created your own custom menu.


Creating WordPress Website Custom Home Page

Remember we had excluded our home page from the menu that we created? Let me explain why. We created that page for our home page, and we already have added a “Home” link for our WordPress home page, but currently it displays a post, so we need to tell WordPress that we want our home page to be displayed when a user visits front page of our website rather any post being displayed, for that follow the steps below.

  1. Go to WordPress Admin Navigation hover on “Settings” then press “Reading” in the navigation menu.
  2. Under the “Front page displays” check “A static page” then a drop-down list will get enabled, click on that and select the page you want as the home page of your WordPress website.
  3. Scroll down and click save changes. Now visit your WordPress install location from your browser, you will able to see your home page instead of some random post.

Congratulations, you have just created a WordPress website with your own navigation menu, theme, and pages.

 

In next tutorial, we will learn how we can add media to our WordPress pages and posts, stay updated, subscribe to our notifications by clicking the bell. If you found this tutorial helpful then share with friends, if you have any questions in mind or suggestions feel free to ask in comments below.

Comments: 0

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