Web Design with WordPress Part One

I have been doing web design for well over 10 years now. I transitioned through several platforms during that time, but now use WordPress exclusively and it has benefited me greatly. Today, I want to share with you how to get started so you experience the power and flexibility of WordPress.


First, You Need a Website Host

Like any new program, it takes a little getting used to. My goal is to help you learn some of the fundamentals so you can get started quickly and develop your project as quickly as you can.

The first step before we get to work on the web design in WordPress is choosing a website host. If you are not familiar with this process, try visiting https://www.wpbeginner.com. I’ve used the information from this site quite successfully in the past for questions about techniques and methods of working with WordPress. Of course, there are many more resources you can use, and we’ll get into those at a later date.

But for now, this post is about WordPress hosting. You’ll need to choose a host for your website and there are some recommendations here: https://www.wpbeginner.com/wordpress-hosting/ This particular article introduces you to hosts that have dedicated special programs to WordPress hosting. These programs make it easy for you to set up a WordPress site with only one click.

A Little Back End Work to Begin

Now that hosting is arranged, you need to set up a username and a password in order to log in to your WordPress site. Your log-in will take you to the WordPress back-end dashboard or, in some cases, the admin dashboard.

I tend to refer to this as the back end. The front end is the part of the website your viewers have access to; the back end is for the website owner. You can open up the front-end from the dashboard to view changes as you create them in the back end. It’s here that you set up menus, name and publish your pages, install plugins, and perform other admin duties. There’s an extensive menu in the left-hand column that lets you choose what you will be working on next.

But before we get into creating the website pages, we need to take care of a few items on the back end.

First, go to the menu’s “All Users” option and click it. When you start your site, there’s only one user listed: your admin user name. Click edit in the tab and, for security reasons, create an admin user nickname. That way, if you choose to include a blog on your website, the author will show up as your nickname rather than your admin name. Doing this protects your admin user name, making a hack into your site more difficult.  (A hacker would now have to figure out your admin user name as well as you password, probably more trouble than it’s worth.)


Setting Up The Home Page

The next line on the page lets you use a drop-down to choose to “display my nickname” in all posts. Then you can scroll down to the bottom of the page and update the profile. Now the site will address you by your nickname, not your login user name.

Web design with WordPress- setting user name

After this, the next step is to establish what the front end of the site will look like. In that lefthand menu I talked about before, you’ll see both “Pages” and “Posts” listed as options. Pages are the informational pages on your site and are not interactive. Posts allow you to engage with your audience through comments – the blog page format you see on so many sites. You can use either or both of these formats on your site.

If you plan to use pages, it’s good to set up a home page first. WordPress sets up several default pages which you will see if you click “All Pages” in the lefthand menu. When you don’t want them (I personally don’t use them) you can delete them. I do like to create my home page before I delete anything else, so I click the “Add New” option in the dropdown first.


Addressing the Front End of the Site

Web design in WordPress has gotten easier and faster with the new page editor, The Gutenberg Presentation. This innovation lets design your page in the back end. We’ll talk more about this later on, but for now we’re going to work with front end design. But no matter where you want to create the pages, first you have to specify them in the back end.

Web Design with WordPress- setting the home page.

Now that you’ve clicked the “Add New” dropdown, you will see a place to add a title. I generally call my home page Home. Click on the Publish button twice and your new page is created and live. Go ahead and Trash the default pages WordPress has created for you. And don’t worry if you ever trash a page and then change your mind. WordPress holds the trashed pages in something like the Windows Recycle feature or Trash in Mac OS. The page or post is taken away from the visible portion of the menu and the front end of your site, but stays in Trash and can be recovered at any time.

How do you want to present your site on the front end? At this point, the Home page is defaulting to a conventional blog format in which the posts are the home page. But we’re creating a conventional website in this discussion. We’ll work on blog posts later.

For the moment, let’s head over to the “Settings” option in the menu and under Settings we are going to go to “Reading” and click on that. You’ll find that under the Reading settings your home page displays is set to show Your Latest Posts, but you will want to choose A Static Page instead. Below that, under Homepage, choose Home. Later on, if you establish a blog, you can select a page to host your posts. We’ll get to this in another post.)

Web Design with WordPress-Reading Settings

 It’s time to hit Save Changes, click back to the front end and refresh the browser. Now you get something completely different: a home page. There are still items on that page to be changed, but right now there’s one more settings feature that we need to choose before we move on.

Back to the dashboard, and under Settings we will now choose the Permalinks menu item. You will see that the website URL is defaulting to day and name. This is what will show up in your menu bar across the site, and it’s not very useful for site navigation. Instead, I like to allow my website URL to reflect the name of the page or the name of the post.

Web Design with WordPress- Permalink Settings

To fix this, click on Post Name and the post name will now be used in the URL address bar. Save these changes, and now we’re going back to the front end of the site. Refresh your page (although nothing is going to happen right now because it was showing on the home page anyway.)


Establishing a Menu

Web Design with WordPress- Establishing the Menu

To establish a menu you have to tell WordPress what you want your menu to look like. In the back end, go to the Appearance tab in the left sidebar menu. From the dropdown, choose Menu. There will be no current menu available, so it’s time to choose a menu name.  You can have as many menus as you like: you can put separate menus to navigate within structures of your website, which I’ll show you later on. For now though, let’s just create a main menu –the pages that will show up in your nav bar. ( tend to name this Main Menu.)

Now we have another choice to make. You’ll see that under Menu Settings, you can add new pages automatically, but I prefer to that manually. And since this is our primary site menu, choose Primary as the menu location.

It’s time to add the pages to the menu, but of course, we only have the Home page so far. Under the Pages section, click to select Home, click Add to Menu, and it will show up in the Main Menu structure. That’s all we need to do here for now, so save the menu and head back to the front end.

Okay, it doesn’t look like much so far because we have not installed the theme. That’s the subject of the next tutorial. But as you can see, the home page is set up and ready for you to work on. As you add more pages to the site and place them in the menu, they will show up next to the Home page in the nav.

Next time we’ll also talk about the look and feel of the page, and since we will be establishing a blog for the site, I’ll show you how fix the home page to reflect that and remove the Post section that is showing by default.

Ready to move on to the next phase of building your WordPress site?  It’s coming up in our next blog post.

 

 

 

Get Started Today