WordPress Website, How to Make a New One

Creating a brand new website

WordPress website

In a nutshell, this post will tell you how to make a brand new WordPress website. In this example it will have:

* A home page
* A contact us page with a Google Map
* Local optimization to put you on Google’s page 1
* Two business email addresses that link to your regular address.  E.g., Sales@myamazingwebsite.com & Info@myamazingwebsite.com
* An About Us page.

What if you start reading this over and you don’t want to do it yourself? Well, go to Kelowna Virtual Assistant and find out how we can do it for you.

How to set up the entire WordPress website in 11 steps

1. Web host

Since I started creating websites in 1996, I’ve used many different web hosts. My very favourite one has been LiquidNet Ltd Hosting. They have amazing tech support and have been able to help me with practically any problem I’ve had. Besides that, they make it easy to set up a WordPress website.

You probably need no more than the starter package. It is only $35 (USD) per year.

2. Domain name

Choose domain name that helps brand your business. For instance, IBM has ibm.com, Kelowna Virtual Assistant has kelownavirtualassistant.com and CNN has cnn.com.

This post will help you decide upon the ideal domain name for your business.

3. Buy & register your domain

My very favourite place for buying & registering domain names is WhoIs.com. Go there as soon as you have decided upon your domain name. Click on Login to create an account.

You will have to change the DNS settings to supremedns1 & supermedns2. Go here now to find out how to do that.

4. Set up WordPress

Before setting up WordPress, go to My Domains > Hosted Domains. Click the white on black Host Domain button. Add your new domain name to the Domain box. Click Add a Host.

Go to this blog post to see how to add WordPress to a LiquidNet Ltd Hosting website.

5. Home Page

WordPress websiteIf you followed the instructions in the previous paragraph, you should have a home page. To edit it, click on edit from ANY page in your new website. On the left-hand side, you will see a black column called the Dashboard. Click on Pages > All Pages.

WordPress websiteIf you scan through the pages, you will see one called Home. Click the Edit link to make changes.

It is important that the Home page be attractive and informative. That is often where visitors go to find more information about your business.

6. WordPress plugins

WordPress plugins are bits of software that can be uploaded to make WordPress more powerful. After you have finished your initial WordPress website, you really should click on that link and then learn about the most important plugins. Make sure you have them.

7. Contact Us form

WordPress websiteOf all the WordPress Contact Us forms I’ve ever used, Caldera Forms is my favourite plugin. Using the instructions from the above paragraph, go to the Plugins link in your dashboard and install & activate Caldera Forms.

Then go to Pages > Add New and add a new page called Contact Us. Using these instructions, add a Contact Us form to that new page.

8. Google Map

WordPress websiteGo to this Google Maps page and add a Google map to your Contact Us page. Make sure there is a pin at the address of your business.


9. Google p.1 with Local Listing

Local Listing means that you can often get on Google p.1 if you have a Google Map and set up Google My Business properly. Learn more on the Google My Business blog post.

10. Specialized email addresses

You may want to have specialized email address similar to info@myamazingbusiness.com. Say you want to have it forward to your personal email address. Your business card can have info@myamazingbusiness.com. You do not have to have your personal email address on your business card. This is how to do it:WordPress website

  1. Log into your LiquidNet Ltd Hosting account
  2. Click on Email tab > Mailboxes
  3. Over to the right click on Create a New Email Account
  4. Use the dropdown box to scroll down to your domain nameWordPress website
  5. Add info, sales, your name or anything you want
  6. Fill in the forwarding information. Add your personal email address or whatever address you want the email forwarded to.

11. About Us page

To add your About Us page, click on New just to the left of View Page. For New you have 5 choices. Select Page.

The rest should be intuitive. Make sure you give a little bit about your history and what you might do to give a benefit to the visitor. Include pictures that promote your business.

Too time consuming?

After going through this blog post, you may decided that you are not prepared to spend the time learning all of this. That’s reasonable. Simply go to Kelowna Virtual Assistant and find out how we can create your WordPress website for you.


Larger Font for My WordPress Website

The problem: small font

The font in my new WordPress website was too small. This post tells how I changed that to a larger font.

I use the Twenty Sixteen theme. If you have a different theme, these instructions might not work for you. But then again, they may work. Try them out.  After all, the Features screenshot below says that the font changes stay with your website even after you change themes.

Three systems, one should work

I’ve used three different systems for increasing the font size throughout the WordPress website:

  1. I just used the first (web host) system & it worked perfectly.
  2. I couldn’t figure out how I had done the second system in the past.
  3. The third system broke down after a while. But, I’ll give you all 3 systems anyway.

System #1

Using styles.css to increase font size

  1. Go to list of your domain names in your web host’s website. I use LiquidNet Ltd Hosting. To see the list, I clicked on the Files tab in the horizontal menu. You also need to know that my WordPress theme is Integral Pro.
  2. The domain name I was using was growinglove.club. So, I double-clicked thusly: growinglove.club > wp-content > themes > integral-pro-child. Right-click on style.css and select “edit with plain text editor”.

Because this was a new child theme, all I saw was the head of the style.css file you see by point #1 above.

Then I

  • Added the body code you see by point #2
  • Clicked the Save icon. (See blue icon with pink box around it above)
  • Cleared the cache

Now the regular page font & font beside bullet points are the same size. Note that you may have to tweak that 116% up or down a bit to make it exactly the same size.

System #2

1. Appearance > Editor

Caution: Do this in your child theme, not your parent theme.

Click on Appearance > Editor. That should immediately give you your theme name followed by style.css. If that does not show up, go to the bottom of the right-hand column. Click on style.css.

2. Add font code to body code

Scroll down until you see the body code. Add font-size: 120%; or whatever percentage by which you wish to increase the font size.

3. Click Update File

Click blue Update File button. Refresh a page to see if your font indeed is larger.

4. Heading & bulleted point sizes

The above 3 points will make the regular body font larger. However, it will not take care of your heading & bulletedpoint sizes. This is how to increase the size of your H2 & H3 headings and your bulleted lists:

In your dashboard go to Appearance > Customize > Additional CSS. Add the snippets below.

.entry-content h3 {

   font-size: 20px;


.entry-content h2 {

   font-size: 30px;


.entry-content li {
font-size: 16px;
list-style-type: disc;
line-height: 1.6;

You may want to move the font size up or down a few pixels. Experiment.

Then click the Save button and click the black X to close the Appearance window.

Bulleted lists

Note that this solution does not take care of the small bulleted list problem. To increase the size of the sub-bulleted points, add a font-size snippet like you see in this screenshot.

If you figure out how to solve the small main bullet point problem, please respond in the comments window.

System #3

Using a CSS plugin

1. Install Custom CSS and JS WordPress plugin

larger font

In the black dashboard go to Plugins > Add New. Search for Custom CSS and JS. Install and activate it.

Read the special features of this plugin in the screenshot.

2. Go to Appearance > Custom CSS

After you have installed the plugin, it may or may not appear under Appearance > Custom CSS. It could be one of the main titles in the black column. Wherever it is, click on Custom CSS.

If Custom CSS is not under Appearance, it will be in the main black column under the name Custom CSS & JS.


4. Click on Add Custom CSS

larger font

larger fontClick on Custom CSS & JS > Add Custom CSS. The screenshot on the right points out the code that should be replaced. (Thank you, plugin authors, for making the instructions so easy to follow.)

5. Add code & publish

Replace the code referenced in point number 4 above with


You may want to change the 16 with a different font size.

YouTube video

The YouTube video below may shed more light on adding the CSS code that gives you a larger font.


Related page

W3Schools CSS font discussion

Caldera Forms — Free WordPress Plugin Review

Caldera forms are free and they are full of features:

  • Multiple columns
  • Multiple pages
  • Conditional Logic
  • Anti-spam
  • Registration & login
  • Dynamic — fields can change based on users’ answers
  • Product purchase forms
  • Support ticket forms
  • Lead capture forms
  • Newsletter sign-up forms
  • Various types of calculators
  • Feedback survey forms


After installing and activating Caldera forms, they will show up on your WordPress dashboard.

  1. Click on new Caldera Forms link > Forms in black column
  2. Click New Form at top of page
  3. Click on one of the 7 templates for different types of form
  4. Name it
  5. Click Create Form
  6. Here is a key to what you get:
      1. Delete row
      2. Break row into columns
      3. Drag & drop row to different location
      4. New row in this table

  7. New table (It could be one single-column row.)
  • When you click on the New Table plus sign, you will get a white box. Drag New Field blue button into it.
  • Save and then click on Form Settings tab. You will see a shortcode that looks like the image below. Paste that shortcode where you want the form tobe. (Note that you do NOT have to place the shortcode within the source code. It can be anywhere you want in Visual view.)


Here are two problems you may have had after testing the form out:

1. I do not get the email

Click on the green Email tab. Make sure your email address is listed under Email Recipients. If that does not work, you might want to change your email type is set at Text.

It took me a while before I was able to file in a form and have it email to my address.

After a web search, I found out that this was a common problem for ANY form plugin. There can be multiple reasons for this.

In my case, I had not filled out the From Email box in correctly. (See image above.)

2. Visitor information is not in email

When you entered the names of the fields, each name was given a slug. Under Email Message, each slug must be entered surrounded by percentage signs.  (See illustration above.)

3. If you are still having email issues,

go to this Caldera Forms page.

Related page

Caldera Forms installation instructions

Page Builder WordPress Plugin, Visual Composer

What is Visual Composer?

Visual Composer is a WordPress page builder plugin. You can build any layout you can imagine with the intuitive drag and drop builder. No programming knowledge is required.

Visual Composer is not theme specific. This means you can use it with any WordPress theme without needing to make any adjustments to the existing code.

Visual Composer Index

Animated GIFs
Button presets
Buying & installing
Create a button
Getting started
Headers add-on
Help on Facebook!
Linking from an image
Media Grid
Reducing image size
Tutorials, video


Do NOT expect to learn Visual Composer in the first few hours. It is best to make a page (NOT post) called Temporary. Then practice until you know the basics.

Getting started with Visual Composer page builder

After Visual Composer has been activated, you will see Backend & Frontend editor buttons on the page.  To add rows &page builder columns:

  • Click Frontend Editor button
  • Click Content Elements icon


page builderImagine this: In the Visual Composer editor mode you
page builder

    • Click on your Add Element button
    • Click on Row
    • Hover over new row
    • page builderClick on dropdown arrow to expand blue box
    • Click on columns icon
    • Higher up on the page you’ll see a Row Layout box

    • Click on the layout of columns you prefer
    • >page builderEvery plus sign you see in a row represents a column
    • Click a plus sign


  • In the resultant Elements panel, click Single Image
  • In the Single Image Settings box, make sure you have an appropriatepage builder image size
  • Click on the image box to find a picture
  • If you don’t have an appropriate picture in the library, click on Upload Files
  • Drag & drop the image from your Finder
  • Scroll down to find more features
  • For example, people can click on a picture to
    • Open a larger picture
    • Go to another web page
  • Make sure you experiment to see what these various features can do
  • Click Save Changes

A possible error

If you are frustrated: Note that sometimes the changes will not show up until after you updated a page.

If you are still frustrated: Sometimes it is best to delete the old Visual Composer page and create a new one. It can be easier than trying to find the errors in the coding.

Before you delete the old one, take a screenshot (Cmd/shift/3) of the page & copy all of the links into (preferably) a Textedit page. Also, jot  down the URL and the title of the delinquent page somewhere.

After you know what you want, delete the delinquent page and create the new one.

What I did when I was super frustrated: I had been making a row and then using the Single Picture element. The picture would never show up. So, instead of using Single Picture I used Image Gallery Settings to add a single picture. Everything works perfectly now.

Another possible error

You may get this error message: The uploaded file exceeds the upload_max_filesize directive in php.ini.
That would be because your server has a set limit on the maximum size of the file than can be uploaded at one time. You can get in touch with the hosting provider and get this increased to around 5MB – 6MB, so that you can upload the zip and there is no such issue.

Also please make sure that you unzip the codecanyon – 242431…zip file and then only upload the inner js_composer.zip.

Page builder tutorials

Go to the WPBakery website. You will find lots of very short videos such as the one below. They explain different features of Visual Composer.

Buying & installing Visual Composer

For most plugins, you simply go into your WordPress dashboard & buy it. You cannot do that with the Visual Composer page builder plugin.

You go to Code Canyon & buy it. Also, you need a new license for each website on which you use it. The Code Canyon code cannot be read like regular HTML code.

Buying & installing:

    1. Go to codecanyon.net & buy a license for Visual Composer
    2. Download
    3. Copy the license number from the email into a safe place
    4. Go to your Downloads folder & double-click on the zip file you just downloaded
    5. This will create js_composer.zip
    6. Drag & drop js_composer.zip onto your desktop
    7. Go into the dashboard of the site in which you wish to install Visual Composer

page builder

  • Click Plugins > Add New
  • Click Upload Plugin
  • page builderBrowse “js_composer.zip” and open it
  • Click Install Now & Activate.
  • Visual Composer is now on your dashboard

Use the same system above for adding any addon to your WordPress website.

Media Grid addon

page builder

With the Media Grid element you can have columns & rows of SQUARE pictures. Experiment and you can add all sorts of different effects to them. By clicking on a square picture, visitors can see expanded view of picture in original shape.

Linking from a grid of pictures

I wanted to replace the picture in the upper right-hand grid with the June Sale picture below. Then I wanted to link it to the sale page.

First of all, you cannot link from an image in a Media Grid element.So, I added images to one row at a time using the Image Gallery element. I saved the page.

Then I edited the page with the regular editor rather than the Visual Composer editor.  I highlighted the HTML code for the third image. Then I used the linking icon to link the selected text to the June Sale page.

Note: Every time you edit the page with Visual Composer, the linking code is erased. So, you have to add it again.

Getting started with Media Grid

  • Click on Add Element > Media Gridpage builder
  • page builderClick grey Images icon
  • Select photo
  • Click Add Images
  • Keep up cycle until you have all the images you want
  • Give grid unique Element ID such as id=”myIcons”
  • page builderEXPERIMENT by filling in rest of grid settings including Item Design effects
  • Click Save Changes
  • Click Update to save page
  • page builderTo edit a grid, click on “Edit with Visual Composer” at top of page
  • Hover over grid and you will see green editing box

Grid Builder video

Other addons

Button presets

Create a button

page builderTo make a button, go to Add Element and click on the Button icon.  Experiment with the various button settings including design options.

page builder

If you wish, Button Settings can animate them to have different effects such as Zoom In and Slide in Right.

So, right now, go to Add Element > Button. Then fill in the Button Settings. Make a few buttons with different effects. Just experiment.

page builderAny time in the future you can go to the button and click on “Edit with Visual Composer”. Then you can do such things as add a hyperlink to another page.

Create a preset

page builderOccasionally you may want to create a preset button. That is a button that will be placed in a library to use again. When you reuse it, you can even make some minor changes to it if you wish.

Here are the points from the animated GIF in point form:

  • Click on plus sign where you want preset button
  • Click on button element
  • EXPERIMENT with button settings. (Here we used purple with a FadeInDownBig CSS Animation)
  • Hover right of button & click on green edit icon
  • In Button Settings, click on “Save a preset”
  • If you wish, you can save your preset with a special name
  • It will be stored in the preset library


Headers add-on

I bought the Headers add-on. This is what tech support sent me after I told them I could not set up Headers. Because I had paid for a license, I was able to log into my website and

  • Click on New > Page
  • Add a title and a word in the body
  • Save it
  • Clicked on Backend Editor > Plus sign > Headers
  • page builderGave me a list of all header templates I received with the add-on.

Animated GIFs

Here’s the process for embedding an animated GIF into a Visual Composer row: Add element > single image > add image > design options > theme default set to Repeat.


Reducing image size

 I used Visual Composer to show a PNG file on the left and an animated GIF on the right-hand side of a row. At first the images were far too large.
To reduce their size I used GIMP to reduce the dimensions of the PNG file. I used ScreenFlow to change the animated GIF from 500×500 to 300×300. In both cases I kept the same file name but added “smaller” to the end of it.

Help on Facebook!

If you are struggling, you can actually go to the Visual Composer Facebook page and message them a question.

Website Setup Starting from the Beginning

Getting started with WordPress

So you want to have a website with a WordPress blog. This post explains your website setup from the very beginning to a working (very simple) website. Other posts in this blog will explain setting up

  • Your home page
  • Horizontal menus
  • WordPressBlog
  • Etc.

Website setup in 3 steps

Note that you have to set up everything in the exact order you see here.

1. Get a domain name

You want to start by registering a domain name that matches your business name. The domain registration blog post explains how to do that.

Part of the process of registering you domain name is linking it to your web host. This is called changing the DNS (domain name servers) information. The DNS blog post will show you how to do that.

2. Host your domain name

Since I started creating websites in 1996, I’ve used many different web hosts. In terms of price, tech support and other features LiquidNet Ltd Hosting is by far my favourite host.

The instructions in this post assume you are using LiquidNet. If you are using a different host, you will have to adjust these instructions accordingly.

Log into your LiquidNet Hosting Control Panel. Go to My Domains > Hosted Domains. If you cannot figure out how to add your new domain, open up a new ticket with tech support and ask them.

3. Add WordPress to your website

website setup

If you are using LiquidNet, go to Installer > Applications Installer and click on the Install icon in the WordPress line.

You will see a new panel called Install Application. Make sure every line is filled in properly:

  • For the In Directory line, leave only the slash.
  • Select and delete the word “wordpress”.
  • website setupSelect “weblog title” and change it to a name that describes your business.
  • Keep the radio button on Automatic Database Creation
  • You will see a number of templates. Use the forward and back arrows to help you choose one you like. (I Installed the Twenty Sixteen WordPress Theme.)
  • Click the Install WordPress button.
  • Click the Visit Admin Area button
  • You can start creating your posts & pages
  • You will get an email giving your login URL, username & password. Record them in a safe place — cryptically if possible. (The default username is Admin. Do NOT use that. You want to make it difficult for hackers!)

Notes on Posts & Pages

When you click New in the top of a WordPress Post or Page, you will get a choice of Post or Page. A Post will be part of your blog. When you scroll down to the bottom of a Post on the Internet, you will see a Previous and a (usually) Next button. They will link to the corresponding blog posts.

Any other page you create will be a WordPress Page. E.g., Home, About Us and menus for the various blog categories will all be Pages.

Website setup finished

As long as you performed all of the above steps in the exact order, your website setup should be finished. You should be all set to start creating WordPress pages & blog posts.

If you still have problems, use the search box or else the Blog menu to find the answers.


Appointment Calendar Plugin Review

Simplify your customers’ lives

appointment calendarThis is a review of the WordPress Appointment Calendar. So, what can you do with this plugin? You can take appointments on any WordPress site.

You can help your potential customers

  • Schedule online & see availabilities in real time
  • Schedule quickly without hassle.

You may be a

  • Doctor
  • Lawyer
  • Pet groomer
  • Massage therapist
  • Or whatever

Appointment Calendar for WordPress can make the life of your clients easier.

Managed from within WordPress

Appointment Calendar is a simple yet powerful plugin for accepting appointments on your WordPress site. No need to use third party appointment booking services. Everything can be managed from inside the WordPress admin panel.

How to create your first Appointment Calendar

appointment calendar

  1. From WordPress dashboard, click Plugins > Add New.
  2. Type the name of the plugin into search box and click Install Now.
  3. appointment calendarThen click the Activate button. “Appointment Calendar” immediately shows up in black column.
  4. Click Settings > Calendar Settingsappointment calendar
  5. This will get you to the Manage Calendar Settings panel that you see above. Notice the Booking Button Text box. That shows you the blue button that you will see in the box in #7 below. Then notice the Booking Instructions box. The image in #6 below is the HTML code that you see in the box below. It results in the text above the blue button in #7. Note that it is not necessary to use any HTML tags if you do not want to.
  6. appointment calendar
  7. appointment calendar
  8. appointment calendarTo add the form to a page, use the short code “APCAL” or else “APCAL_MOBILE” inside square brackets. Add the shortcode anywhere on a page or post in Visual view. Your Appointment Calendar will appear at the top of the page. So, it is usually best to have nothing but the Appointment Calendar on a page.
  9. To see an example of the Appointment Calendar live, go to this demo page.

Mobile version is different

Note that when you use the mobile version, no calendar shows up. In order to see the calendar, you must tap the blue button.

Many more features in the pro version:


  • Create and Manage Unlimited Services
  • Create Service, Setup Service Price, Duration Availability
  • Link Service to Staff
  • Manage a Staff Database



  • Manage a Client Database
  • Search Clients by Name
  • Client Appointment History
  • New Appointment automatically create client in the Database




  • Setup Business Hours to suit your business
  • Mark Complete days as Off
  • Combine business hours and Time off to create complex working hours



  • Sync Appointments with Google calendar
  • New appointments automatically pushed to Google calendar
  • Admin can view all appointments on his Google Calendar


  • Get new appointment notification
  • Client gets notified on appointment changes
  • Customize Notification Message





  • Calendar Settings: Customize Calendar View, Time Slots , Start day etc
  • Setup Different Currency
  • Misc Settings Page





  • Accept Payment on Booking
  • Accept Full or Partial Payment on Booking.



video marketingPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of a free YouTube tutorial. It’s called 7 Day YouTube and will teach you how to make entertaining videos & animated GIFs.

video marketing tweets

Adobe Stock Images Review

Introducing Adobe Stock images

Adobe StockI have been using Adobe Stock images for several years. I highly recommend them IF you can reasonably use 10 images per month.

They have tens of millions of images from which to choose. All you have to do is type in the correct keywords and you will find an image you like.

Caveat before you sign up

I found that I was not using enough images. So, I started the process of cancelling my subscription. I got the above cancellation fee message.

They gave me to take the next 60 days at no charge if I would not cancel. So, that’s the option I took.

Why use Adobe Stock images?

Adobe Stock

There are several reasons why you might want to use Adobe Stock images:

  • When visitors find your page, you must grab their attention within seconds. Otherwise they may go to another page and never go to your website again.
  • People are more likely to start reading short lines. If your amazing image covers half of your first paragraph, visitors will read your short lines. Now thatAdobe Stock you have their attention, they are more likely to read the rest of the article.
  • People usually do not read a web page; they will skim it. When you have attractive, pertinent images, it is easier to grasp the concepts while skimming.
  • Video marketing is becoming more popular and more important with every passing month. Having attractive,Adobe Stock pertinent images in your videos & animated GIFs makes people more likely to pay attention to them.
  • They are only $3 (USD) each. You pay $30/month for 10 photos. What you do not use will be accumulated into the next month.


How to find an image

Adobe StockLet’s say you are writing an article about a sales funnel. You want to grab the visitors’ attention from the very beginning. You also want the first lines to be short so that people would read them. Then you would draw them in so that they would read the rest of the article.

You remember seeing a picture like the one to the left. So, you would log into Adobe Stock and search for “sales funnel people”.

You would end up with over a hundred pictures from which to choose. You begin the process of Adobe Stockcollecting around 10 or 20 possible pictures you might use.

So, you hover over the bottom of each picture that is a candidate. Click on the Save Preview to Computer icon. All of these watermarked images will be saved in your Downloads folder.

After you have sufficient watermarked sales funnels, you go into your Downloads folder and choose the best image. You write down its unique number. Then enter it into the Adobe Stock search engine.

Your favourite image will show up. You hover over the bottom and select the License & Save to Computer image. You go back into your Downloads folder. Give your new image without the watermark a descriptive name.

Thus Adobe Stock has helped you make a more attractive blog post.

Adobe Stock is not for everyone

Adobe StockFor people who use significantly fewer than 10 images a month, there are better alternatives such as Dreamstime. Instead of paying for 10 images up front, you buy points. Each image costs so many points. Left-over points can be used to pay for part of another image.

Dreamstime also has a number of free images. (They have over 58 million images altogether.) The free ones are often lower quality. However, I have used them in attractive animated GIFs more than once. To access their website, go to bit.ly/nocostimages.

If you go there now, you will see a Free Images tab at the top. Click on it and then enter keywords into the search box. Your free images will show up first. The higher quality images will show up next. You have to pay for images from that group.

Adobe StockI’d like to point out the Stock Footage tab. That’s where you can get super high quality video clips to use as introductions to your YouTube videos. The animated GIF you see here represents how I introduce most videos on my Web Design YouTube channel.



video marketingPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of a free YouTube tutorial. It’s called 7 Day YouTube and will teach you how to make entertaining videos & animated GIFs.

video marketing tweets

Twenty Seventeen WordPress Theme Review

Upgrading a current website to Twenty Seventeen

You may feel like you want to keep your website current with the latest styles. This post discusses upgrading your website from an older WordPress theme to Twenty Seventeen.

Twenty Seventeen is a highly specialized theme meant to have full-width beautiful pictures on EVERY page. It would be ideal for something like a restaurant in this example. However, websites for which a blog plays a major role probably should not use it.

What is the Twenty Seventeen theme?

WordPress themes in general provide all of the front end styling of a WordPress site. Below is some of the front end styling that comes with the Twenty Seventeen theme. A discussion of most of the front end styling can be found here.

  • The main column width is up to 525px wide with the two column layout, or up to 740px wide with the one column layout.
  • Using some CSS code, you can change the width of the main and sidebar columns. The maximum width of a sidebar is to 326px.
  • Each page & post should have a large Featured Image. The recommended Featured Image size is 2000px wide by 1200px high.
  • Video marketing is becoming more important as each month goes by. You can have a video playing in your header. The recommended Header Video and Header Image sizes are 2000px wide by 1200px high.
  • Twenty Seventeen supports both a Header Image and a Header Video.
    • Header video can be MP4 (not recommended as it takes up too much space) or YouTube URLClick to hide the header image, enter the Youtube URL of the video and press enter. The video will automatically play silently in the header area. There will be a Play/Pause toggle button in the upper right-hand corner.
  • Widgets: Twenty Seventeen includes a footer widget area, where you can add widgets below the site’s content.The blog index, archive, search, and single blog posts also include a sidebar widget area. For each, the content will display in one centred column until the sidebar widget is added. With the sidebar widget, the content will appear in one column, and the widgets in the other.
  • Twenty Seventeen includes a Social Icons Menu, where you can add links to your social media profiles that will be displayed as logos in the footer.

Customize link

Like the Twenty Sixteen theme, this one also has a customize link above the header image. It’s really useful for making quick changes.

You can even add CSS code without knowing anything about coding.

First step

Twenty Seventeen is meant to be used with WordPress 4.7 or better. Before you even think about downloading Twenty Seventeen, upgrade your WordPress version to 4.7.

Header height

You may want to reduce the height of the header.

The instructions did not work for me. Because this may have been because of a bug in the software, I am including the instructions in this post. By the time you read this, the bug may have been fixed.

1. Remove old header

Twenty Seventeen To reduce the header height, you must first remove the old header. On a page that has the Twenty Seventeen theme, go to the top and click Customize.

Then click on header media. Click on Hide Image.

2. Add new header

Twenty SeventeenThis is the narrow header I decided to insert.

I like to have the header image inserted as a URL. So, I inserted this image in Twenty Seventeenan unimportant place. In this case it was the bottom of the index file, right under “Zooming and Panning”. I edited the Index page, went into text view and searched for “zooming and panning”.

Below that, between the quotation marks after “href” is the head URL. Use Cmd C to copy it into your clipboard.

Twenty SeventeenClick on the Customize link again. Click on Additional CSS. Scroll to the bottom of it and add this CSS code:

#masthead { background-image: url(“<insert url of your image>”); background-size: 100%; }


In conclusion, I would like to say that Twenty Seventeen definitely is not for everyone. That includes people with a significant blog.

However, perhaps you have a website in which you’d like to have a full-width photo on every page. The Twenty Seventeen is most likely the best way to go. You will be enhancing the user experience.

Related pages

How to Customize this Free WordPress Theme

WordPress Custom Header Image banners



VAPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

Website Ad, Animated

Why animation?

website adLook at the website ad to the right. You are much more likely to notice it compared to a static image.

The Three Motion website gives you 5 reasons why animation in your advertising will help you:

  1. Grab attention
  2. Keep audiences engaged
  3. Communicate quickly and concisely
  4. Gain understanding
  5. Make a lasting impression.

Read more and watch their videos.

Inexpensive animated website ad production

website ad animated GIFsIf you are on a tight budget, it does not take a great deal of money to produce engaging animated GIFs. Go to this “how to create animated GIFs” web page. You will see how to make animated GIFs such as this one.

What it mainly takes is lots of practice.


Make sure you include a CTA (call to action). The CTA in the first website ad you see here is the “Click here” text.

How to insert your ad

Go to the WordPress Ad post. It will show you how to use a WordPress plugin called Ad Inserter. Just remember to change the image in the temporary page.

You will have made an animated GIF with a CTA included. Insert that instead of the still image. WordPress allows you to add an animated GIF using the Add Media button. The methodology is the same as with a static image.

Don’t overdue it

Too much of a good thing is bad. When you first open this page, there are three animated GIFs.

Using one animated GIF in a website ad is fine. But, three at once may be a bit much.

It works here because I am teaching about animated website advertising. However, ordinarily, I would not do that.

Related Pages



VAPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

WordPress Ad in Right-Hand Column

Review of Ad Inserter

WordPress adIn this post you will learn how to easily create a WordPress ad and insert it in the right-hand column post or page. To do that you will use a free WordPress plugin called Ad Inserter.

You can consider this post to be a review of Ad Inserter. It shows how simple this plugin is to use.

On the WordPress site there are 164 reviews for Ad Inserter. 158 of them are 5-star reviews.

Creating your WordPress ad

For this exercise you will first create a simple ad.

♦ Open a new WordPress page and name it something like Temporary Page.

WordPress ad♦ Every WordPress ad should have a picture with a “wow” effect. So, go to a high-quality photo site such as Adobe Stock.  Use their search engine to find the ideal photo for your ad. Buy it.

Insert the picture into your Temporary Page. Click on the picture. Drag the upper right-hand corner until the width is exactly 200 pixels wide.



WordPress ad


♦ On your Temporary Page, write the text of your WordPress ad beneath the picture. The part of the text that will by hyperlinked should be bold.




WordPress ad

♦ Press Enter a few times to add some space between the picture and the text. You will need this later.




♦ WordPress adYour ad will link to another page. Cmd C to copy the URL of that page into your clipboard.


WordPress ad

♦ Select the picture and also that portion of the text that is to be linked. Click the link icon at the top of the page. Cmd V to paste the URL. Make sure you check the box in front of “Open link in new tab”.



WordPress adOn your Temporary Page, click the Text file to see the source code. Notice the closing link tag (<a/>). It MAY be in the wrong place.

Cmd X to delete it and Cmd V to paste it at the end of the text that is to be linked. Cmd C to copy the entire code snippet of this ad into your clipboard.

Formatting ad with Ad Inserter

(If you have inserted animated GIFs into the right-hand column before, this example might be all you need to refresh your memory.)

(If you don’t have Ad Inserter yet, go here to learn how to install it.)

WordPress adGo to the page to which you wish to have the ad. Click on Edit Post > Plugins > Installed Plugins.


WordPress ad


♦ Under Ad Inserter click Settings. Then select a block that has no code in it. In this example it is Block #4.


WordPress adCmd V to paste code into black Block 4 box. Sometimes the end linking tag (</a>) will end up being before the end of the linking text. In such a case, Cmd X to remove it and Cmd V to paste it at the end of the linking text.

♦ WordPress adAlign the ad left and check “only as selected” for both posts & pages. Click lists tab & make sure every Black List radio button is selected. Click manual and make sure Widget is checked. Click Save All Settings.

WordPress adUsing a new window, go to the page that is to have the display ad. Go to Edit view and scroll to the bottom. Make sure the appropriate Block has been enabled.

Click Appearance > Widgets. Drag the Ad Inserter widget into the right-hand column.



♦ Make sure appropriate Block has been select. (#4 in this example.) Save it.

Go to the page that should have the ad and check it out. It is likely that the formatting is not ideal. If so, go back to black box and change the code.  For instance, if the text is beside the picture as opposed to below it, copy & paste a few more of these codes: &nbsp; . Then click on Save All Settings.

Example from Kelowna Virtual Assistant

Go to the Kelowna Virtual Assistant About Us page.  Here are some screen shots about the insertion of that animated GIF ad.

Below is the Ad Inserter link to the animated GIF. The part within the quotation marks after “src=” was taken from the Temporary Page. Note that the dimensions were taken by holding the cursor over a sizing corner in the Temporary page.

Below the black rectangle you will find the settings below.

Click Appearance > Widgets to get this sidebar.




From the bottom of the About Us page in edit view.

Related Pages



VAPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.