Multi Environment WordPress wp-config.php

When you are developing any website you will always have different environments for your website, the number of environments you need will depend on the size of the project and how many people are involved in the project.

The main environments you will find in any website project are:

Development Server - The developers local machine to development the website.
Testing Server - Once development is finished this will be where all testing takes place.
User Acceptance Testing Server - Where the client will review the changes to the website.
Production Server - The live website.

The two environments you will always need to have is a development environment and a production environment. You will normally only have these two environments if the client doesn't need to view the site before it goes live. This means that once the developer has finished working on the site they can simply put this onto the production server. These are normally for the very basic of projects where the developer can simply test on their local development server before going live.
Continue reading »

CSS Flip Boards

In this tutorial we are going to create a flip board effect by using CSS, there are 2 effects we can create one the hover event we are going to have one board flip on the horizontal and another board which will flip on the vertical.

This effect can be used to hide content from the user until they hover over the board this will then display the hidden board.

front board

flipped board

View the demo to see the effect.

Demo
Continue reading »

Add Twitter Cards To Your Website

When you share a post on a social network like Facebook it will scan the URL that you are sharing and return certain information to display the page in your feed. Facebook will get the page title, page description and a thumbnail image for the page. You can change the information that Facebook gets by using the open graph meta tags.

These are simply meta tags you can add to the head tag of your page, when Facebook scans your page to get the title, description and images it will search for these tags, if they are there then it will use the contents of these tags instead of the page title. These means you can fully customise the page titles just for Facebook.

Twitter also has meta tags which you can use to customise the message on Twitter. These are called Twitter cards, it allows website owners to add more descriptive text on their links when they are shared on Twitter.
Continue reading »

Absolute Center Images With CSS

Here is a technique about how you can absolute center position an element on the horizontal and vertical in CSS.

Center Images Horizontally

To center something on the horizontal in CSS it's quite easy all you need to do is set the width on the element and apply an auto margin-left and margin-right on to the image. The browser will work out the exact margin on both the right and left side of the image. This will position the image in the center of the parent element just by using the width and the margin properties.

<img src="example.html" alt="Center Images" />

img {
     width:250px;
     margin: 0 auto;
}

Validate Featured Image On Post

Since WordPress version 2.9 you have been able to add a post thumbnail to all your posts on your website. A post thumbnail is called a featured image for the posts, this image can be displayed in anyway you want, it is up to the theme developer. The benefit of this image is that it allows you to add an image to a post without it appearing in the content of the actual post.

This will allow you to use an image to display the post instead of just the content. The main use of this image is to be used on the index page or the search results page of your WordPress site.

Enable Theme Support For Featured Post

By default themes do not support this feature you need to add some code to the functiona.php file.

add_theme_support( 'post-thumbnails' );

Free Premium Files For May 2013

Each month the Envato marketplace brings you free premium standard files.

Envato is a web marketplace where you can get premium files for different areas of your website. My favourite marketplaces is the script marketplace CodeCanyon and the theme marketplace ThemeForest.

Here are the files which you can get for free for May 2013.

PHPWebServer with WebSockets Upgrade

18 purchases at the price of $5.

This item is a suite of PHP classes that define a HTTP web server with WebSockets upgrade possibility. It runs in PHP CLI , and you can do everything you want with it thanks to the low-end access of HTTP protocol.

Get It Free Now

Disable Scroll Wheel Zoom On Google Maps

Google Map

When you are using the Google map API on your website it will override the the scroll mouse event and act as the zoom on the maps. This feature makes it really easy to zoom on a certain position on the map, you just hover over the location and use your mouse wheel to zoom in or out.

But this causes a problem when you have a large or full screen map, as you scroll on the page the map will zoom out, making it difficult to scroll on the page using the mouse wheel.
Continue reading »

Always Get A Checkbox $_POST Value

The problem with checkboxes is that if they are not checked then they are not posted with your form. If you check a checkbox and post a form you will get the value of the checkbox in the $_POST variable which you can use to process a form, if it's unchecked no value will be added to the $_POST variable.

In PHP you would normally get around this problem by doing an isset() check on your checkbox element. If the element you are expecting isn't set in the $_POST variable then we know that the checkbox is not checked and the value can be false.

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

But if you have created a dynamic form then you won't always know the name attribute of your checkboxes, if you don't know the name of the checkbox then you can't use the isset function to check if this has been sent with the $_POST variable.

To get around this problem you can use a new hidden element which will store the true value of the checkbox. What you need to do is create a hidden element and use Javascript to change the value of the hidden field to the true value of the checkbox.
Continue reading »

Display A List Of Authors On WordPress

On some blogs it is important to post on a regular basis, but this can be difficult unless blogging is your full time job.

For a single person to regularly post awesome blog posts everyday can take up a lot of time. For this reason many blogs have a number of authors, this helps keep the content regular and high quality to ensure a better blog.

On a single author blog you will normally find an about page that will tell you information about the author. You can do this on a multi author blog but you also need to create a page that will display all the authors on the blog so you can link to each of their posts.

If you want to create a page to display all the authors you have two options, you can create a new page template which will allow you to code the layout of the page to show all the authors. The other option is to create a shortcode where the user of the site can use this on a new page content to create a list of all the authors.

The two options should be decided on if you are going to add this functionality in a plugin or a theme. If you are going to add this functionality to the theme then you should use a page template, if you want to use the shortcode then you should do this with a plugin. In this tutorial we are going to create a page template to display all the authors on the site.

Create A Page Template

First start off by creating a new page template for your list of all authors.

/*
Template Name: Display All Authors
*/

Add Google+ Comments To Your Site

On the 18th April 2013 Google announced that they have made a Google Plus commenting system which you can have on your website just like the Facebook comments. This allows people to come to your site and when they comment on an article this comment will be shared on Google plus.

Google+ Comments

The difference that Google plus comments has over Facebook comments is a massive benefit of including all comments from Google plus on your page. This means that if someone shares your article on Google plus it will appear in your commenting system, if this then leads to a conversation happening on Google Plus about your article this will also appear on your comment system. So all conversations that are happening about your page will come through and be displayed on your website. This allows you to keep in touch with every conversation that is happening on Google plus about your page.
Continue reading »