Paulund http://www.paulund.co.uk Paulund | PHP Developer Bristol Sat, 18 May 2013 11:03:35 +0000 en-US hourly 1 Multi Environment WordPress wp-config.php http://www.paulund.co.uk/multi-environment-wordpress-wp-config-php http://www.paulund.co.uk/multi-environment-wordpress-wp-config-php#comments Thu, 16 May 2013 08:12:29 +0000 Paul http://www.paulund.co.uk/?p=7209 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 [...]

This article was originally published on Multi Environment WordPress wp-config.php. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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.

If you have a client that needs to review your development before the site goes live then you have a user acceptance testing server (UAT server), this environment should match the production server as close as possible. When the developer has finished testing locally then they can upload the site to the UAT server for the client to review. Once the user has accepted the changes made by the developer then the site can be moved to the production site.

For multiple developer projects there will be a need for you to have an additional testing server inbetween development and UAT. You need this server because as the developer is creating the website and checking in the code to source control they will only be testing on their own environment, over time this environment could become out of step with the other developers environments. Once the developer has checked in their code to source control they should then deploy this to the testing server. This is where all the developers will push their changes so it can be tested with all the other developer changes. Once this server is stable and has past testing then you can push these changes to the UAT server, where the client will review these changes and if accepted will be pushed to the production server.

Multi Environment With WordPress

If you have a WordPress project then you want to make it easy to switch between different environments, the easiest way is to allow you to upload everything to do with your project to the server. This will mean that all the changes you make will be uploaded not just the changes to your plugins or themes. But if you upload everything you will also upload the wp-config.php file, this file will tell WordPress how to connect to the underlining database.

The wp-config.php file is just a PHP file so you can change it to get the credentials for the database depending on what server it is being served from, simply by using the $_SERVER global variable to differ the environments.

The variables you need to change between environments are:

  • DB_NAME - Name of the database
  • DB_USER - User to connect to the database
  • DB_PASSWORD - Password to conenct to the database
  • DB_HOST - The host name of the database
  • WP_HOME - The location of the WordPress Home URL
  • WP_SITEURL - The location of the WordPress Site URL, most of the time for will be the same as WP_HOME depending on if WordPress is installed in a sub-directory.
  • WP_DEBUG - To display an PHP errors or warnings.
  • WP_CACHE - To cache the WordPress output.
<?php
if( stristr( $_SERVER['SERVER_NAME'], "dev" ) ) {
 	// Dev Environment
	define( 'DB_NAME', 'project_dev' );
	define( 'DB_USER', 'project_dev_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.dev');
	define( 'WP_SITEURL', WP_HOME);
	// Dev will always want debug on and caching off
	define( 'WP_DEBUG', true );
	define( 'WP_CACHE', false );
} elseif( stristr( $_SERVER['SERVER_NAME'], "test" ) ) {
	// Test Environment
	define( 'DB_NAME', 'project_test' );
	define( 'DB_USER', 'project_test_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.test');
	define( 'WP_SITEURL', WP_HOME);
	// Testing will always want debug on and caching off
	define( 'WP_DEBUG', true);
	define( 'WP_CACHE', false);
} elseif( stristr( $_SERVER['SERVER_NAME'], "uat" ) ) {
	// UAT Environment
	define( 'DB_NAME', 'project_uat' );
	define( 'DB_USER', 'project_uat_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.uat');
	define( 'WP_SITEURL', WP_HOME);
	// UAT Environment will always be the same as production so turn off debug and turn on caching
	define( 'WP_DEBUG', false );
	define( 'WP_CACHE', true );	
} else {
	// Production Environment
	define( 'DB_NAME', 'project_live' );
	define( 'DB_USER', 'project_live_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.com');
	define( 'WP_SITEURL', WP_HOME); 
	// Live Environment will always be the same as production so turn off debug and turn on caching
	define( 'WP_DEBUG', false );
	define( 'WP_CACHE', true );
}
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
?>

This article was originally published on Multi Environment WordPress wp-config.php. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/multi-environment-wordpress-wp-config-php/feed 0 CSS Flip Boards http://www.paulund.co.uk/css-flip-boards http://www.paulund.co.uk/css-flip-boards#comments Wed, 15 May 2013 08:03:41 +0000 Paul http://www.paulund.co.uk/?p=7081 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 [...]

This article was originally published on CSS Flip Boards. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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

There are a number of CSS3 properties we need to use to achieve this effect.

The HTML

First we start off with the HTML for the boards. Each board is made up of a div element with another 2 div elements inside, these are elements we are going to use as the front board and the flipped board.

<div class="flip-boards">
<div class="board top">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
</div>

Styling The Boards

To create the effect of the flipped board we are first going to style the boards.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
}

This will style the boards the same size and will position them in the same space so that they overlap each other.

You can change the background of the boards to make it easier to see the difference between the two boards.

.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250);
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238);
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}

With the flip board we need to hide the second board from view until it can be flipped around to see it. For this we use the CSS property backface-visibility, this property is related to the 3D transforms of the element. Using 3D transforms you can flip an element on the y-axis so that the front of the element is now facing in the opposite direction. Using the backface-visibility you can hide any elements that are not facing the front of the screen.

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  backface-visibility:     hidden;
}

This code spins the element 180 degrees so that the front is now facing away from screen and now the element can be hidden by using the backface-visibility property. Now we can add this to our page by using the following CSS.

.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:         hidden;
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

Now the flipped board will be hidden from view, the way we display this again is to flip the board on the hover event.

.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

We should also add a transition effect so that there is a smooth flip when rotating the board, this is done by using CSS transition, we also need to make sure that when the boards transforms it will preserve the 3D space by using the property transform-style.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

That's all you need to create a flip board look which will have a hidden div which will be flipped into view when you hover over the board.

View the demo to see it in action.

Demo

Full Code Of The Flip Board

<div class="flip-boards">
<div class="board top">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
<div class="board left">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
</div>
<div class="flip-boards">
<div class="board top">
<div class="front">
				<img src="http://placedog.com/200/200" />
			</div>
<div class="flipped">
				<img src="http://placekitten.com/g/200/200" />
			</div>
</div>
<div class="board left">
<div class="front">
				<img src="http://placekitten.com/200/200" />
			</div>
<div class="flipped">
				<img src="http://placedog.com/g/200/200" />
			</div>
</div>
</div>
.flip-boards{ position: relative; }
.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
.flip-boards .board h2{
	margin-top:80px;
	font-size: 1em;
}
.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.left:hover
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
.flip-boards .board.left .flipped
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}

This article was originally published on CSS Flip Boards. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/css-flip-boards/feed 0 The HTML Email Boilerplate http://www.paulund.co.uk/html-email-boilerplate http://www.paulund.co.uk/html-email-boilerplate#comments Fri, 10 May 2013 08:49:57 +0000 Paul http://www.paulund.co.uk/?p=7381 With web development there are lots of common tasks that we do over and over again. This is where it's helpful to work with tools that make our lives easier, this can be Server-side frameworks, HTML project boilerplates and HTML email boilerplates. Some of the most popular boilerplates you would of heard of are Twitter [...]

This article was originally published on The HTML Email Boilerplate. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> With web development there are lots of common tasks that we do over and over again. This is where it's helpful to work with tools that make our lives easier, this can be Server-side frameworks, HTML project boilerplates and HTML email boilerplates.

Some of the most popular boilerplates you would of heard of are Twitter bootstrap and HTML5 boilerplate. These projects are both available on Github for you to fork and modify for your own use and both are very useful projects to use when you first start any new website project.

One of the problems that web developers have is getting email newsletters to look correct in most of email clients. This is where the HTML email boilerplate can be useful, it will provide you with helpful code snippets to aid in developing all your HTML emails. This will take care of the correct doctype to use, how to reset the styling to work in all clients, how to display images correctly and how to style HTML tables to align correctly in your email.

htmlboilerplate

HTML Doctype

While many email clients will strip out the doctype, it's good practice to add a doctype so that when we are testing we know that the HTML will render correctly. When popular clients remove the doctype from the email it will be replaced by XHTML 1.0 strict doctype, this is why we make sure we set it as XHTML 1.0 strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Images

The HTML boilerplate will help you in setting up your images correctly, if you have links around your images then a border will be placed around the images, adding these styles will remove all borders around your images.

<style>
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
a img {border:none;} 
.image_fix {display:block;}
</style>
<img class="image_fix" src="full path to image" alt="Your alt text" title="Your title text" width="x" height="x" />

Tables

The HTML boilerplate gives you a starting point to deal with tables, this will provide you with a starting point of defaults to use on your table to avoid any formatting problems.

<style>
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
</style>
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="200" valign="top"></td>
<td width="200" valign="top"></td>
<td width="200" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>

Resetting Your Styles

Use the following snippet to reset the styles in the email clients, this will also help with font sizes on mobile devices.

/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
p { margin: 1em 0; }
/* End reset */

Use the HTML boilerplate the next time you need to create a HTML email newsletter.

HTML Email Boilerplate

This article was originally published on The HTML Email Boilerplate. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/html-email-boilerplate/feed 0 Add Twitter Cards To Your Website http://www.paulund.co.uk/add-twitter-cards-to-your-website http://www.paulund.co.uk/add-twitter-cards-to-your-website#comments Wed, 08 May 2013 08:16:26 +0000 Paul http://www.paulund.co.uk/?p=6984 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 [...]

This article was originally published on Add Twitter Cards To Your Website. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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.

card-web-summary_0

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.

When a link is shared on Twitter it is limited to the 140 character limit on all tweets, but on all tweets you can expand the tweet to find out more about it. This section is where you find information on how many people have replied to the tweet, re-tweeted it and added it to their favourites. But if you have the Twitter meta tags added to your head tag then instead of just seeing the information about re-tweets and favourites you will also see a snippet of the page by showing you the title, description and an image.

Because you can post different types of links to Twitter like images and videos there are different types of Twitter cards you can have, one will give you a snippet of the page, another will display an image, the last one is a media play to play music or video.

Which type of card that is displayed can also be defined by a meta tag.

<meta name="twitter:card" content="summary">

To display a snippet of the page the value of the content attribute will need to be summary. For an image the value will need to be changed to photo. To change this to display the media player for a video or music set the value to be player.

Twitter Card Meta Tags

There are different meta tags you can use depending on the type of Twitter card you are using.

Summary Card

  • twitter:card - The card type, which will be one of "summary", "photo", or "player".
  • twitter:url - Canonical URL of the card content.
  • twitter:title - The title of your content as it should appear in the card.
  • twitter:description - A description of the content in a maximum of 200 characters.
  • twitter:image - A URL to the image representing the content.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta name="twitter:url" content="http://www.paulund.co.uk">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page Description">
<meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Photo Card

  • twitter:card - Set this value to photo
  • twitter:url - Canonical URL of the card content.
  • twitter:title - The title of your content as it should appear in the card.
  • twitter:description - A description of the content in a maximum of 200 characters.
  • twitter:image - A URL to the image representing the content.
  • twitter:image:width - Define the original width of the image, this may not be the size Twitter use to display it but it will help twitter keep the aspect ratio of the image if it needs to resize the image.
  • twitter:image:height - Define the original height of the image.
<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta name="twitter:url" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
<meta name="twitter:title" content="Image Title">
<meta name="twitter:description" content="Image Description">
<meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
<meta name="twitter:image:width" content="500">
<meta name="twitter:image:height" content="500">

Player Card

  • twitter:card - Set this value to player
  • twitter:url - Canonical URL of the card content.
  • twitter:title - The title of your content as it should appear in the card.
  • twitter:description - A description of the content in a maximum of 200 characters.
  • twitter:image - A URL to the image to be used as the thumbnail of the video
  • twitter:player - The URL of the player
  • twitter:player:stream - The URL of the video to stream on the player
  • twitter:player:width - The width of the IFRAME to display the player
  • twitter:player:height - The height of the IFRAME to display the player
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:url" content="http://www.paulund.co.uk/example-video.mp4">
<meta name="twitter:title" content="Title Of Video">
<meta name="twitter:description" content="Description of the video">
<meta name="twitter:image" content="http://example.com/example-video-thumbnail-image.jpg">
<meta name="twitter:player" content="https://www.paulund.co.uk/example-player">
<meta name="twitter:player:stream" content="http://www.paulund.co.uk/example-video.mp4">
<meta name="twitter:player:width" content="500">
<meta name="twitter:player:height" content="250">

Facebook Open Graph Tags

If you are already using the Facebook open graph tags then you will have something like this in the head of your HTML.

<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Because the Twitter cards meta tags were based on the open graph tags, Twitter will actually use these as a fall back. It will first search for the Twitter card tags, if they are not there then it will search for the open graph tags and use them for the title, description and images. This is so you don't need to duplicate the tags with the same information as the open graph tags.

This means that you can have this in the head of your website and it will search work perfectly fine.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

To view updated information about the Twitter card visit the Twitter documentation.

Twitter Cards

This article was originally published on Add Twitter Cards To Your Website. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/add-twitter-cards-to-your-website/feed 0 Absolute Center Images With CSS http://www.paulund.co.uk/absolute-center-images-with-css http://www.paulund.co.uk/absolute-center-images-with-css#comments Tue, 07 May 2013 08:06:49 +0000 Paul http://www.paulund.co.uk/?p=6966 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 [...]

This article was originally published on Absolute Center Images With CSS. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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;
}

Center Images On Horizontal and Vertical

Setting the image to be center on the horizontal is easy you just need to set an auto on the left and right margin. But to set the image on the vertical and on the horizontal you need to set the margin on the top and left of the element.

The following technique is something you can use to display a pop-up window to show an image gallery in the center of the screen.

This example will center the image with a width of 250px, first to set the image to be absolute positioned and set the top and left property to be 50%. This will position the image in the middle of screen, but the image won't be exactly center. 

img {
   height: 250px;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 250px;
}

The top left corner of the image will be the exact center of the screen, to move this point to the center of the image we need to move the image half it's width and half it's height. To move the image on half it's width and half it's height you need to add a margin-top which is negative half the height of the image and a margin-left which is negative half the width of the image.

img {
   height: 250px;
   left: 50%;
   margin-top: -125px;
   margin-left: -125px;
   position: absolute;
   top: 50%;
   width: 250px;
}

This article was originally published on Absolute Center Images With CSS. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/absolute-center-images-with-css/feed 0 Validate Featured Image On Post http://www.paulund.co.uk/check-a-featured-image-is-set-before-publishing http://www.paulund.co.uk/check-a-featured-image-is-set-before-publishing#comments Mon, 06 May 2013 08:59:34 +0000 Paul http://www.paulund.co.uk/?p=6975 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 [...]

This article was originally published on Validate Featured Image On Post. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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' );

Set Featured Image

There is a meta box on the post screen where you can set an image to be the featured image on the post.

featured_post

Display The Featured Image

To display the featured image on your WordPress theme you need to use the function the_post_thumbnail(), but first you need to check if the post currently has a thumbnail image by using the has_post_thumbnail().

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail();
}

Validate Featured Image On Post

If you theme requires that a post has a featured image then you need to make sure that your post has a featured image before you allow your users to publish the post.

If you need to validate a post you can do this on the saving the post action save_post, this action will be ran when you save the current post.

For us to validate this correctly we need to to check if the post has a post thumbnail by using the has_post_thumbnail() function. If the post doesn't have a post thumbnail then we need to set the post back to be a draft status and display an error message on the screen.

Validate Post Thumbnail

The following code can be used to validate the post thumbnail.

This code will run on the save action of the post, first we check that the post type is for a post. If the post type is not a post then we return from the function so we don't continue.

Then we check to see if the post has a thumbnail if it doesn't have a thumbnail then we set a new transient so that we can display an error message. Then we reset the post status to draft so the post doesn't displayed on the website. If the post has a thumbnail then we can just delete the transient so the error message isn't displayed anymore.

add_action('save_post', 'pu_validate_thumbnail');
function pu_validate_thumbnail($post_id)
{
    // Only validate post type of post
    if(get_post_type($post_id) != 'post')
        return;
 	// Check post has a thumbnail
    if ( !has_post_thumbnail( $post_id ) ) {
    	// Confirm validate thumbnail has failed
        set_transient( "pu_validate_thumbnail_failed", "true" );
        // Remove this action so we can resave the post as a draft and then reattach the post
        remove_action('save_post', 'pu_validate_thumbnail');
        wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));
	add_action('save_post', 'pu_validate_thumbnail');
    } else {
    	// If the post has a thumbnail delete the transient
        delete_transient( "pu_validate_thumbnail_failed" );
    }
}

Next we use the admin_notices action to display an error message if the transient is set. Once the message is displayed then we can delete the transient.

add_action('admin_notices', 'pu_validate_thumbnail_error');
function pu_validate_thumbnail_error()
{
    // check if the transient is set, and display the error message
    if ( get_transient( "pu_validate_thumbnail_failed" ) == "true" ) {
        echo "
<div id='message' class='error'>
<strong>A post thumbnail must be set before saving the post.</strong>
</div>
";
        delete_transient( "pu_validate_thumbnail_failed" );
    }
}

When you save the post and it doesn't have a featured image then you will see the post is set back to a draft and an error message is displayed on the screen.

This article was originally published on Validate Featured Image On Post. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/check-a-featured-image-is-set-before-publishing/feed 0 Free Premium Files For May 2013 http://www.paulund.co.uk/free-premium-files-for-may-2013 http://www.paulund.co.uk/free-premium-files-for-may-2013#comments Wed, 01 May 2013 18:04:23 +0000 Paul http://www.paulund.co.uk/?p=7419 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 [...]

This article was originally published on Free Premium Files For May 2013. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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

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

Skywalker - Powerful Template for Joomla!

Skywalker - Powerful Template for Joomla!

95 purchases at the price of $40.

The man behind the T3 Framework Wikies proudly presents Skywalker for Joomla! 2.5! My first template on Themeforest! A powerful and fully featured template and featuring all the things you need.

Skywalker template comes with real Quickstart Installation Pack for Joomla! 2.5 and is a unique template, with consistent typography, no one million colors or unlimited features, just simple to use features packed up and ready for you!

  • Unique, XHTML valid and typographically consistent design.
  • Skitter Slider the best javascript based slider for Joomla!.
  • K2 Content Component used for the Blog Page.
  • GK News Show Pro with awesome styling.
  • Ajax search with awesome styling.
  • The Piecemaker 2 – my own extension, the smartest out there.
  • DNP Tabs – my own smart tabs module for Joomla!, light and very easy to use.
  • Simple Blank Module – my own extension for using custom code snipets.
  • Google Maps Plugin support.
  • Custom Form Elements – another unique feature powered by CSS3 & jQuery, to add more style to your checkboxes, radio boxes and select elements.
  • DNP White Social Icons – Custom Social Icons to match the template design.
  • Link Cooltips – hovering links the titles look great finally.
  • 8 styles based on beautiful colors: turquoise blue, green, orange, yellow, red, purple, magenta, grey.
  • Fullscreen Background Images with AJAX load.
  • Custom error and offline pages.
  • Beautiful CSS3 powered typography with price tables, bubbles, blockquotes, lists and everything you need for your content.
  • 30+ Module Positions on 3 very flexible desktop layouts.
  • jQuery 1.7 minimized included & running in “no-conflict” mode for various template features and your code snipets.
  • Mobile Ready Layouts – reforged of course – demo here
  • Smooth scroll to top – a unique feature that can be used to create navigation for one page website.
  • A new Tools top panel jQuery powered easy to customize for your needs.
  • Various code snipets with the Joomla! 2.5 Quickstart
  • Automatic Adjustments to enhance template typography
  • Complete Documentation
  • Forum Support
  • That’s it ?!

Get It Free Now

HIGH QUALITY - TEXT ANIMATED CONTENT AD - 300x250

HIGH QUALITY - TEXT ANIMATED CONTENT AD - 300x250

546 purchases at the price of $3.

This ist the first Series of professional Advertising Banner on activeden. You get an easy to customize 300×250px Content Ad.

This is just typo animation, so you can put your own logo and you own text.

Everything is xml based, you so can individualize this banner in the way you want without flash or actionscript knowledge.

Get It Free Now

Determination

AudioJungle

24 purchases at the price of $13.

Determination is an uplifting and motivational track, designed for business or corporate projects such as presentations or advertising!

The track begins with a subtle, emotive piano loop that continues throughout the piece, as a staccato violin section introduces an inspiring and positive repeating pattern. A steady, punchy drum beat evolves throughout the track, while everything is held together with a simple, solid bass line and electric guitars provide a powerful chord progression throughout the piece.

Modern production techniques keep the track sounding fresh, and perfect for a number of uses. Includes a 320 mp3 and 16-bit wav.

Get It Free Now

Creative Minds

Creative Minds

156 purchases at the price of $20.

Top quality design, full customization and video instructions will help improve your styling. The best thing is that you don’t need 3rd party plug-ins.

  • 5 Image placeholders
  • 11 Text placeholders
  • Logo placeholder
  • 9 Background’s
  • Original sountrack, included in project!
  • Every project element customizable
  • Detailed video help
  • No plug-ins
  • Full HD – 1920×1080 – 24fps (Instructions included how to change these settings if needed)
  • Font can be downloaded free at http://www.dafont.com/geek-a-byte.font

Get It Free Now

Business eNewsletter Design

Business eNewsletter Design

82 purchases at the price of $3.

  • Fully layered 12 .PSD file
  • Easy to customize :colors, sets of news
  • Proffesional and clean style
  • Juicy colours
  • Made in 6 colour versions and in 2 layout options
  • Perfect for business use like mobile apps but not only :)
  • Easy to code, dedicates to table or div coding
  • All layers are fully editable and organized in groups
  • All you need to do is just change text and pictures
  • Fonts used (not included): Arial, Helvetica Neue LT Std, Helvetica Inserat LT Std

Get It Free Now

Lowpoly Wrench

Lowpoly Wrench

0 purchases at the price of $4.

This is Lowpoly Wrench, Model has 218 Tris and texture map 256-256

Get It Free Now

Beautiful Woman Wearing Jewellery

beautiful woman wearing jewelry, very clean image with copy space

15 purchases at the price of $5.

Get It Free Now

This article was originally published on Free Premium Files For May 2013. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/free-premium-files-for-may-2013/feed 0 Disable Scroll Wheel Zoom On Google Maps http://www.paulund.co.uk/disable-scroll-wheel-zoom-on-google-maps http://www.paulund.co.uk/disable-scroll-wheel-zoom-on-google-maps#comments Wed, 01 May 2013 07:02:13 +0000 Paul http://www.paulund.co.uk/?p=7377 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 [...]

This article was originally published on Disable Scroll Wheel Zoom On Google Maps. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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.

In version V3 of Google Maps API, Google introduced a new parameter to turn off the mouse wheel from zooming on your map. Turning this feature off means you will now be able to scroll on the page even when your mouse is over the map. This means that the only way to zoom on your map will be to use the zoom controls on the left side of the map.

The parameter that you need to add to disable the scroll wheel is called scrollwheel, setting this to false will disable the feature.

scrollwheel: false

This parameter is defined in the maps options when you create the new map object.

var mapOptions = {
	zoom: 10,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	scrollwheel: false
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);

This article was originally published on Disable Scroll Wheel Zoom On Google Maps. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/disable-scroll-wheel-zoom-on-google-maps/feed 0 Always Get A Checkbox $_POST Value http://www.paulund.co.uk/always-post-checkbox-value http://www.paulund.co.uk/always-post-checkbox-value#comments Tue, 30 Apr 2013 09:19:17 +0000 Paul http://www.paulund.co.uk/?p=6978 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 [...]

This article was originally published on Always Get A Checkbox $_POST Value. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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.

If you don't set a value of the checkbox then when the checkbox is checked and the form is submitted the value will come through as on. You can change this by setting the value attribute on your checkbox.

<input type="checkbox" name="checkbox1" value="1" />

But because there is no unchecked value we won't know if this checkbox isn't checked. This is where the hidden element will be useful.

<input type="checkbox" name="checkbox1_checkbox" id="checkbox1_checkbox" />
<input type="hidden" name="checkbox1" value="0" />

When we submit these elements we will now always get the hidden element checkbox1 but may or may not get the element checkbox1_checked depending on if the checkbox is checked. The problem we have now is that we need to find a way of changing the value in the hidden field once the checkbox has been clicked, which can be done with the following Javascript.

$('input[type="checkbox"]').on('change', function(e){
        if($(this).prop('checked'))
        {
            $(this).next().val(1);
        } else {
            $(this).next().val(0);
        }
});

This Javascript will be applied to all checkboxes, on the click event of each checkbox we see if the checkbox is currently checked. If it is checked then we get the next element (which should be the hidden field) and change the value to our checked value. If the checkbox is not checked then we get the hidden field and change the value to the unchecked state.

Now when we post the form we will always get the true checkbox value even if the checkbox isn't checked. This will allow us to create a dynamic form with checkboxes and know if they have been checked or unchecked.

This article was originally published on Always Get A Checkbox $_POST Value. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/always-post-checkbox-value/feed 0 Display A List Of Authors On WordPress http://www.paulund.co.uk/display-a-list-of-authors http://www.paulund.co.uk/display-a-list-of-authors#comments Mon, 29 Apr 2013 08:23:42 +0000 Paul http://www.paulund.co.uk/?p=6940 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 [...]

This article was originally published on Display A List Of Authors On WordPress. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> 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
*/


The next thing we need to do is get a list of all users on the WordPress site that could write a post. This is all the users apart from the users with the subscriber role, the best way of getting a list of all users is to use the function get_users().

This will return an array of all users on your site, it takes a number of different parameters such as:

  • blog_id - The current blog's ID, unless multisite is enabled and another ID is provided
  • role - Limit the returned authors to the role specified.
  • include - An array of IDs. Only users matching these IDs will be returned.
  • exclude - An array of IDs. Users matching these IDs will not be returned, regardless of the other arguments.
  • meta_key - The meta_key in the wp_usermeta table for the meta_value to be returned.
  • meta_value - The value of the meta key.
  • meta_compare - Operator to test the 'meta_value'. Possible values are '!=', '>', '>=', '<', or '<='. Default value is '='.
  • meta_query - A WP_Query style multiple meta_key/meta_value array.
  • orderby - Sort by 'ID', 'login', 'nicename', 'email', 'url', 'registered', 'display_name', or 'post_count'.
  • order - ASC (ascending) or DESC (descending).
  • offset - The first n users to be skipped in the returned array.
  • search - Use this argument to search users by email address, URL, ID or username (this does not currently include display name).
  • number - Limit the total number of users returned.
  • count_total - False by default.
  • fields - Which fields to include in the returned array. Default is "all". If set to 'all_with_meta', returns an array of WP_User objects keyed by ID.
  • who - If set to 'authors', only authors (user level greater than 0) will be returned.

The parameters that we are going to be using is the orderby and order parameters. This is because we are going to use the orderby parameter to display the authors in order of the amount of posts they have wrote. Then we are going to use the order parameter to order the users is DESC order to display the the user with the most posts first.

The other parameter that we could use is the role parameter to bring a back users with a specific role, or we can leave this blank to bring back all users. For this author list we want to display all users except for users with the subscriber role, so we are going to leave this blank and return all users.

$allUsers = get_users('orderby=post_count&order=DESC');

As we have all the users we need to filter these and remove the users with the subscriber role, this can easily be done by looping through all the users, checking their role and creating a new array for user's which are not subscribers.

$users = array();
// Remove subscribers from the list as they won't write any articles
foreach($allUsers as $currentUser)
{
	if(!in_array( 'subscriber', $currentUser->roles ))
	{
		$users[] = $currentUser;
	}
}

Now we have a new $users array which is populated with all users which are not subscribers, we can now loop through this array to display each user on the page.

The user information we are going to display is the user name, user image, a link to all their posts, author description and links to add author meta information.

<?php
foreach($users as $user)
{
	?>
<div class="author">
<div class="authorAvatar"></div>
<div class="authorInfo">
<h2 class="authorName"></h2>
<p class="authorDescrption"></ p>
<p class="authorLinks"></ p>
<p class="socialIcons"></ p>
		</div>
</div>
<?php
}
?>

Display Author Avatar

To display the author avatar we can use the author email with the function get_avatar() to display the author avatar.

<div class="authorAvatar">
	<?php echo get_avatar( $user->user_email, '128' ); ?>
</div>

Display Author Name

To display the author name we can use a property value on the user object we are looping through by using $user->display_name;

<h2 class="authorName"><?php echo $user->display_name; ?></h2>

Display Author Description

To display the author description we can use the function get_user_meta() to get the author description.

<p class="authorDescrption"><?php echo get_user_meta($user->ID, 'description', true); ?>

Link To All Author Posts

To display a link to all the author posts you can use the function get_author_posts_url().

<p class="authorLinks"><a href="<?php echo get_author_posts_url( $user->ID ); ?>">View Author Links</a>

Display Other User Meta Information

You can assign new contact information to your users which you can display on the author list by using the function get_user_meta(). In this tutorial we are using this function to display links to the user different social media profiles.

<p class="socialIcons">
<ul>
	<?php
	$website = $user->user_url;
	if($user->user_url != '')
	{
		printf('
<li><a href="%s">%s</a></li>
', $user->user_url, 'Website');
	}
	$twitter = get_user_meta($user->ID, 'twitter_profile', true);
	if($twitter != '')
	{
		printf('
<li><a href="%s">%s</a></li>
', $twitter, 'Twitter');
	}
	$facebook = get_user_meta($user->ID, 'facebook_profile', true);
	if($facebook != '')
	{
		printf('
<li><a href="%s">%s</a></li>
', $facebook, 'Facebook');
	}
	$google = get_user_meta($user->ID, 'google_profile', true);
	if($google != '')
	{
		printf('
<li><a href="%s">%s</a></li>
', $google, 'Google');
	}
	$linkedin = get_user_meta($user->ID, 'linkedin_profile', true);
	if($linkedin != '')
	{
		printf('
<li><a href="%s">%s</a></li>
', $linkedin, 'LinkedIn');
	}
?>
</ul>

By putting the above code inside the loop you can display all the information you need to show your visitors all about the authors of your blog.

Full Page Template

Here is the full page template you can use on theme.

<?php
/*
Template Name: Display Authors
*/
// Get all users order by amount of posts
$allUsers = get_users('orderby=post_count&order=DESC');
$users = array();
// Remove subscribers from the list as they won't write any articles
foreach($allUsers as $currentUser)
{
	if(!in_array( 'subscriber', $currentUser->roles ))
	{
		$users[] = $currentUser;
	}
}
?>
<?php get_header(); ?>
<section class="content" role="main">
	<?php
		printf('
<h1>%s</h1>
', the_title());
		foreach($users as $user)
		{
			?>
<div class="author">
<div class="authorAvatar">
					<?php echo get_avatar( $user->user_email, '128' ); ?>
				</div>
<div class="authorInfo">
<h2 class="authorName"><?php echo $user->display_name; ?></h2>
<p class="authorDescrption"><?php echo get_user_meta($user->ID, 'description', true); ?>
<p class="authorLinks"><a href="<?php echo get_author_posts_url( $user->ID ); ?>">View Author Links</a>
<p class="socialIcons">
<ul>
							<?php
								$website = $user->user_url;
								if($user->user_url != '')
								{
									printf('
<li><a href="%s">%s</a></li>
', $user->user_url, 'Website');
								}
								$twitter = get_user_meta($user->ID, 'twitter_profile', true);
								if($twitter != '')
								{
									printf('
<li><a href="%s">%s</a></li>
', $twitter, 'Twitter');
								}
								$facebook = get_user_meta($user->ID, 'facebook_profile', true);
								if($facebook != '')
								{
									printf('
<li><a href="%s">%s</a></li>
', $facebook, 'Facebook');
								}
								$google = get_user_meta($user->ID, 'google_profile', true);
								if($google != '')
								{
									printf('
<li><a href="%s">%s</a></li>
', $google, 'Google');
								}
								$linkedin = get_user_meta($user->ID, 'linkedin_profile', true);
								if($linkedin != '')
								{
									printf('
<li><a href="%s">%s</a></li>
', $linkedin, 'LinkedIn');
								}
							?>
						</ul>
</div>
</div>
			<?php
		}
	?>
</section>
<?php get_footer(); ?>

This article was originally published on Display A List Of Authors On WordPress. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe Learn Web Design, Coding & much More! 100% Off First Month.

]]> http://www.paulund.co.uk/display-a-list-of-authors/feed 0