WordPress Tutorial for Beginners

Do you want to build a professional business website with WordPress that is mobile-friendly and includes phone call and contact form tracking?

You’re going to see exactly how to do it using the pre-installed Twenty Seventeen theme and only 4 plugins!

Download Tutorial Resources

Here are screenshots of the completed website:

Be sure to bookmark this page if you want to make your WordPress website in chunks.

Let’s jump right in…

Setup Domain & Web Hosting

HostGator Website Hosting Banner

You can take care of both with HostGator!

Go to their website and click on “Web Hosting” from the navigation menu.

Then select the “Hatchling Plan” for the most affordable option.

On the checkout page, type in your preferred domain name to verify the availability.

Get your first month of hosting for $0.01 using coupon code 1WPHOSTING

Once you checkout, you’ll receive login information to setup your web hosting account.

WordPress QuickInstall

Login to your cPanel web hosting account, and select the “QuickInstall” option from the “Software and Services” menu.

This allows you to install WordPress in minutes.

Click on “WordPress” from the top menu within QuickInstall.

Then select “Install WordPress”.

You will then choose your WordPress installation path and login credentials.

For most websites, you’ll install WordPress directly on the root path, i.e. yourdomain.com

For this tutorial, I have WordPress installed on a subpath, i.e. mydomain.com/eleclick here to view the live website.

As WordPress installation runs, they are going to sell you on paid theme upgrades.

They have their place, but we’re going to exit this pop-up and build this website 100% free (excluding domain and hosting costs)!

Once the WordPress installation is complete, you’ll see your login information available from the top orange banner.

Select the “View Credentials” drop-down menu and save your username/password.

Delete Plugins

Your WordPress website is going to come with pre-installed plugins.

I recommend that you start by deleting all of them.

Too many can slow down your website, so we want to use only what is necessary.

Login to your WordPress account and go to the “Plugins > Installed Plugins” section.

Under the “Bulk Actions” drop-down menu, first deactivate all plugins. Once they are all deactivated, perform the bulk action to delete.

Create Child Theme

Before we customize the website, we’ll need to a create a child theme.

This is because our parent theme (Twenty Seventeen) may be updated on a regular basis.

A child theme ensures you don’t lose your custom styles when the parent theme is updated.

We can easily do this with a plugin.

Go to “Plugins > Add New”, and search for “Child Theme Configurator”.

Then, install and activate.

With the plugin activated, go to “Tools > Child Themes”.

Make certain that “Twenty Seventeen” is selected under Step 2, and click the “Analyze” button.

OPTIONAL: You can update the child theme information under Step 7

To generate the child theme files, click the “Create New Child Theme” button.

To customize our design, we’re going to copy 3 files from our parent theme to our new child theme.

Within the “Tools > Child Themes” section, select the “Files” tab.

Check the boxes for “page.php”, “front-page.php”, and “template-parts/header/site-branding.php” then click the “Copy Selected to Child Theme” button.

We are now ready to activate our child theme.

Go to “Appearance > Themes” and find “Twenty Seventeen Child” then click the “Activate” button.

If you want to read more, view the official WordPress documentation for child themes.

Time to customize our website layout!

WordPress Settings

By default, WordPress displays your blog posts on the home page.

For a business website, we want a dedicated page.

Go to “Pages > Add New”.

We need to create two new pages – “Home” and “Blog”.

Type “Home” into the title and click the “Publish” button. Repeat the same steps for the Blog page.

With these two pages, we can navigate to “Settings > Reading”, and switch our Front page displays setting from “Your latest posts” to “A static page”.

Then using the drop-down menu, choose Home for “Front page”, Blog for “Posts page”, and save changes.

To simplify our URL format, we need to go to “Settings > Permalinks”.

Select the “Post name” option and save changes.

Create Navigation Menu

Every professional website has a clear navigation menu.

We can set this up in WordPress by going to “Appearance > Menus”.

Type “Main Navigation” under the “Menu Name” and click the “Create Menu” button.

From the left sidebar, you can manually check which pages you’d like included, then click “Add to Menu”.

We can also select the checkboxes “Automatically add new top-level pages to the menu” and “Top Menu” then save.

Customize Theme

WordPress provides a section to customize your theme even further before we get into any code.

Navigate to “Appearance > Customize” and click “Site Identity”.

We want to deselect “Display Site Title and Tagline”, then upload our custom business logo.

The theme recommends a square logo, but ours is rectangular and it will ask you to crop the image.

Simply extend the crop area to fit the entire image.

Within the Customizer, navigate to “Header Media”.

Click the “Hide image” button and save.

Within the Customizer, navigate to “Theme Options” and change the page layout to “One Column”.

We’re also going to display additional content using the “Front Page Section 1 Content” option.

For this, we’ll use the existing “Sample Page” which you can select from the drop-down menu, then save.

Add Sidebar to Pages

By default, the sidebar is only placed on blog pages.

To change this, we can edit our two template files, page.php and front-page.php.

Go to “Appearance > Editor”, and on the right menu click “Single Page (page.php)”.

Copy and paste the single line of highlighted code, in between the ending DIV element for #primary and .wrap as shown below:

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
	
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();

Next, we can edit the homepage template.

From “Appearance > Editor”, click “Static Front Page (front-page.php)”.

For this file, we have to add a parent DIV element with the “wrap” class around the DIV element with the ID “primary”.

This provides style structure for us, so we need less CSS code.

The three lines of HTML code needed to do this are highlighted below:

<?php
/**
 * The front page template file
 *
 * If the user has selected a static page for their homepage, this is what will
 * appear.
 * Learn more: https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php // Show the selected frontpage content.
			if ( have_posts() ) :
				while ( have_posts() ) : the_post();
					get_template_part( 'template-parts/page/content', 'front-page' );
				endwhile;
			else : // I'm not sure it's possible to have no posts when this page is shown, but WTH.
				get_template_part( 'template-parts/post/content', 'none' );
			endif; ?>

			<?php
			// Get each of our panels and show the post data.
			if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.

				/**
				 * Filter number of front page sections in Twenty Seventeen.
				 *
				 * @since Twenty Seventeen 1.0
				 *
				 * @param int $num_sections Number of front page sections.
				 */
				$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
				global $twentyseventeencounter;

				// Create a setting and control for each of the sections available in the theme.
				for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
					$twentyseventeencounter = $i;
					twentyseventeen_front_page_section( null, $i );
				}

			endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>

		</main><!-- #main -->
	</div><!-- #primary -->

	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();

We also want to ensure the pages that contain the sidebar from our changes above are assigned the “has-sidebar” class within the HTML code.

Within “Appearance > Editor”, click “Theme Functions (functions.php)” and copy/paste the following code to the bottom of your file:

function twentyseventeen_body_classes_child( $classes ){
	if ( is_active_sidebar( 'sidebar-1' ) &&  is_page() ) {
		$classes[] = 'has-sidebar';
	}
	return $classes;
}
add_filter( 'body_class', 'twentyseventeen_body_classes_child' );

Homepage Layout

If you remember from our “Theme Options”, we’re using the “Sample” page as our method to include additional content for our business layout.

We are going to display testimonials, a 3-column widget area, and a clear call-to-action at the bottom of every page.

This code is already built into the template file front-page.php.

We need to relocate the snippet of code so it appears in our desired position, and copy this code to the other template file, page.php.

Return to “Appearance > Editor”, and click “Static Front Page (front-page.php)”.

Below is the unedited code you should find, with the featured content code highlighted.

<?php
/**
 * The front page template file
 *
 * If the user has selected a static page for their homepage, this is what will
 * appear.
 * Learn more: https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

		<?php // Show the selected frontpage content.
		if ( have_posts() ) :
			while ( have_posts() ) : the_post();
				get_template_part( 'template-parts/page/content', 'front-page' );
			endwhile;
		else : // I'm not sure it's possible to have no posts when this page is shown, but WTH.
			get_template_part( 'template-parts/post/content', 'none' );
		endif; ?>

		<?php
		// Get each of our panels and show the post data.
		if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.

			/**
			 * Filter number of front page sections in Twenty Seventeen.
			 *
			 * @since Twenty Seventeen 1.0
			 *
			 * @param int $num_sections Number of front page sections.
			 */
			$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
			global $twentyseventeencounter;

			// Create a setting and control for each of the sections available in the theme.
			for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
				$twentyseventeencounter = $i;
				twentyseventeen_front_page_section( null, $i );
			}

	endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>

	</main><!-- #main -->
</div><!-- #primary -->

<?php get_footer();

You must cut this entire piece of highlighted code and paste it within two nested div elements, immediately following the first DIV element with the “wrap” class.

Once again, we are going to use the “wrap” class to our advantage, plus add a child DIV element with the “addl-content” class. This allows you to target within CSS to customize the design, if necessary.

After you make these changes, front-page.php will be organized as shown below (new panel code highlighted):

<?php
/**
 * The front page template file
 *
 * If the user has selected a static page for their homepage, this is what will
 * appear.
 * Learn more: https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php // Show the selected frontpage content.
			if ( have_posts() ) :
				while ( have_posts() ) : the_post();
					get_template_part( 'template-parts/page/content', 'front-page' );
				endwhile;
			else : // I'm not sure it's possible to have no posts when this page is shown, but WTH.
				get_template_part( 'template-parts/post/content', 'none' );
			endif; ?>

		</main><!-- #main -->
	</div><!-- #primary -->
	
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<div class="wrap">
	<div class="addl-content">
		<?php
		// Get each of our panels and show the post data.
		if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.

			/**
			 * Filter number of front page sections in Twenty Seventeen.
			 *
			 * @since Twenty Seventeen 1.0
			 *
			 * @param int $num_sections Number of front page sections.
			 */
			$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
			global $twentyseventeencounter;

			// Create a setting and control for each of the sections available in the theme.
			for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
				$twentyseventeencounter = $i;
				twentyseventeen_front_page_section( null, $i );
			}

		endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
	</div><!-- .addl-content -->
</div><!-- .wrap -->

<?php get_footer();

Take the highlighted code above and copy/paste to page.php in between the first DIV element with “wrap” class and the footer code.

Below is the full page.php code with the new panel code highlighted:

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
	
	<?php get_sidebar(); ?>
	
</div><!-- .wrap -->

<div class="wrap">
	<div class="addl-content">
		<?php
		// Get each of our panels and show the post data.
		if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.

			/**
			 * Filter number of front page sections in Twenty Seventeen.
			 *
			 * @since Twenty Seventeen 1.0
			 *
			 * @param int $num_sections Number of front page sections.
			 */
			$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
			global $twentyseventeencounter;

			// Create a setting and control for each of the sections available in the theme.
			for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
				$twentyseventeencounter = $i;
				twentyseventeen_front_page_section( null, $i );
			}

		endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
	</div>
</div>

<?php get_footer();

Install Contact Form Plugin

The most popular contact form plugin on WordPress is Contact Form 7.

Navigate to “Plugins > Add New” and search for “Contact Form 7”, then install/activate.

CF7 comes installed with a pre-existing form, which we can use.

Navigate to “Contact > Contact Forms”, and click on “Contact form 1”.

Within the “Form” tab, you’ll see the following code:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

We’re going to remove the labels and add a “Free Estimate!” headline.

We want the contact form as simple as possible, and a subject line isn’t necessary. All we need are a name, phone number, e-mail, and message.

You can replace the form code with the new code below:

<h2>Free Estimate!</h2>
<p>Call <strong><span class="phone-number">(888) 111-2222</span></strong> or fill form!</p>
<p>[text* your-name placeholder "Your Name (required)"]</p>
<p>[email* your-email placeholder "Your Email (required)"]</p>
<p>[textarea your-message placeholder "How Can We Help?"]</p>
[submit "Send Now"]

Under the “Mail” tab, remove the subject line from the “Message Body” section.

Replace the Subject section with the code below to include the sender’s name within the e-mail subject:

Estimate Form from [your-name]

QUICK TIP: if you want to monitor the quality of your client’s leads (with their permission), you can add your e-mail address using BCC code to the “Additional Headers” section, as shown below:

Reply-To: [your-email]
Bcc: ray@websiteprofitcourse.com

The contact form can be added to your sidebar through the use of WordPress widgets.

From “Contact > Contact Forms” copy the shortcode for your form, which is between two square brackets.

Navigate to “Appearance > Widgets” and expand the “Blog Sidebar” widget area.

Delete any existing widgets, then drag-and-drop a new “Text” widget into the “Blog Sidebar” widget area.

You can paste your shortcode into either the visual or text tab, then save without adding a title.

Header Right Widget Area

We’re going to create a new widget area to put a call-to-action on the right side of our header on every page.

Go to “Appearance > Editor”, and on the right menu click “Theme Functions (functions.php)”.

Paste the following code to the bottom of functions.php and save.

function top_cta_init() {

	register_sidebar( array(
		'name'          => 'Top CTA Widget Area',
		'id'            => 'top-cta-widget',
		'before_widget' => '<div class="top-cta">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="cta-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'top_cta_init' );

You will find this widget area with WordPress admin, but it won’t yet appear on your website.

We need to do this through the template file that generates our header. However, this isn’t accessible through the WordPress editor.

You will need to use your preferred favorite code editor (Notepad++) and FTP program (FileZilla). Alternatively, you may be able to edit within cPanel.

Using FileZilla, on the web server side, navigate to “wp-content/themes/twentyseventeen-child/template-parts/header” and copy site-branding.php to your computer to edit.

Add the highlighted code, as shown below, then save/re-upload to your child theme to overwrite existing site-branding.php.

<?php
/**
 * Displays header site branding
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<div class="site-branding">
	<div class="wrap">

		<?php the_custom_logo(); ?>
		
		<?php
		if ( is_active_sidebar( 'top-cta-widget' ) ) {
			dynamic_sidebar( 'top-cta-widget' );
		}
		?>

		<div class="site-branding-text">
			<?php if ( is_front_page() ) : ?>
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<?php else : ?>
				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
			<?php endif; ?>

			<?php
			$description = get_bloginfo( 'description', 'display' );

			if ( $description || is_customize_preview() ) :
			?>
				<p class="site-description"><?php echo $description; ?></p>
			<?php endif; ?>
		</div><!-- .site-branding-text -->

		<?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && ! has_nav_menu( 'top' ) ) : ?>
		<a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
	<?php endif; ?>

	</div><!-- .wrap -->
</div><!-- .site-branding -->

Navigate to “Appearance > Widgets” and add a new “Text” widget to the “Top CTA Widget Area”.

Copy/paste the following code into the “Text” tab (not Visual), then save:

<div class="desc">Call Today for Free Estimate!</div>
<div class="phone-number">(888) 111-2222</div>

Update CSS Styles

We’ve made quite a bit of change so far! Let’s take these elements and ensure our design looks great.

Navigate to “Appearance > Editor” and copy/paste the following CSS code to the bottom of your child theme’s Stylesheet.

/* TITLES */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

/* HEADER & NAV */
.site-branding { padding: 1.5em 0;}
.custom-logo-link img { max-width: 500px; }
.top-cta { float: right; width: 300px; text-align: right; }
.top-cta .desc { font-size: 1.3em; }
.top-cta .phone-number { font-size: 2.3em; font-weight: bold; }
.navigation-top { background: #13293d; }
.navigation-top a { color: #fff; text-transform: uppercase; }
.navigation-top .current-menu-item > a,
.navigation-top .current_page_item > a,
.navigation-top a:hover { color: #aaa; }
/* mobile nav */
.menu-toggle { color: #fff; }

/* CONTENT AREA */
.page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 1em;
}
.twentyseventeen-front-page .site-content,
.site-content {
	padding-top: 3em;
}
.twentyseventeen-front-page .panel-content .wrap {
	padding: 0;
}
.addl-content header { display: none; }
.addl-content .wrap { padding-left: 0; padding-right: 0; }

/* SIDEBAR CONTACT FORM */
div .wpcf7 {  background: #ccc; padding: 10px 20px; border: solid 1px #bbb; }
.wpcf7 h2 { margin: 10px 0 0 0; padding: 0; text-transform: uppercase; font-weight: bold; }
.wpcf7 p {margin: 1em 0 0 0; }
.wpcf7 textarea {height: 100px;}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	border: solid 2px #BBB !important;
	background: #fafafa;
	color: #888;
	margin-bottom: 5px !important;
}
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 textarea:focus {
	color: #373737;
	border: solid 2px #777 !important;
}
.wpcf7 input[type="submit"] { font-size: 1.5em; margin-bottom: 20px; padding: 25px 50px; border-radius: 6px; background: #bb0000; }
.wpcf7 input[type="submit"]:hover { background: #d20000; }

This is how our page looks before we’ve added any content:

Install Elementor Plugin

Elementor is a plugin I found through my e-mail subscribers!

It’s so simple to drag-and-drop content, then design it to look great without using CSS code.

It’s far and away better than the built-in visual page editor.

Navigate to “Plugins > Add New” and search for “Elementor”, then install/activate.

Design the Pages with Elementor

Using Elementor, we’re going to create a full-width section to feature testimonials, business highlights, and a call-to-action. Then we will build out the content for each page.

Navigate to “Pages > All Pages” and when you hover over the Sample Page, click the “Edit with Elementor” link.

We’ll need the following Elementor widgets: Heading, Testimonial, Button, and Icon Box.

You should spend time editing with Elementor to become comfortable with the styling options.

Here you can see the layout for the above footer full-width section:

For the Home page, we’re going to use the Image Box widget within Elementor.

For the About page, we’re using the same Image Box widget, but setting the image size slightly smaller to 60% width.

For the Kitchen and Bathroom Remodeling Pages, we’ll use the Image Gallery widget. This layout has the “lightbox” popup effect when a visitor clicks the thumbnail.

We will create a Video page to embed a YouTube video using the Video widget within Elementor. They automatically use a sample video when you can replace with your YouTube URL.

On the Contact page, we’ll use display our physical location by embedding a map with the Google Maps widget within Elementor.

Once all the pages are created, we can customize our Main Navigation menu to shorten the titles.

For instance, we’re going to change the menu name for the Kitchen Remodeling page to Kitchens, and Bathroom Remodeling to Bathrooms.

Navigate to “Appearance > Menus”, make and save your changes.

Footer Social Links

Within “Appearance > Menus”, create a new menu called “Social Links” and check the box “Social Links Menu”.

You can then add custom links to your social media pages. The theme automatically includes the correct icons for each of the popular social networks.

Save your new menu which will appear in your website footer.

We’re including Facebook, Yelp, and Instagram.

Mobile Styles

Our website design is almost complete, we just need to check to ensure it is optimized for tablets and mobile devices.

The Twenty Seventeen theme and Elementor are mobile-responsive, but we’ll add a few more styles.

Using media queries within CSS, we can select specific page-widths and apply our custom styles.

Navigate to “Appearance > Editor” and copy/paste the following code to the bottom of your Stylesheet (style.css).

/* RESPONSIVE MEDIA QUERIES */
@media only screen and (max-width:960px) {
 .custom-logo-link img { max-width: 300px; }
 .navigation-top { font-size: 0.75em; }
}

@media only screen and (max-width:768px) {
 .custom-logo-link img { max-width: 100%; max-height: 100%; }
 .top-cta { float: none; width: 100%; text-align: center; }
 .navigation-top a { color: #333; }
}

@media only screen and (max-width:480px) {
 .top-cta .desc { font-size: 1.1em; }
 .top-cta .phone-number { font-size: 2em; }
 .wpcf7 input[type="submit"] { font-size: 1.2em; padding: 25px 20px; }
 .elementor-image-gallery img,
 .elementor-image-box-img { width: 100% !important; }
 .elementor-button.elementor-size-xl,
 .elementor-button.elementor-size-lg { font-size: 16px !important; padding: 25px 20px !important; }
}

Install Google Analytics

Google Analytics is free software that gives you all the important data you need about your website traffic to make better business and marketing decisions.

Within your browser, go to www.google.com/analytics to install (you must have a Google account).

Click the gears icon for the administration page, and under the “Account” section select the drop-down and click “Create new account”.

Fill out the following required fields: Account Name, Website Name, Website URL, and Reporting Time Zone. The rest are optional.

To get the snippet of code you must place on your website, click the “Get Tracking ID” button then copy it.

We must place this within our website HTML head section of every page. To do this, we’ll use a plugin.

Within WordPress admin, navigate to “Plugins > Add New” and search for “Insert Headers and Footers”, then install/activate.

Navigate to “Settings > Insert Headers and Footers” and paste the tracking code into the “Scripts in Header” text box, then save. It may take 24-48 hours until any data shows up within your Google Analytics Reports.

Setup Event Tracking within Google Analytics

What good is a website if it’s not producing leads for your business?

Let’s setup Google Analytics to track this so you can identify which sources of traffic are converting to leads.

Navigate to “Contact > Contact Forms” and select your sidebar contact form, then go to the “Additional Settings” tab.

Contact Form 7 allows you to add additional settings. The one we are going to take advantage of is “on_sent_ok”. When a message is successfully sent, we want to do two things: track the event within Google Analytics and alert the user.

Because you can only run one line of Javascript code per setting, we’re going to work around by using a function call.

This function will be included in your footer with our handy “Insert Headers and Footers” plugin!

Here is what you need to paste into the “Additional Settings” text area:

on_sent_ok: "contactFormSendSuccess();"

Once your contact form is saved, go to “Settings > Insert Headers and Footers” to include your send success function.

Copy/paste the following code to the “Scripts in Footer” text box:

<script type="text/javascript">
// Contact Form Analytics Tracking and Alert
function contactFormSendSuccess() {
	ga('send', 'event', 'Contact Form Submit', 'sent');
	alert('Your message was successfully sent! We will get in touch with you soon.');
}
</script>

Next, if you remember we added the class “phone-number” to our header call-to-action. We can also track this as an event when a user clicks to call.

Within the same “Scripts in Footer” text box, add the highlighted code below:

<script type="text/javascript">
// Phone Number Click to Call Tracking
jQuery(".phone-number").click(function(){
	ga('send', 'event', 'Phone Number Click', 'clicktocall');
});

// Contact Form Analytics Tracking and Alert
function contactFormSendSuccess() {
	ga('send', 'event', 'Contact Form Submit', 'sent');
	alert('Your message was successfully sent! We will get in touch with you soon.');
}
</script>

That’s all it take to capture this crucial information!

The final steps are to create two “Goals” within Google Analytics that match the event code we just placed on our website.

From your Google Analytics admin page, click the “Goals” button and then “New Goal”.

Name your goal, and choose “Event” as the goal type, then press “Continue”.

We must specify the Event Category which matches our event category within the code. These categories are “Phone Number Click” and “Contact Form Submit”.

Create a unique goal for each, and save them.

We are now ready to launch this professional business website that is setup to track leads from day one!

If you enjoyed this tutorial, you can support by using my preferred web host (HostGator) and coupon code 1WPHOSTING while checking out.

HostGator Website Hosting Banner

Already have web hosting setup?

Please give this video a thumbs up on YouTube, subscribe to my channel, and share with your friends/family!