Category Archives for "Tutorials"

How to Center the Twenty Fourteen Theme (and/or Remove the Left Sidebar)

The Twenty Fourteen is the default WordPress theme at the time I’m writing this post – which means when you install WordPress it’s the theme that’s automatically on your site.

By default it looks like this:

default Twenty Fourteen theme

default Twenty Fourteen theme

Hmmm you may say…but wait, it really is a nice theme, in fact, I really like it, it’s become my favorite default WordPress theme.

But I’m not too crazy about how it looks right out of the box; the left alignment I especially don’t care for.

But, like most WP default themes, it’s highly customizable. When it first came out, I was using the Fourteen Extended plugin to align the 2014 to the center, along with removing the left sidebar (if I wanted to) and a few other things.

But just recently,the Fourteen Extended became unavailable–from what it says on the plugin author’s site, he got sick and has been unable to keep it up to date, so POOF!, it disappeared from the WordPress.org plugin repository.

What happened to the Fourteen Extended plugin

Where is the Fourteen Extended plugin?

It probably, maybe, will be updated when he gets better, but I’ve decided from these happenings that I don’t like relying on a plugin for site layouts, etc.

If you use Fourteen Extended plugin to center your Twenty Fourteen site, perhaps also remove the left sidebar, and the guy gets another hay fever attack, well, not good 🙂 (all the best to the plugin author though, not blaming him, stuff happens)

So, here’s a video tutorial on how to center the Twenty Fourteen theme without using the Fourteen Extended plugin, and another on how to remove the left sidebar.

It’s easy guys and gals, just watch the videos below, and then copy the code below the videos.

<?php
	// Removing left sidebar of Twenty Fourteen
function remove_left_sidebar(){
	unregister_sidebar( 'sidebar-1' );
}
add_action( 'widgets_init', 'remove_left_sidebar', 11 );
?>

Note: Any code in this file needs to be before the closing ?> tag.

Here’s the code you put in your Twenty Fourteen child theme’s style.css file. If you just want to center your 2014 site and keep the left sidebar, just use .site code below this code. 🙂

@media screen and (min-width: 783px) {
	 .primary-navigation {
		 float: right;
		 margin-left: 20px;
	        }
}
.site {
		margin: 0 auto;
		}
		media screen and (min-width: 1110px) {
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		padding-left: 55px;
	        }
	            }
	        .site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
		max-width: 874px;
        }
        
        .comments-area {
		max-width: 874px;
        }
        
        .post-navigation, .image-navigation {
		max-width: 874px;
        }
        
        .site:before,
#secondary {
		width: 0;
		display: none;
	    }

.featured-content {
		padding-left: 0;
        }
        
        .site-content, .site-main .widecolumn {
		margin-left: 0;
        }  
        
        .hentry {
		max-width: 900px;
        }
.post-thumbnail img {
		width: 100%;
		}  
	    

Code for centering site only:

.site {
		margin: 0 auto;
		}

How to Properly Build a Website with WordPress -Tutorial for Beginners

Use the Free WordPress Website Builder to Create a Website

Have you decided it’s time to take part in the internet in 2014 and get a website online?

Great idea! And since you are going to go about setting up a website, why not take the time to maximize your efforts.

First, I highly recommend you learn WordPress. For most folks, it’s the best, and easiest way to get your own site started. No coding, CSS, HTML, all that, is necessary.

I have a recent video tutorial that’s great if you’re a beginner, or if you have more experience in WordPress.

WordPress Website Tutorial

In this video, I show you not only how to make a website with WordPress, step-by-step, but also how to properly set up your website and content in a way that will help optimize your site for the search engines like Google, and for your site’s visitors.

Check out the video below to learn how to build a WordPress website yourself in 2014.

 
 

How To Create a WordPress Twenty Fourteen Child Theme – Easy!

WordPress Twenty Fourteen child theme

Alright, you’ve discovered WordPress and you are eager to get your first site online. You’ve watched a great WordPress tutorial video, maybe several, and you are ready to get started!

You may not think that you will ever make any changes to your theme using css, but as you get more into WordPress down the road, you may find that you want to…creating a child theme IS easy, so why not just do it anyway?! 🙂

Rather than write an entire new post and repeat myself, here’s what I wrote earlier about “How to Create a WordPress Child Theme”

The best ways to preserve any changes that you make to your original WordPress theme is to create a child theme and use that one instead of the original.

A child theme maintains the functionality of the parent theme, but allows you to make design customizations without losing them if your WordPress theme updates various parts of the theme’s code.

Here’s another video that walks you through the steps also.

The CSS code from my WordPress for Beginners video,using the Twenty Fourteen theme as the original parent theme, is below the video.

 

Here’s the Code

Just copy & paste this into your child theme style.css, change the details as needed . For ex.: if your theme is the Twenty Twelve, you would put twentytwelve under Template, and under Theme Name put Twenty Twelve Child, etc.(you would also have to change “twentyfourteen” to your theme name in this line too: @import url(“../twentyfourteen/style.css”); )

/*
Theme Name:     Twenty Fourteen Child
Description:    Twenty Fourteen Child Theme
Author:         Mike Simmons
Template:       twentyfourteen
*/

@import url("../twentyfourteen/style.css");

/* Theme customization starts below this line -------- */

 

Below are some tweaks that I used in the Properly Make a Website video. Use & adjust as needed, if you are using the Twenty Fourteen theme as your original parent theme.

/*controls height of featured content padding*/

.grid .featured-content .entry-header {
  height: 70px;
}

/*removes meta data of categories by display: none*/

.featured-content .entry-meta {
  color: #FFFFFF;
  display: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.09091;
  margin-bottom: 12px;
}

/*Page titles*/

.entry-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.09091;
  margin: 0 0 12px;
  text-transform: uppercase;
}

/*padding between menu bar and page content*/

.content-area, .content-sidebar {
  padding-top: 30px;
}

/*site title font size & color, etc*/

.site-title a, .site-title a:hover {
  color: #FFFFFF;
  font-size: 26px;
}

/*No auto text hyphenation*/

.entry-content,
.entry-summary,
.page-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: normal;
}

.nav-links {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	hyphens:         none;
	word-wrap: normal;
}

.comment-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: normal;
}

.widget {
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	line-height: 1.2857142857;
	margin-bottom: 48px;
	width: 100%;
	word-wrap: normal;
}

/*This is so a sub-menu item in the left sidebar menu is not
 covered by a Cyclone slider image*/

#secondary {
  z-index: 9999;
}

Now you are ready to get started tweaking your theme to your desired look.

Make sure that you copy the beginning and ending { } brackets when pasting the code into your child theme style.css. 🙂

To learn more about using WordPress child themes, click here.

(WordPress image: CC BY-SA by Phil Oakley)