How to create a WordPress website from scratch

How to create a WordPress website from scratch

How to create a WordPress website from scratch

OVERVIEWHOSTINGWORDPRESSPLUGINSPAGESTHEME

Changing the WordPress Theme

Now that we have a few pages set up, let’s go ahead and change the theme we are using, in order to customize the look of our website. The default theme installed is the Twenty Fifteen theme. We’re going to install a free theme called Interface.

  1. Click on Appearance -> Themes in the Lefthand menu.
  2. This dashboard shows you all the themes you have installed, as well as the currently active theme. Click Add New. add new theme
  3. Here, you will find a ton of free themes for download. (This isn’t the only place to find free WordPress themes. You can upload a theme you downloaded elsewhere on this screen too.) If you are going to explore different themes, be aware of the following:
    • Make sure you filter the results to only show you responsive or fluid layouts. It’s so important these days to make sure your website’s layout changes according to the device it is being viewed on. I wouldn’t consider a theme that does not have this feature.
    • Different themes have different levels of customization. You might notice new menus appear in your dashboard that enable you to add logos, change fonts, etc. It all depends upon the theme.
    • Try to find a theme that closely resembles the final layout you want for your site. The less customization you need to do, the faster you’ll be up and running. (All themes can be wrestled around in the back-end code, but it can be complicated, so you might have to hire a developer to make the customizations for you.)

    Type in Interface in the search box and click search. Click the Install button on the Interface theme.
    Install interface

  4. Click Activate to activate the Interface theme.
    activate theme

With the new WordPress theme now active, go ahead and check out your site now and click refresh to see what it looks like now.

Customizing the Interface Theme

Interface includes a new, custom dashboard that allows you to easily add a logo, header image, background, change layout, social media profile links, and more. I think it’s a great theme to work with, and gives you just enough customization to make your site unique. If you need to dive even deeper, the CSS is well organized, providing you with good groundwork to make final tweaks to things like fonts.

To access the theme’s custom menu, click on the new menu item Theme Options in the Appearance menu.
theme options

You can customize your theme however you’d like, but these are the settings I prefer:

  • LayOut Options
    • Site LayOut -> Narrow LayOut
    • Content LayOut -> Right Sidebar
    • Responsive LayOut -> ON
  • Design Options
    • Custom Header -> If you have a logo, click Change Header Logo to upload your logo. Make sure you click Header Logo Only so your logo is displayed. No Logo? Try out Canva to create your logo yourself.
    • Fav Icon -> This is the small icon that appears at the top of the browser tab when someone is on your website. You can use an app like http://favicon-generator.org/ to convert an image to an .ico file
  • Contact/Social Links
    • Social Links -> Copy and paste links to all of the relevant social media profiles you’d like to link to on your site. This will automatically insert a bar at the top of the page with icons for each link.

There are some other customizations you can do using the generic WordPress theme options. Click on Customize in the Appearance menu. This will bring up a live preview of your site, and will display a number of design options you can customize.
customize theme

For example, to upload a repeating, tile background image for your site, click on Background Image. You can find some great subtle background images at subtlepatterns.comClick Select Image, then click Upload Files to select the image to upload. Once the image is uploaded, click Choose Image at the bottom right corner of the window.
choose image

Make sure the Background Repeat is set to Tile, and you’re all set. Click Save & Publish. These are all just examples of ways you can customize your theme. Explore the different options for yourself and customize it the way you want it to be.

Adding Widgets

Widgets are drag and drop boxes that you can arrange onto your sidebars of your theme. Different themes will have different widget areas available, and they might even come with their own widgets. To manage your widgets, click on Widgets in the Appearance menu.

On the left, you’ll see available widgets, and on the right, you’ll see the widget areas. By default, WordPress will have a number of widgets in the Left Sidebar area (including Search, Recent Posts, Recent Comments, Archives, etc.) Depending upon what site layout you chose when customizing your theme, you may or may not have the Left sidebar visible on your site. If that’s the case, you just need to drag widgets into the Right sidebar area instead.
WordPress Widgets

One widget I use a lot is the simple Text widget. I use it to add text to my sidebar to tell people a little bit about me. You can also add images to the text widget using HTML, but that’s beyond the scope of this tutorial. Congratulations! You now have a fully functioning website and blog!

There is a lot more to learn about WordPress, but if you have any questions, sign up on the forum and I’d be happy to help.

OVERVIEWHOSTINGWORDPRESSPLUGINSPAGESTHEME

 

I'm just getting started

You're visiting right in the early days of launching my site. If you want to be notified of new tutorials as they are released, sign up for my mailing list: