Author Archives: Charles Strickler

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>
<ul>
<?php
// Add pages you'd like to exclude in the exclude here
wp_list_pages(
  array(
    'exclude' => '',
    'title_li' => '',
  )
);
?>
</ul>

<h2 id="posts">Posts</h2>
<ul>
<?php
// 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>";
  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
  while(have_posts()) {
    the_post();
    $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>";
}
?>
</ul>

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.

<?php
if($post->post_parent){
	$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; ?>
	</ul>
<?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() {
	wp_enqueue_script(
		'custom-script',
		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 www.responsiveslides.com

<ul class="rslides">
<?php
$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(); ?>
     <li>
     <div class="slider-overlay">
     <div class="slider-content">
     <?php the_title(); ?>
     <?php the_content(); ?>
     </div>
     </div>
	<?php the_post_thumbnail('homepage-slider');   ?>
      </li>
       
       
<?php    
    endwhile; ?>
</ul>
<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>    
    
    <?php    
    endwhile; ?>
    </ul>
<?php endif;
wp_reset_postdata();
?>

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

    
$(function() {
$(".rslides").responsiveSlides({
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
-------------------------------------------------------------- */

.slider-overlay{
	position: absolute;
	width:25%;
	background-color: rgba(0,0,0,0.39);
	height:100%;

}

.slider-content{
	padding: 15%;
	color:#fff;
}

#rslides-pager{
	position: absolute;
	left:50%;
	margin-left: -25px;
	margin-top: -45px;
	z-index:99;

}

#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;
float:left;
}

.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

A plugin we use to send WordPress mail via SMTP

If your WordPress generated emails are not going through, your messages may end up in the user’s spam filter.  In many cases the mail from some servers is blacklisted before it even gets to their spam folder.  They can be completely lost in cyber space!

WordPress generated emails are things like contact form notifications, comment notifications, and passwords sent to new users.

WP Mail SMTP.  This plugin hasn’t been updated in a few years but it still works fine in WP 3.6 (Oct 2013).

http://wordpress.org/plugins/wp-mail-smtp/

The port to use for a gmail address is 465, the server is smtp.gmail.com and the SSL option should be enabled.

*Older sites are using this plugin. Newer sites will be using the Postman SMTP plugin http://wordpress.org/plugins/postman-smtp