Sunday, April 2, 2017

April 2017 Special

We've done a few WordPress website specials recently.  This month we've decided to focus on non-Wordpress sites.  So we are offering a 25% discount on all websites that are not build on WordPress.

This discount covers mockups, design, development, SEO research and site publication.  Also included is the creation or editing of images for the site... so everything!

Additionally, with this offer, we will include a 25% discount on our basic service package when you host your site on our servers.  That's our basic service package for $18.75 / month*.

For more information, please contact us through our website or by commenting here.  (We will not publish comments with contact information).  If you are ready to get a quote for your website project, please start here.

*Basic service includes monthly backups of your complete site and database (when applicable), restoration from these backups when necessary, quarterly SEO reviews and updates. Regular price for the basic service package is $25 / month. Other service packages are available.  You are not required to get a service package.

WordPress Twenty Seventeen - Code Full-Width Page Layout

I have never started a WordPress site for a client based on one of the default themes.  I just didn't like them as a starting point - that is until the Twenty Seventeen theme arrived.

I really like the full-width image on the home page and the placement of the site title and tag line.  I also think the parallax effect on the home page is pretty neat.  I even like the half-page layout.  It's something different and something that works well with most content.  But, there are times when you just want or need to use the full page for your content.

With very little code, you can create a full-page template for the Twenty Seventeen theme.  It really only involves some very simple PHP and some CSS.  I definitely recommend that you create a child theme for this code.  It's the best way to make sure your customizations won't be overwritten when WordPress updates.  If you are not sure about creating a child theme, it's very simple, follow the directions here or do a Google search.  There are several good tutorials out there.  (Don't want to create a child theme? See the notes in orange).

Step 1 (If you did not create a child theme, skip to Step 2).
After you create your child theme, create the following directory structure, replacing "your_child_theme" with the name of your theme:


We will be cloning and customizing two files, one that will be placed in the directory you created above.

Step 2
We'll begin by cloning the page.php file.

(a) Open the file at wp-content/themes/twentyseventeen/page.php for editing.  At the top of the file, just under the <?php code starter, add the following:

     Template Name: Full Width

(b) Next find the following line of code (originally, it was on line 27 of the file, but you just added the lines above to the top of the file, so move down appropriately):

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

and change it to:

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

(c) Now, save this file with the name, page-full-width.php in your child theme directory:


If you did not create the child theme, save this file (same file name) to the twentyseventeen theme directory:


Step 3
Now we are going to clone the default content file and customize it with some special CSS class names.

(a) Open this file for editing:


(b) Now find the following line of code (around line 16):

<header class="entry-header">

And change it to:

<header class="entry-header-full-width">

(c) Next, find this code (around line 20):

<div class="entry-content">

Change this to:

<div class="entry-content-full-width">

In the next step, we will be writing some CSS that will use these new class names to alter the default layout of pages in the twentyseventeen theme.

(d) Before moving on, save the above with the name, content-page-full-width.php in the following directory:


If you did not create a child theme, save the file (with the same name) to:


Step 4
In this step we will add the CSS rules to give us the desired full-page effect.  Open the style.css file in your child theme directory.

I add the following lines to the end of the style.css file and make sure they stay at the bottom.  This helps to insure that no other rules will take precedence over this code.

body:not(.has-sidebar):not(.page-one-column) .page-header,
body.has-sidebar.error404 #primary .page-header, #primary .entry-header-full-width, #primary .page-header {
     display: block;
     width: 100%;

.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content, #primary .entry-content-full-width, #comments {
     display: block;
     width: 100%;

If you did not create your own child theme, I would recommend that you put the above code in the twentyseventeen default style.css file near similar code.  The default style sheet is found at:


For the first block of code above, add it at line 3756 - remember to put line breaks above and below it.  And for the second block of code, add it at line 3775.

You can, of course, add any other custom styles you would like to the .entry-header-full-width and .entry-content-full-width classes.

That's it!  Now when you are creating a page, you can choose the "Full Width" template in the Page Attributes section (see image).   I hope you find this code helpful.

Note: you can find plugins that will do this for you.  But, why bloat your site with all the code associated with a plugin, when you can add the simple code here?  I obviously wouldn't. 😎😎