Clients are Scared of the Childish Blog?

wordpress-logo-hoz-rgb

They are out there. Clients who believe blogs are childish things similar to a corporate presence being established on MySpace. You, the developer, want to build them an incredible website powered by WordPress. But when they see the backend and these things called posts, they refuse to pay because you built them a childish website not fit for the corporate world. (Trust me, I know of someone this happened to.) Well, this can all be fixed by created a little filter to your active theme's functions.php file.

function turn_post_into_article($translated){
	$translated = str_ireplace('Post', 'Article', $translated);
	return $translated;
}
add_filter('gettext', 'turn_post_into_article');
add_filter('ngettext', 'turn_post_into_article');

This simple code will rename (or translate) the word Post into Article throughout your website. Now you don't have to worry about your clients getting worried that you built them a childish site with posts. :)

Serve your WordPress Site 10x Faster

wordpress-logo-hoz-rgb

See updated note at bottom of post.

You might be thinking to yourself, this guy is trying to sell some type of miracle snake-oil potion. How could it be so easy to speed up your WordPress site? The truth of the matter is that most of the time we don't take advantage of many of the resources available to us. Most WordPress users are delivering uncompressed content to visitors of their sites. But did you know you can serve most of this content in a compressed fashion? It really is as easy as adding the following lines of code to the end of your .htaccess file.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

Now your site will serve compressed versions of your content and should speed up your site (as much as 10x faster). Let me know if you notice a visible difference in the render time of your site. On many of my sites, the difference is clearly visible.

Update: A good reminder from some readers that I forgot to wrap these statements with a conditional tag to make sure the .htaccess file doesn't fail if a specific module isn't installed on your specific server. So, in order to do this you would wrap the above code with conditional tags like:

<IfModule mod_deflate.c>
THE CODE ABOVE GOES IN HERE
</IfModule>

My apologies for not doing this in the first place.

Web Design is more than just Code

grammar

A person might be a brilliant coder and able to churn out amazing amounts of development work, yet it seems that there is a major stumbling block that trips up even the best developers. I'm talking about English. I'm not talking about your skills with a billiards cue or how to write a five-paragraph essay. Nothing is worse than getting ready to close on a development deal and a little thing called grammar comes and bites your project in the butt.

So, I'm here to help with this post. Here are some questions you should be asking yourself. If you don't know the answer to some of these questions, you might want to check out Grammarly to get the necessary help to leap over the vicious grammar stumbling block. The following questions should help you diagnose a problem and the examples are ACTUAL examples pulled from people's websites.

Read More→

Newbie’s Guide to Web Hosting

I'm often asked by people who are considering starting their own blog or website about the differences in the different hosting solutions provided by the millions of hosting companies. They want to know what is a good deal, what is "too much server" for them, what are the disadvantages of one type of hosting over another type of hosting. This post is to help answer some of those entry-level questions.

Why should I pay when I can get FREE hosting?

Yes, there are still clients and people who ask this question. They might have received some notification that their ISP provides them with free web space, or a company offers to host blogs for free. Rather than pay a monthly hosting fee, you agree to allow ads to be placed on your webspace. (100% of the ads go to the company providing the free space.) There will be limited options to modify the content on your page as well as restrictions (or even lack of access) to a database and other basic server functionalities. And normally, with a free hosting option, the URL contains the domain name of the hosting company. Example: http://www.freeweb4hosting.com/bobsburgers

They want me to SHARE my hosting?

No, shared hosting doesn't mean multiple people will be using your website. It means that multiple (many times thousands and thousands of other customers will be sharing the resources of the server. Monthly fees are low which means its ideal for simple websites or personal sites. But a major problem with shared hosting is that since the server is shared among many websites, all websites share the server’s resources. This means if one website experiences high traffic, every website on the server will be slow. All the websites might share a single IP address, so if one website gets the IP address blocked, your website will also be blocked.

VPS Hosting... didn't I see that on Star Trek?

Many times, the next step up from shared hosting is a VPS server. VPS simply means a virtual private server. It means you are still sharing the server resources with other websites on the same server as your site, but the resources are partitioned. It acts like a dedicated server by giving each website has an allotment of bandwidth, RAM and CPU usage. You get a control panel to customize your website and add databases as needed for inventory or to customize your website. You will also have a unique IP address like you would with a dedicated server. VPS hosting is priced between shared and dedicated hosting.

Read More→

Set Maximum Post Title Length

wordpress-logo-hoz-rgb

You might have developed the perfect custom theme for a client. Everything looks perfect and because you're using WordPress it is very easy for the client to update the site. But then one day you take a look at the site and something went wrong... because the client just wrote a post with a title that looks like this:

The Perfect Way to Create a Core Web Application Development with PHP and MySQL while Managing Complex User Equations that are Maximized by the Global Time Exchange Pass-Loss during the Communicative Process of Client-Server Ghosting

So... the title is WAY TOO LONG... and it breaks the mold of the site that you spent hours crafting. This little code snippet will set a maximum amount of words allowed in the Post Title field. In the example code below, we have set the maximum number of words in the Post Title to 10. If there are more than 10 words, we will return an error message telling the client to shorten their title. This code goes in your active theme's functions.php file.

function maxTitleLength($title) {
  global $post;
  $title = $post->post_title;
  if (str_word_count($title) >= 10)
    wp_die( __('Error: your post title is over the maximum word count.'));
}
add_action('publish_post','maxTitleLength');

Force WordPress Admin to use SSL

wordpress-logo-hoz-rgb

A helpful security tip when using WordPress is to force your WordPress Admin Dashboard to use Secure Socket Layer (SSL). Remember that you need to already have SSL setup on your domain. This code goes in your wp-config.php file and will force your Admin Dashboard to use https:// instead of http://.

define('FORCE_SSL_ADMIN', true);

Changing the WordPress Read More Text

wordpress-logo-hoz-rgb

WordPress has a built-in ability to split a post or block of content into two parts. This is traditionally used to only show a portion or excerpt of the post on the front page of a blog, and then the reader can click on a link to read the full version of the post/content. Out-of-the-box the text of the link that readers click on to view the full version of the post says Read More. If you want to change the text all you have to do is add the following code to your active theme's functions.php file.

$custom_morelink = "Continue Reading the Full Article";
function change_more_link($more_link, $more_link_text) {
  return str_replace($more_link_text, $custom_morelink, $more_link);
}
add_filter('the_content_more_link', 'change_more_link', 10, 2);

Make sure you replace the text Continue Reading the Full Article with your own text that you want to appear instead of the standard Read More.

Update: Forgot to mention a simple way to change just one Read More text link. For example: you can use the above PHP code to change every single Read More text, but you can also just use a simple method to change the text directly in the WordPress more tag.

< !--more Continue Reading the Full Article-->

And just in case you forgot what the standard/default WordPress more tag looks like...

< !--more-->

So you see, by simply adding the text you want to appear (instead of the Read More text) inside the more tag, you have extra control over the look of your site.

CSS Snippet – Border Radius

csscode

Example Code

.element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

What the Code is Doing...

When we want rounded corners to appear on our elements, we need to not only use the border-radius declaration, but we also need to utilize the vendor specific declarations (-webkit-border-radius & -moz-border-radius) because "rounded corners" are not standard yet. If we only want a uniform (all four corners rounded the same way) we only need to use a single number (10px). But you can also do some more creative rounded corners by utilizing the box-model and specifying each corner's radius. Example: border-radius: 10px 5px 25px 17px;

Read More→

Add Menu Items to Admin Toolbar

wordpress-logo-hoz-rgb

One of the easiest ways to brand WordPress when doing client work is to add your web design business to the WordPress Admin Toolbar. Adding links and menu items to the WordPress Admin Toolbar is easily done through a simple add_action WordPress hook. In this example, we are adding a link to a fictitious webdev studio, as well as drop-down links to the Support, Billing, and News Updates of said fictitious webdev studio.

This code can be placed in the active theme's functions.php file.

function easy_add_menu_items_to_toolbar() {
  global $wp_admin_bar;
  if (!is_super_admin() || !is_admin_bar_showing())
    return;
  $wp_admin_bar->add_menu(array(
    'id' => 'webdev_links',
    'title' => __('Awesome WebDev'),
    'href' => __('http://domain.com'),
  ));
  $wp_admin_bar->add_menu(array(
    'parent' => 'webdev_links',
    'id' => 'support',
    'title' => __('Get Support'),
    'href' => __('http://domain.com/support'),
  ));
  $wp_admin_bar->add_menu(array(
    'parent' => 'webdev_links',
    'id' => 'billing',
    'title' => __('Pay Your Bill'),
    'href' => __('http://domain.com/billing'),
  ));
  $wp_admin_bar->add_menu(array(
    'parent' => 'webdev_links',
    'id' => 'news',
    'title' => __('Latest News'),
    'href' => __('http://domain.com/news'),
  ));
}
add_action('admin_bar_menu', 'easy_add_menu_items_to_toolbar', 25);

As you can see, each time we add_menu to the $wp_admin_bar we setup an array. Inside the array we have four different options.

  • 'parent' - This is how we create a drop down menu. If you want a menu item to have a parent, you place the parent's 'id' inside your array.
  • 'id' - This is the unique name for each menu item.
  • 'title' - This is the text that appears to the end-user on the Toolbar menu item.
  • 'href' - This is the url location of where you want the user to go when they select the menu item.

If you wanted to take it a step further, you could also assign CSS classes to individual menu items... which would be a great way to integrate icons/graphics into your WordPress Admin Toolbar. The following code will assign a CSS class of super-css-class to this newly added specific WordPress Admin Toolbar menu item.

$wp_admin_bar->add_menu(array(
  'id' => 'super_css',
  'title' => __('Super CSS'),
  'href' => __('http://domain.com/supercss'),
  'meta' => array(
    'class' => 'super-css-class',
  ),
));

Bonus Content: You can also use this exact same code to remove items from the default WordPress Admin Toolbar. I prefer to create a different function when removing items. This way the adding of content happens in one function and the removing of content happens in another function.

function remove_admin_toolbar_links() {
  global $wp_admin_bar;
  $wp_admin_bar->remove_menu('wp-logo');
  $wp_admin_bar->remove_menu('updates');
}
add_action('wp_before_admin_bar_render', 'remove_admin_toolbar_links');

The above code removes the WordPress logo from the Admin Toolbar and also the section that shows there are updates to WordPress (great to remove from clients). You can remove everything if you want and simply recreate the WordPress Admin Toolbar into a completely different beast. If you want to go down that road, here are the names of the sections you might want to remove.

  • wp-logo - the WordPress logo
  • my-account - links to your account. The ID depends upon if you have avatar enabled or not.
  • site-name - site name with other dashboard items
  • my-sites - the My Sites menu (if you have more than one site, multisite)
  • get_shortlink - shortlink to the post/page
  • edit - Post/Page/Category/Tag edit link
  • new-content - Add New menu
  • comments - Comments menu
  • updates - Updates menu
  • search - Search box

Are you currently modifying the WordPress Admin Toolbar for yourself or your clients?

Add a Search Box to WordPress Navigation

wordpress-logo-hoz-rgb

You've all seen sites that have a built-in search box as part of a navigation bar. With WordPress, it is really easy to do. All we have to do is add a search form to the list of navigational items through a filter. This code would go into your active theme's functions.php file. Caution: You will need to replace the INSERT-YOUR-MENU text with the actual name of your custom menu you create in WordPress.

function add_search_form($items, $args) {
if( $args->theme_location == 'MENU-NAME' )
        $items .= '<li class="search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="search" name="s" id="s" /><input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" /></form></li>';
        return $items;
}
add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

There really are a number of ways to do this, but with this code it doesn't matter what theme you are using, it will simply filter in a search form as an additional menu item in the navigational menu list.