WordPress First time Login

Okay, so the new site is live. The first thing to do is to get familiar with the layout and where everything lives.
To see this head over to the WordPress login page. Your login URL will look like this:

http://www.yourdomain.com/wp-admin
(Replace the blue text with the domain name you purchased)
Keep this tutorial tab open but open a new tab in your browser. Type the link into the top address bar. Click go.

Take a second to bookmark the login page for easy access next time.
You can now login to your WordPress site using the admin username and password you entered earlier.
You then arrive on your Control Panel in the "Admin backend" of your site. Only you have access to this so keep the login safe and private.

On the left is a navigation menu to access the different areas and functions you can adjust. You notice at the top of that side menu "Dashboard is highlighted in blue. The page content appears in the area to the right. Click each tab on the side menu to familiarize yourself with what to expect in each one.
Now go to the top left of the control panel above the left menu.
There you will see the WordPress Icon, Home Icon, and your Site name.

Click on your site name and it will take us to the "Frontend or public" side of your site. You can move between front end and backend only because you logged in before as administrator. Others visiting the front end of your site cannot do this. The black bar across the top of screen with these options does not display to visitors. Also notice on the far right of this bar is a “Howdy (your admin name) and a Gravatar. Clicking on it gives you a dropdown menu where you can logout from your site completely. This is always visible to you front or back end.

Pretty disappointing and boring huh? Well not all bad and kind of exciting because "Hey!! I got a real website". This is what people visiting your site will see. Don't worry we are going to fix that pretty quickly.

Picture WordPress as a house with all the rooms and things that make up a bare house. Then picture a theme as all the paint on the walls the window dressing and pictures on the walls. A theme controls the general look of the site.

It can be easily customized or completely replaced with the click of a few buttons. There are thousands of free themes available and they are easily loaded. Any content you add to your site such as pages, posts photos etcetera will not be lost if you change the theme later.

The out of the box "Twenty Nineteen theme" has little customization at the start. We can easily replace it with one of many thousands of free Themes in a few simple steps. Just take a mental note of what is there now and we will go do some adjustments in the backend to make the changes we need.

General Settings

To return to the backend, click your site name in the left top again.
Now we need to do just a couple of housekeeping tasks before we move on too far. Click on the settings tab in the left side menu.

You will see that tab expands with a drop-down menu, the first item (General) is highlighted and that page appears in the content area to the right.

The first field at the top is Site Title. The install process will have auto filled this field with info you previously entered. It is safe to change should you find reason to do so later. Just a display name and helps confirm they arrived at the correct site.

Below that is the tagline. The default is "Just another WordPress site". You can change this now to something more suitable. Just click on the fields and replace the text.

Leave the next two fields "WordPress address" and "Site address" they should have been automatically filled by the install. Any change here can be detrimental unless you know what you are doing.

Check your email address. It will usually autofill from the information you entered for the initial install. Check that it is correct and change if necessary. This allows the website to send you notifications should the need arise. An important example of this is if you were to do a password change the system sends you a authorization link just to make sure it is you. If you can't access the sent email, you can't authorize the change.

Leave the next two fields.

Then set your preferred language. This setting affects your writing in the site, it governs things like spellcheck and grammar checkers. Use the drop-down arrow to select.

Next set the Time zone for the site. Important in respect to system generated information. It relates events to you working in your time zone, so you know when things actually happened. i.e. password resets or issues you need to address.

The next three are Time, Date, and starting day of the week. The Time zone maintains the time automatically. This is just the format or appearance. You can change these later if you need to.

Most important of all is to save all these changes.  Click the blue" Save changes" Button at the bottom of the page. Any time you change information in WordPress you will use a save or submit button to confirm the change.

Now on the left menu - still in the setting tab sub-menu - go down from general and click "Permalinks"

When this page opens, the default is set to "Post name". Click on the option below it “Custom Structure". The blue radio button will change to your selection. To the right you see your domain name followed by a text field you can edit.
It currently has /%postname%/ delete it.  You will notice a series of boxes below this line called available tags. Now with the prompt blinking in the empty text box, place your mouse button and click first on the "category tag" and then on the "postname tag". This will select these tags and add them in the text box you just cleared. It must end up looking as per the picture above and the order is important.

Just a note here to help you understand some of the architecture of a website. Everything within and sometimes external to your site has an address. Think of it similar to your stuff on your computer. You have Documents, pictures, Downloads etc., etc. Each of those may have sub folders which in turn may have more subfolders. It’s the same here in your website.

So https://demo-site/blog/hello_world is an address on your site. First your domain name, then the sub folder blog, then the specific post “Hello World”. This is the address to this welcome post. Obviously, everything is not as simple and short as this, but you don’t have to worry about it. WordPress creates and manages this automatically for you.

Scroll to the bottom and click Save Changes.

Ok, that's a couple of basic setup tasks out of the way. Let’s get back to changing the appearance of that front end.

Appearance and Themes
Click on Appearance - Themes. (still in the left admin menu)

We currently have Twenty-Nineteen active but let’s change to Twenty-Sixteen theme. It’s an older theme but ideal for learning what we are doing. Hover on Twenty Sixteen and then click on activate when it becomes visible. It now moves to be the first display in the window with a blue customize button. Click the button.

We are now back at the frontend view within the Customizer. Notice the appearance has changed its layout from before.

Left of screen the Customizer is open waiting for us to make refinements to the appearance. Let's make a few changes just to get a handle on how it works.
In the customizer menu on the left start at the top and click on each option as we move down.

Site identity. Notice the same info you saw before in the settings screen. It can be edited in either location.
Colors - you see the color setting for all the elements of the page. For now, just the top item, background color. Click select.

A color selector opens. In the current theme. On this Theme that thick black border is actually the SITE background. In the color selector use your mouse to click each of the colors and watch the background change. You can do the same with each of the other elements in the list. Keep in mind that ease of reading should be a high priority, when selecting a PAGE background  Red probably won't be a great idea because you need your text to be higher contrast that the page, but it is possible.

Header image. We have none at the moment so let’s add one. Click add new image. You are now taken to the media library in your site. Which is probably empty at the moment. Click the upload files tab. Now either drag and drop an image or hit select to navigate to the image folders in your PC. To select an image highlight it- then click the open button at the bottom of the open window. WordPress uploads the image to the Media library. When complete the image is highlighted, at the bottom of the media library press the blue button Select and Crop. The next screen shows the suggested crop shape – you can accept or change the crop, or even skip the cropping. The image will now appear in the Header area on the page.  Let’s keep this for now, so in the top of the customizer click the blue publish button to keep it. You can change it here any time you like.

Background image is the same as changing Background color, but here you can do it with an image instead. That includes things like using textured backgrounds. If you have Microsoft Word on your computer, you can find the image files it uses to add background textures to documents. They are in the Pictures folder. Look for Microsoft Clip Organizer on Sample Images.

Menus shows us the current menus and their locations. The current Primary menu is set to display in location Top (above the header image) and the Social Icons menu is located towards the bottom of the page. Different themes can offer more or less flexibility with menus. But most offer the possibility of adding more locations using things called widgets.

Widgets are small apps that can appear in various places. This tab shows you we have Widgets in the Sidebar, Bottom 1 and 2.  Clicking on the sidebar tab shows which Widgets are already active in this theme. With the plus mark at the bottom we can add more. It opens a list of available widgets to add.
The sidebar appears on our page to the right of the content. Many of these widgets perform automated tasks and we don't have to do anything more than just display them where we want them. As an example, the Recent Posts, Recent Comments and Posts archive all report information automatically without you having to add it yourself. Less work for you.

Homepage Settings can be set here or in the Settings menu in the backend. It allows you to have a fixed front page which may be a welcome or an about page, its up to you. Alternately it can show your Blog Posts showing your latest posts first.

Additional CSS, Cascading Style Sheets. This one you can leave for now. This allows the addition of code to change appearance in layout beyond the available options you have above. It sounds scary but you don't really need to go there. In future if you are on the web researching how to do something in your site, and they start talking about inserting a little snippet of CSS code to achieve it - then this is where you paste that snippet.

Okay, take a break, have a coffee. Then we can move onto working with Plugins, Posts and Pages.

Plugins.

Plugins are found in the backend Admin Control Panel. So, go there now.
Plugins add functionality. At the time of printing this tutorial there were 54,538 in the WordPress free plugin directory. You can read about each plugins functionality in the Plugin Directory by clicking the more details link on each plugin. Popularity of a plugin is also displayed by the number of active installs and the star rating. Keep in mind anybody can write plugins for the WordPress directory. They are usually screened before they are allowed in the directory. The better the rating then usually indicates better results and user satisfaction. There are a couple we need to add so we can move forward without interruption later. In the Plugins Tab of a clean install, we are greeted with a blank page. Some hosting company’s add packages of useful plugins to the install so if you have some already it’s okay.

At the top of the screen click “Add New” which takes you here.

This is the Plugin Directory. There are 4 tabs to filter the plugins, Featured, Popular, Recommended and Favorites. To the right you will also note a Search Field you can use if you already know the name of the plugin you want to install.

There are three useful plugins here to install. (the plugins shown on each tab of the directory can change with time, but don’t worry, just type the plugin name in the search box it overrides the Tabs to find it. The graphic for each plugin rarely changes so should be easy to find.)

Akismet which helps protect you from spam comments. Click install now.
Classic Editor. This is used for writing pages and posts. Install
Gutenberg. is part of a new editing experience WordPress are gradually building. Best to have this so       you can follow future changes as they happen. Install

Next type TinyMCE Advanced in the search box. The screen will find it for you. This adds a few more options to the word editor.  Click install.  Now click on Plugins in the left menu again to return to our installed plugins. Plugins often have settings you can adjust. Most install with user defaults that work out of the box.

The Akismet plugin requires an API key to work. When you click Activate in the options below it, it takes you to their site to get a key. You don’t need to pay for this unless you really want to. Just click Get personal – on the next screen drag the slider back to zero dollars, fill in your Domain name and your name then click continue. You will then receive you API Key to paste into the field in Akismet plugin on your site.

Now activate Classic Editor and TinyMCE Advanced but leave Gutenberg inactive for now.

So now you know where to find plugins, how to install them and also how to activate them. You can also Deactivate them or delete them with the same ease. Just remember to check the ramifications first if you have been creating content with the help of a particular plugin. You will find this info on the plugin’s webpage.

For the Akismet Plugin you can see there is a view details link which takes you the page with all the info for the plugin.

So now we are ready to write a post and a page.

Posts and Pages

Go to Posts using the Posts option in the left control panel Menu. You will notice it also has a submenu like many of these selections in the side menu. If you were to hover on any of the main buttons the submenu becomes visible and you can click to go straight to the option, you want. If you just click on the main heading it will usually open the default page and also expand the sub-menu options below it on the side menu. Whatever suits your workflow is fine.

We already have one post which is a default sample post called “Hello world!”. You may remember seeing it on the frontend last time we were there. Let’s create a new post. You may be stuck for something to say but you can say anything, we can easily delete this post later once you start writing your real Blog. So now click “Add New” at the top of posts window.

This is the Classic Editor. The cursor is in the content area waiting for us to write something. Above the cursor is the formatting bar similar to many word processing software programs like Microsoft Word or Google Sheets. The TinyMCE plugin allows us to add even more options if there is something missing that you really want in this formatting bar. After we added the TinyMCE plugin a new entry appeared at the bottom of the settings list. It is very simple to add or remove options.

You will notice there are two tabs Visual/Text. The visual one is the default we always use. The Text tab shows us what is known as HTML (Hyper Text Markup Language) As we type in the visual editor and add format such as bold characters, italics, spaces etc., the software generates the HTML equivalent in the Text tab. All the additional code or characters you see are what define appearance on the page. You don’t need to go there. Later on, as you know more about your site there may be things you may want to do in the text tab. Or maybe not.

You can type something, or you can also cut and paste things here. Just one thing to know about cutting and pasting. When you cut or copy text, you also copy hidden formatting or HTML from the source. In some situations that can cause a conflict with the way the finished text appears in your post. It is usually safer to keep it clean just copy and paste as plain text then format with the editor to get consistent appearance. If you have trouble pasting as plain text there is an easy way to clean the text first. Every computer operating system has a basic “Text editor” tool. In Windows you can right click the desktop and select “New” and in the dropdown you will see your various options.

You will notice I have highlighted “Text Document” In windows this is a basic Text editor that by default only accepts displays clean text. Just click save to confirm the paste and it will be ready to use on your website. This is especially useful if you are pasting something from an unknown source. We all get spam emails and spam posts in social media. Sometimes the author of these communication can hide harmful links and code in their text that we cannot see. This use of our basic text editor can clean-up any of those hidden things and remove them to keep everyone safe.

The Post/Page editor in WordPress allows you to add not only text but all sorts of Media also. You can insert an Image by clicking the Add Media button. This takes you to your Media library where you can select an image or import an image to use. The image will be inserted wherever the cursor was when you clicked Add Media. The image will display a formatting tool where you can control how the image displays on page.

So, let’s start,

•  First add a title for the post in the Title field at the top.
• Next let’s add an image. Click Add Media, import an image from your computer. Using the Highlighted tools. You can resize it to suit once it is on the page by dragging any of the corners. You can set the image left or right with the text wrapping around the image. You can center the image. Clicking the Pencil icon opens the image details box where you can adjust these and other attributes also.

• add some text by typing or cutting and pasting plain text (text can come from anywhere, even copy a block of text from this tutorial) Try using the 'Lorem Ipsum' below.

Gravida quis blandit turpis cursus in hac habitasse platea. Elit ut aliquam purus sit. Quam adipiscing vitae proin sagittis nisl. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Magnis dis parturient montes nascetur ridiculus mus. Quis lectus nulla at volutpat diam ut venenatis tellus in. Iaculis nunc sed augue lacus. Sodales ut etiam sit amet nisl purus. Donec ac odio tempor orci dapibus ultrices in iaculis. Blandit cursus risus at ultrices mi tempus imperdiet. Proin libero nunc consequat interdum varius sit amet. Maecenas sed enim ut sem viverra aliquet eget. Habitasse platea dictumst quisque sagittis. Vitae tempus quam pellentesque nec nam aliquam sem. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Egestas congue quisque egestas diam. Facilisi nullam vehicula ipsum a. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Eu facilisis

Now in the right-side column click the blue Update or Publish button. (the button will say Update if you are editing a post you previously created, and Publish if you are creating a new Post or page)

The post will save. At the top of the page you will see an option to go to “view post”. Click it.

So, there is your first Post. If you don’t like something, click the Edit Post option in the black bar at the top of the window. This will take you back into the Editor with the post open for you to make adjustments. Have a play changing things then save your work. Because it is an existing published post, the save option now shows as an UPDATE button. Again, once saved/updated you will see the View Post button top of screen. This will take you to the frontend to view the post.

Next, we take a look at pages. Pages use much of the same process to create. The one main difference is they need to be added to the Menu on the front end so people can find them. If we have a static Home page the site will always open on that page. If we set our site to Blog, then the site will always open at a page displaying our most recent Posts.

Pages

On the backend Control Panel select Pages.

When we chose the Twenty Sixteen theme it automatically created a number of pages for us. This is in keeping with the basic layout of that theme. We can keep them all or discard them all. We are not locked into using them. They just saved us some work because most of these names are things you expect to see on most websites.

About Page. Is just that. The page is currently empty but is already created and appears in the frontend Menu. Add something when you are ready. You might use this to tell people who you are, what your site is about, etc,etc.

Blog-Posts Page is one important exception. Do not edit or delete this page. It has specific formatting to display all the posts you write in the posts tab. The reason this page is here is so the Posts have somewhere fixed to display on your site. It does not require you to add anything by editing in this page. It effectively is just a placeholder on the Menu.

Contact Page. Here you can list your contact details. You can also add an e-mail contact form. This requires adding a plugin to handle email. No big deal we can do that later.

Home-Front Page. This currently just has sample text. We said before this is your sites main default page for people arriving on the site if you have set the site to Static front page. If that is the case it needs to be clear and clean and immediately tell people what to expect on your site. It should highlight where to find everything of interest and draw them to navigate to other pages of your site to see everything you have to offer.

Privacy Policy page You may have noticed this. Its relative to how you handle other people’s information. Think Facebook and the questions of third parties using people’s personal information without their knowledge and you understand the reason for including such a page on a website.

Sample Page is just a page already created for you to practice and play with but does not appear currently on the frontend menu so nobody can see it or read it at the moment. You may wish to create a page on your site called Hobbies or Travel or Photographs. Well you can open this page and just change the title and off you go.

 

Let’s create a page and add it to the frontend Menu.

Click Add New

The new page opens in an Editor much the same to writing a post. Everything we learned for writing a post hold true for writing a page.

So, give it a title – call it Demo-Page.
Add a Photo/Image using the Add Media button.
Drop in some sample Text (copy and paste this block below as plain text)

Gravida quis blandit turpis cursus in hac habitasse platea. Elit ut aliquam purus sit. Quam adipiscing vitae proin sagittis nisl. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Magnis dis parturient montes nascetur ridiculus mus. Quis lectus nulla at volutpat diam ut venenatis tellus in. Iaculis nunc sed augue lacus. Sodales ut etiam sit amet nisl purus. Donec ac odio tempor orci dapibus ultrices in iaculis. Blandit cursus risus at ultrices mi tempus imperdiet. Proin libero nunc consequat interdum varius sit amet. Maecenas sed enim ut sem viverra aliquet eget. Habitasse platea dictumst quisque sagittis. Vitae tempus quam pellentesque nec nam aliquam sem. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Egestas congue quisque egestas diam. Facilisi nullam vehicula ipsum a. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Eu facilisis “

Now click publish.

If you click View Page WordPress will show you the page. One small problem is nobody else can see it because if you look in the top menu there is no link to it. WordPress has taken us directly to the page using the internal link. Not by the site navigation menu everybody else has to use

We can fix that. Go to your site backend. (Click on your site title in the black Admin bar top-left same as before)

Go down to Appearance – a drop down menus appears – select Menus.

So here, we want to be in the Default “Edit Menus” tab.
We want select a Menu to edit (Highlighted in yellow) Make sure “Top Menu (primary menu) is selected. If not, click the down arrow to find and select it. Then confirm by clicking select.

Locate the Menu Structure box. Here you see the current pages that appear in our site top Menu. We want to add our new page “Demo-Site” to this menu so we can see it on the frontend.

In the box to the Left marked pages we see most recent tab displayed and our Demo-Site page at the top. I have clicked on the radio button next to it and it now has a check mark. Do the same by clicking the box. Then under the pages box click “Add to Menu”

The Demo-site page now appears in the Menu structure box under the existing pages. You can drag any of these up or down in order as required,

Click save Menu, then return to your site’s frontend.

You now see the page “Demo-Site” appears in the Menu. Click it and you will be taken to that page of your website.

You have learned a lot to this point. You are now equipped with a basic understanding of how WordPress works and goes together. You have seen things change through actions you personally took. At this point you will be a lot more intuitive achieving change within your site. You don’t have to sit for hours studying every book on the subject. WordPress has such a huge number of contributors that simple searches in google find pages of hits on the thing you are searching for. If one article seems a bit technical, choose another. There are plenty of quick tutorials to help you do anything you want.

When we started, I chose the Twenty Sixteen theme because of its clean simple layout. Yes, it is a bit dated in appearance. But it was an easy place to start.

If you would like to see how your site looks with a different more recent Theme, change the Theme to Twenty-Seventeen

Twenty-Seventeen Theme

Go to the front end. Now on the top bar you can see a tab called Customizer as before. Click it.

We know we can change quite a few things here including the Theme.

Click change beside Twenty-Sixteen active theme.

It takes you to the Appearance-Themes page in the backend. Twenty Seventeen Theme is one of the available Themes packaged in the WordPress install. Click the live preview button. It loads and takes you back to the front page with customizer open and Twenty-Seventeen in preview mode. Select Publish.

Now the first thing you notice is our Header image has been replaced by the Twenty-Seventeen sample image. It is big and full width of the page. Much more modern in appearance. Remember that when we change themes, we are changing overall appearance. The customizer menu options have changed a little, but we still have control over most areas with similar tab names. One thing that has not changed is our content. Our Pages, Posts and Menu remain intact.

Now Twenty Seventeen is a bit different from Twenty-Sixteen. It is capable of being a one-page website. By that I mean that scrolling down shows your pages in one continuous line one after the other. It's design was created with mobile devices especially in mind. It looks great and works well for some types of websites. But it can be changed easily to the similar multi-page navigation found in Twenty-Sixteen type themes. It still has a more modern appearance and lots to offer even in this format.

Leave it as it is or follow me, and we will make the change.

First using the Customizer on the frontend under page layout make the page “One Column”
Next for each of the Front-Page Sections 1-4 use the relevant Down Arrow to expand the selection and remove the page name for each by clicking on “Select” instead of any of the listed pages. Do you get it? We are removing the selected pages front each Section on the front page. Don’t worry that we unselected Home, that is now being controlled by the Static Frontpage setting in the Homepage Settings tab of the customizer.

Remember to Publish your changes using the blue Button at the top of the customizer.

Now take a look at your site. The front page is now more conventional. The layout is nice, clean and modern.

Our Top menu is now under the Header Image. It is also a Sticky Menu as it scrolls to top of screen and always stays visible even as the rest of the page content continues off screen. The Home page of Twenty Seventeen theme does not use a sidebar with widgets like Twenty-Sixteen.   The Sidebar is shown on other screens like the Blog page. If it is important to you, there are ways to make it display on the front page with a little work. I will show you how in a later tutorial. Alternately choose one of the thousands of other free themes from the directory. It is easy enough to try others and revert if you don’t like them. All your content remains safe unless you physically go in and edit it.

Let’s change the Header Image.

Select “Header Media” in the customizer Menu. This theme allows you to add a video in the header as well as a static Image. Lets just do the Image for now same as we did in Twenty-Sixteen. Select “Add new Image” select the same image now in your Media Library. Same as before it suggests a crop, click accept and the image appears in your header.

It looks big and beautiful, filling the full header area unlike the smaller way it displayed in Twenty Sixteen.

Now would be a good time for you to spend some time getting comfortable with using the tools you have learned so far. Make some more relevant content for your site in posts and pages. Explore what you can do in the Editor and how you can change the appearance of how things display. Keep a notepad handy and write down questions you have for later research. Many of those question may be answered by checking my other tutorials. Just scroll down the list of entries and look for titles that seem relevant.

In the following tutorials I will show you more ways to add to and refine your site. Also, some guidelines to keep in mind that will keep you site loading quickly and giving the optimal visitor experience. Working on your site can become addictive so try to keep a clear perspective for the purpose of your site.

Subscribe to my site (if you have not done so already) so I can send you the follow-up Tutorials in this series. You can also e-mail any questions, and I will endeavor to point you in the right direction, whether it be information on this site or good trouble-shooting resources elsewhere on the web.

In the following tutorials we Address: -

• Adding an Email Contact form and setting up the mail system (not so scary as it sounds because plugins make it happen).
• Photos/Images: - Can be large file sizes and eat into our available disc-space on our hosting account server. Best practice to overcome this.
• Child-Themes: - What are they and how do they help me achieve that perfect look?
• Gutenberg, page builders and block editors: - What works best for my site.
• Security
• WordPress and Plugin updates: - Do I need to do anything?
• Social Media and my Website.
• Can I have a Shop or sell things on my Website and how to achieve this.