How to Setup a WordPress Website

The first step to setting up WordPress would be to obviously install WordPress to your hosting site.

Once WordPress is installed you want to turn off the Robots so that Google cannot index your pages while you are still in the development stages.
To do this you must:

  1. Log into the WordPress admin dashboard
  2. Go to the Settings option on the side navigation
  3. Click on the Reading link from the slide out menu
  4. Click on the check box next to the title “Search Engine Visibility”
  5. Click Save Changes

The next step to setting up word press would be to disable the commenting. To do this you must:

  1. Go to back to the Settings option and Click on the Discussions link
  2. Next you will turn off the top three check boxs.
  3. Click Save Changes

How to create an HTML sitemap page template

We owe all of the credit on this post to Yoast who gave us most of this code from this post.  Create a new page template called sitemap and use the code to generate a list of pages and posts.

<h2 id="pages">Pages</h2>
// Add pages you'd like to exclude in the exclude here
    'exclude' => '',
    'title_li' => '',

<h2 id="posts">Posts</h2>
// Add categories you'd like to exclude in the exclude here
$cats = get_categories('exclude=');
foreach ($cats as $cat) {
  echo "<li><h3>".$cat->cat_name."</h3>";
  echo "<ul>";
  while(have_posts()) {
    $category = get_the_category();
    // Only display a post link once, even if it's in multiple categories
    if ($category[0]->cat_ID == $cat->cat_ID) {
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
  echo "</ul>";
  echo "</li>";

You may also want to include a search form at the top of the page if it isn’t part of the website shell.

<?php get_search_form(); ?>

How to add a sub page menu into the template files

The following code will produce a list of sub pages with the parent page added at the top of the menu.

	$children = wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&include=".$post->post_parent."&echo=0"); 
	$children .= wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&child_of=".$post->post_parent."&echo=0");
} else {
    $children = wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&include=".$post->ID."&echo=0"); 
    $children .= wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&child_of=".$post->ID."&echo=0");  
if ($children) { ?>
	<ul class="submenu">
		<?php echo $children; ?>
<?php } ?>

Build a lightweight slider from a custom post type

Start by adding to your theme’s function.php file. We need to add the custom post type for the slides, a custom thumbnail size for the slider, and we need to add the slider script to the header.

/**add slider script to header*/

function my_scripts_method() {
		get_stylesheet_directory_uri() . '/js/responsiveslides.min.js',
		array( 'jquery' )

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

/**custom post type for slider*/

register_post_type('slides', array(
'label' => __('Slides'),
'singular_label' => __('Slides'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => false,	'query_var' => true,
'supports' => array('title', 'editor', 'thumbnail'),
'taxonomies' => array( 'post_tag')

/**add slider thumbnail size*/

if ( function_exists( 'add_image_size' ) ) { 
	//add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
	add_image_size( 'homepage-slider', 960, 320, true ); //(cropped)

/**add slider thumbnail size*/
add_filter('post_thumbnail_html','remove_thumbnail_dimensions', 10 );
add_filter('image_send_to_editor','remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;

Modify the front page template to loop through the custom post type and use the format needed for the slider. We are taking our slider code from

<ul class="rslides">
$my_secondary_loop = new WP_Query('post_type=slides');
if( $my_secondary_loop->have_posts() ): while( $my_secondary_loop->have_posts() ): $my_secondary_loop->the_post(); ?>
     <div class="slider-overlay">
     <div class="slider-content">
     <?php the_title(); ?>
     <?php the_content(); ?>
	<?php the_post_thumbnail('homepage-slider');   ?>
    endwhile; ?>
<ul id="rslides-pager">
<?php while( $my_secondary_loop->have_posts() ): $my_secondary_loop->the_post();
       //The secondary loop
      <li class="slidebtn"><a href="#">&nbsp;</a></li>    
    endwhile; ?>
<?php endif;

We have added the initialization and settings javascript into the slider script file.

$(function() {
auto: true,             // Boolean: Animate automatically, true or false
speed: 500,            // Integer: Speed of the transition, in milliseconds
timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
pager: true,           // Boolean: Show pager, true or false
nav: false,             // Boolean: Show navigation, true or false
random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "#rslides-pager",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback

Add the slider CSS to the theme’s CSS file

/* =slider styles
-------------------------------------------------------------- */

	position: absolute;
	background-color: rgba(0,0,0,0.39);


	padding: 15%;

	position: absolute;
	margin-left: -25px;
	margin-top: -45px;


#rslides-pager a{
	display: block;
	text-decoration: none;

#rslides-pager li.rslides_here {
  background: #fff;

#rslides-pager li{
background-image: none;
background-color: #0e1939;
border-radius: 10px;
width: 12px;
height: 12px;
margin: 0 2px;

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0 0 25px 0;

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;

Custom styles for the slider will need to be applied from here but the slider should be working.

Customizing WordPress Image Sizes

Images on a website are often cut to exact size by a developer or designer while building a website.  Its easy to forget that you can easily customize the standard thumbnail sizes in the WordPress Media Settings.

Screen Shot 2013-12-14 at 4.37.17 PM

One of the most useful techniques is to set the large size to the width of the content area of the website so you can easily insert full width images.

You can create additional image sizes and edit the WordPress default image sizes in the functions file.

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 ); // default Post Thumbnail dimensions

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)

You can also add these new image sizes to the visual editor so users can select the thumbnail size when they are inserting it into a page.

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __('Your Custom Size Name'),
    ) );

This snippet and more information about cropping options are in the WordPress Codex for Image Sizes

Customizing WordPress User Permissions, Roles, Capabilities

When you are showing a person how to use WordPress for the first time it is a good idea to make them an Editor role instead of an Administrator. You can use a plugin called Capability Manager Enhanced to give the Editor Role more than its usual permissions.

By default the editor cannot edit widgets, theme options, page builders, slider plugins or other types of plugins. The user manager plugin can give an editor access to many of these.

Note that editors can see all users, but cannot create other editors. They can only create users at the author level.

Recommended Editor Capabilities
Screen Shot 2013-12-14 at 4.26.35 PM

Using WP Easy Columns

wp easy columnsMany WordPress themes have built in shortcodes for creating column widths within page and post content. What do you do if you want to include these handy shortcodes within a theme that does not have this feature? You basically have two options either create your own custom code or use an existing plugin like WP Easy Columns.

We have been using Easy Columns and it is a pretty good plugin. The shortcodes are a little long for my liking but using the interface offered in the editor makes it fairly simply. Training a client on how to use these should not be a challenge. It is certainly a quicker method than creating this from scratch or following a tutorial and has some advantages.