Tutorials Web Development

How to Build a WordPress Website in Under 40 Minutes?

No ratings yet.

What do you think? How much time does one need to build WordPress website with 3 subpages?

One day? Two Days? More?

I dare say you will need around 35 minutes, provided that you have already prepared all the necessary imagery and website copy.

Just in case you are not that good with graphics or copywriting, you can outsource these tasks and never worry about it again.

You can outsource tasks to:

Each platform has its flaws, but still, you can try them out.

Just in case you are a big fan of the drag-and-drop page builders, then it should be interesting to you to learn more about Elementor page builder, which is included into the biggest part of WordPress themes from the inventory. We have reached the CMO of Elementor for an interview. Check out what he has shared with us in the blog post.



TL;DR

Skip intro to watch the screencast here.


Stage #1: Pulling Myself Together

I’ve been preparing all the graphics on my own, but I didn’t bother writing texts, only for the About page, I wrote just a few lines.

It’s the first thing that came up my mind, so don’t judge me strictly.

Build WordPress Website

For the remaining text blocks, I used hipsum.co to generate several lines of bullshit text.

The longest preparation step was the logo, now I understand why it costs so much. Sometimes it’s much better to get a logo template than spend numerous hours creating something that will make people sick.

For my logo, I used the same font as I'll use for the headlines - Rubik.

Here's a final revision of my logo.

Build WordPress Website

You may say that it looks like crap, especially the font, and probably you will be right, but you know what?

Build WordPress Website


Stage #2: Preparation

Before I started recording the screencast, I made a plan of what I need to do, here it is:

  • Site Identity
    1. Site Title >> Hit Sacker
    2. Tagline >> Professional Sleepyhead
    3. Show tagline after logo >> tick
  • General Site Settings
    1. Logo
    2. Logo Type >> Image
    3. Logo Upload >> logo-small.png
    4. Retina logo >> logo-big.png
    5. Breadcrumbs >> Enable Breadcrumbs >> OFF
  • Color Scheme
    1. Regular Scheme
    2. Accent color 1 #897c66
    3. Accent color 2 #474034
    4. Accent color 3 #776850
    5. Accent color 4 #9d937d
    6. Text #474034
    7. Link #9d937d
    8. Link hover #474034
    9. H1-H6 #222222
  • Typography
    1. Body >> Roboto >> Font weight 400
    2. H1 >> Rubik >> Font weight 500
    3. H2 >> Rubik >> Font weight 500
    4. H3 >> Rubik >> Font weight 400
    5. H4 >> Rubik >> Font weight 400
    6. H5 >> Rubik >> Font weight 400
    7. H6 >> Rubik >> Font weight 600
    8. Breadcrumbs/Entry meta >> Roboto >> Font weight 400
  • Header
    1. Styles >> Layout (Style 3)
    2. Top panel >> OFF
    3. Main menu >> Enable Sticky Menu
  • Menus
    1. Menu locations
      1. Main >> new
        1. Blog
        2. About
        3. Services
        4. Contacts
        5. Social >> Social
  • Sidebar
    1. No sidebar
  • Footer
    1. Footer styles
      1. Show Footer Logo >> OFF
      2. Layout >> Style 1
      3. Footer Contact Block >> OFF
  • Blog settings
    1. Blog
      1. Layout >> Grid (2 columns)
      2. Post content >> Hide
      3. Show post author >> ON
      4. Show publish date >> ON

FYI, the color scheme was generated from the cat photo on top of this post using free tool colormind.io. This tool can generate unlimited number of color schemes from any image it renders.


Why Did I Make This Plan?

Aren’t you making any plans or lists before you start some important activity?

This plan helped me save a ton of my time, and to make a website in the shortest timespan possible.

If you can make it faster let’s make a screencast battle, who can build websites faster, this could be fun.

For my test I used MaxPaxton WordPress theme since I was building a portfolio, I picked a portfolio theme, makes some sense, right.

All images for this experiment I took from unsplash.com


Stage #3: The Recording

The easiest way to record a screencast is to use your YouTube channel.

Open your Creator Studio

Build WordPress Website

There choose Live Streaming in the left menu

Build WordPress Website

Open the menu item Live streaming and press Events

Build WordPress Website

Now you need to press the button on top + New live event. On the next screen, you need to add Title, Description and change its visibility to Private.

Build WordPress Website

You’re almost ready to go live.

If you see this, then you’re definitely ready to go.

Build WordPress Website

When you hit OK, Google Hangouts will start loading, when it loads, you need to choose either you will broadcast from your web camera, or as a screencast.

Build WordPress Website

Icons from top to bottom: Chat, Screenshare, Cameraman, Control Room.

To initiate a screencast you need to press Screenshare, right after you see your desktop inside Hangouts window don’t forget to press a huge green button which is at the bottom of the window

Build WordPress Website

Hit it, and you will go live.

Now, check out my screencast.

To answer your question regarding the length of the video, which is 21:46.

The screencast playback speed was increased by 45% so you could comfortably view it, without having to spend 40 minutes watching me click.

The day when I was recording this, my ISP decided that 30MB/s is too much for me, and decreased the speed to 2MB/s 🙁


If you want to see some more installation/customization screencasts for other products, add your requests in the comments section, and I'll make something for you.


P.S. I heard some of you guys experience difficulties installing and maintaining HTML5 templates, is that true?


Read Also

How I Went Mystery Shopping to ThemeForest and TemplateMonster, and What Did I Find

4 Psychological Web Design Principles to Boost Conversions

How To Create Default .htaccess File For WordPress

A Guide to the WordPress Template Hierarchy

Where to Get the Best WordPress Customer Support?

All That a Website Can Be: Best Multipurpose WordPress Templates

Leave a Reply

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