Paulund http://www.paulund.co.uk Paulund | WordPress, PHP, CSS, HTML5 Mon, 21 Apr 2014 09:21:50 +0000 en-US hourly 1 http://wordpress.org/?v=3.9 Remove Query String From Stylesheets In WordPress http://www.paulund.co.uk/remove-query-string-stylesheets http://www.paulund.co.uk/remove-query-string-stylesheets#comments Mon, 21 Apr 2014 08:38:49 +0000 http://www.paulund.co.uk/?p=10397 A website owner should always be trying to improve the speed of their website as much as possible. In WordPress there are many things you can do to help improve the performance of your website. Tips to improve the performance of your WordPress website When you run your website through speed tests such as Google Page Speed test one of the things they will flag up is the loading static

The post Remove Query String From Stylesheets In WordPress appeared first on Paulund.

]]>
A website owner should always be trying to improve the speed of their website as much as possible. In WordPress there are many things you can do to help improve the performance of your website.

Tips to improve the performance of your WordPress website

When you run your website through speed tests such as Google Page Speed test one of the things they will flag up is the loading static content with query strings, such as stylesheets and JavaScript files.

This is a problem as many proxies will not cache the resources if it has a querystring in the URL. A tip on the Google best practice pages is to remove all query strings from your static resources to enable proxy caching of the file.

The problem with WordPress is whenever it includes a script or a stylesheet by using the wp_enqueue_style or wp_enqueue_script function it will include a querystring for the version of the file. Both of these functions have a version parameter which allows the developer to append any version number that they want to the querystring, if the version number doesn't exist in the function then WordPress will append the WordPress version to the end of the URLs.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

When using these functions you can make sure that a version number is not added to URL by passing a NULL value on the version parameter.

The reason why WordPress adds a version number to the end of the URLs is for updates, once WordPress is updated to a new version then this new version number will be added to the end of the URL. If any of the JavaScript or stylesheet files have changed in this update then the new version number will ensure that the browser fetches the latest version and not the version stored in the browser cache.

There are a lot of scripts that are added to your website that you can not control, for example with any plugins that you have installed might add new stylesheet and javascript files to your website. You don't want to have to go through these wp_enqueue handles and remove them. The following code snippet will use a filter that will allow you to change the script URLs before they are output to the page.

Removing these query strings will ensure that the proxy can cache these resources and therefore speeding up the loading time of your website.

function pu_remove_script_version( $src ){
    if ( stripos( $src, '?ver=' ) ) {
        $scripts = explode( '?', $src );
        return $scripts[0];
    } else {
        return $src;
    }
}

add_filter( 'script_loader_src', 'pu_remove_script_version' );
add_filter( 'style_loader_src', 'pu_remove_script_version' );

The post Remove Query String From Stylesheets In WordPress appeared first on Paulund.

]]>
http://www.paulund.co.uk/remove-query-string-stylesheets/feed 0
File_Exists For Remote URL http://www.paulund.co.uk/file_exists-remote-url http://www.paulund.co.uk/file_exists-remote-url#comments Wed, 16 Apr 2014 07:54:38 +0000 http://www.paulund.co.uk/?p=10482 If you want to make sure that a file exists in PHP you can use the function file_exists(), which takes one parameter of the filename. This function will not only work for files but will also work for directories, you can pass in a filename of the directory and if this directory exists the file_exists() function will return true. The problem I've seen with this function is that people have

The post File_Exists For Remote URL appeared first on Paulund.

]]>
If you want to make sure that a file exists in PHP you can use the function file_exists(), which takes one parameter of the filename.

// Returns true if the file exists
file_exists( $filename );

This function will not only work for files but will also work for directories, you can pass in a filename of the directory and if this directory exists the file_exists() function will return true.

<?php
$filename = '/path/to/foo.txt';

if (file_exists($filename)) {
    echo "The file $filename exists";
} else {
    echo "The file $filename does not exist";
}
?>

The problem I've seen with this function is that people have tried to use it when they want to see if a remote file exists using a URL. But if you try to search for a file exists using this function with a URL it will not work correctly, the function will always return false.

If you want to check if the file_exists() with a remote URL you need to make a HTTP request for this file and check what the HTTP header status are when the request returns.

Get Headers Of A URL

To get the headers of a remote file then you can use the PHP function of get_headers(). This takes a parameter of the URL you want to request and it will return an array of the headers returned. The first key of the array is the value we are interested in, this will return the header status of the HTTP. If the file exists the status will return a 200 code, if the remote file doesn't exist then the status will return a 404 error.

This means we can use function to check if the remote file exists.

$file_headers = @get_headers($url);
if($file_headers[0] == 'HTTP/1.0 404 Not Found')
{
   $file_exists = false;
} else {
   $file_exists = true;
}

The post File_Exists For Remote URL appeared first on Paulund.

]]>
http://www.paulund.co.uk/file_exists-remote-url/feed 0
Getting Started With SASS http://www.paulund.co.uk/getting-started-sass http://www.paulund.co.uk/getting-started-sass#comments Tue, 15 Apr 2014 07:59:24 +0000 http://www.paulund.co.uk/?p=10301 If you do any front-end development over the past couple of years then you would of heard of CSS pre-processors. The most common CSS pre-processors are SASS, LESS, or Stylus. CSS pre-processors are scripts that will compile code and output the results into CSS stylesheets. They allow you to create more dynamic, optimized and organised CSS for your websites. In this article I am going to investigate what it is

The post Getting Started With SASS appeared first on Paulund.

]]>
If you do any front-end development over the past couple of years then you would of heard of CSS pre-processors. The most common CSS pre-processors are SASS, LESS, or Stylus.

CSS pre-processors are scripts that will compile code and output the results into CSS stylesheets. They allow you to create more dynamic, optimized and organised CSS for your websites.

In this article I am going to investigate what it is like to get started using SASS and if it really helps with creating your CSS stylesheets.

SASS

Sass Logo

Installing SASS

SASS uses ruby gems packages to perform the scripts that it needs to compile the code into stylesheets. Therefore before you do anything with SASS you need to install the ruby packages on your operating system.

If you're using a distribution of Linux, you'll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.

If you're using a Mac then the Ruby packages you need already come installed so no need to do anything.

If you're using a Windows machine then you can install ruby using the ruby installer, that will install everything for you with one click.

Ruby Installer

SASS Applications

Using SASS to compile the stylesheet can be done on the command line but you can get applications that act as file watchers that will know when you make code changes to your SASS files, when a change is made the application will notice this and compile the SASS files to output the CSS stylesheet which you can use on your website.

Here are some of the most popular SASS applications.

Codekit

codekit

Codekit

Compass.app

compass

Compass.app

Koala

koala

Koala App

LiveReload

livereload

LiveReload

Prepros

prepros

Prepros

Advantages Of Using SASS

With all this extra work to create your stylesheets there must be some really good reasons to use it. In this article we are going to look at the advantages of using a pre-processor like SASS and how they can be used to improve the CSS that you write and reduce the amount of style that you actually need to write.

Variables

CSS variable don't currently exist in normal CSS, recently Firefox has been playing around with CSS variables but you can't use them on other browser so we're not quite there yet, for now we need to continue using a pre-processor.

Variables are a way of storing values so that you can reuse these elsewhere in your script. This will allow you to create generic values for padding or margins and reuse these same values elsewhere in your website. The benefit of variables is that if you need to change these then you only have to make the change in one place.

If you have done any programming in other languages then you will be familiar with the way variables work and in SASS they work exactly the same way.

$marginTop: 30px;
$marginBottom: 50px;

p
{
  margin: $marginTop 0 $marginBottom;
}

.content-area
{
  margin-top: $marginTop;
  margin-bottom: $marginBottom;  
}

This is a very simple example of how you can keep consistency in your designs by using the same values for your margins, so if you ever want to change the design and reduce the margin then you only have to do this in one place and it will change your entire site.

When this is compiled into CSS it will output the stylesheet like this.

p
{
  margin: 30px 0 50px;
}

.content-area
{
  margin-top: 30px;
  margin-bottom: 50px;  
}

Nesting

With HTML you can nest tags within other HTML tags, then you can target these nested tags in your CSS by using both selectors.

.header .navigation
{
  // style navigation in the header
}

When you have a lot of nested tags this can get become hard to follow in your CSS, with SASS it allows you to nest these selectors to give you a logical hierarchy for the selectors.

.header
{
  .navigation
  {
    // style navigation in the header
  }
}

When this is compiled it will output the exact same code as above, you don't really see the benefit of nesting in an example without much code so we shall add some more selectors to style the ul, li, a within the header navigation.

.header
{
  .navigation
  {
    // style navigation in the header
    ul
    {
      // style UL inside the navigation
    }

    li
    {
      // style list items in navigation
      a
      {
        // style links in list item
      }
    }
  }
}

This will output the compiled code in the normal CSS selectors.

.header .navigation
{
  // style navigation in the header
}

.header .navigation ul
{
  // style UL inside the navigation
}

.header .navigation li
{
  // style list items in navigation
}

.header .navigation li a
{
  // style links in list item
}

Partials

One of the problems I find with my CSS is organisation in the file, it's not great practice to split up your CSS files into different sections and include these separately. There are two ways we will need to include these, you can do this by using a new link tag for each style sheet.

<link rel="stylesheet" href="header.css" type="text/css" media="all" />
<link rel="stylesheet" href="main-content.css" type="text/css" media="all" />
<link rel="stylesheet" href="sidebar.css" type="text/css" media="all" />
<link rel="stylesheet" href="footer.css" type="text/css" media="all" />

But this will create a lot of extra HTTP requests on each page and will slow down your site. The other option is to use the @import function inside your CSS files to include a stylesheet inside another stylesheet. This again is bad practice as it will make further HTTP request calls to include the file into your stylesheet.

With SASS you can use partials to create new .scss files with all the styling for your website, then you can include these into your SASS file.

Within your SASS file you can use the following @import keyword to include the styles.

@import 'scss/_fonts';
@import 'scss/_generic';
@import 'scss/_header';
@import 'scss/_maincontent';

When the stylesheet is being compiled it will now include the styles in the output and place all these in one file, therefore causing no additional HTTP requests.

When you import these partials into the SASS file you will need to use the file format of scss.

Functions

SASS allows you to create functions in your SCSS files these are similar to functions that you find in other programming languages, as you can call these from anywhere in your SCSS files and it will print the return of the function.

These are really useful if you find yourself writing the same things again and again. Functions in SCSS files are called mixins and just like functions in other languages they allow you to pass in a number of arguments to change the value of the output of the mixin.

Again with this you only see the real benefit when you have a real world example to see how you can use this. In this example we will create a box shadow mixin that we can then reuse on any element that we want a shadow on. If you want to support older browsers then you will have to add prefixes to your shadow property. Therefore we can create a mixin that we can use so we don't need to add every prefix next time we want to add a shadow.

@mixin create-box-shadow($horizontal, $vertical, $blur, $spread, $colour) 
{
  -webkit-box-shadow: $horizontal $vertical $blur $spread $colour;
  -moz-box-shadow: $horizontal $vertical $blur $spread $colour;
  box-shadow: $horizontal $vertical $blur $spread $colour;
}

We can now use this on any element we want to add a shadow, by using the @include operator.

h1
{
   @include create-box-shadow(10px, 20px, 5px, 0, #000);
}

h2
{
   @include create-box-shadow(15px, 15px, 5px, 0, #000);
}

h3
{
   @include create-box-shadow(10px, 10px, 0, 0, #000);
}

With just one line we've added a box shadow to these 3 elements with prefixes, another benefit of doing this with a mixin is that when all prefixes are removed from the browsers we can simply update our mixin by removing the prefixes.

@mixin create-box-shadow($horizontal, $vertical, $blur, $spread, $colour) 
{
  box-shadow: $horizontal $vertical $blur $spread $colour;
}

Therefore we only have to change this in one place and it will update the code everywhere in your stylesheet.

Another benefit of using a mixin for something like this is that we can add additional properties to this mixin that will be used by all shadows, we can also use operators to have variable values for the properties. For example as we are adding a shadow to these elements we might need to add additional spacing above and below the elements to make sure that the shadow doesn't move over other elements. But because we are using a mixin with arguments the size of the shadow can be different, therefore we need to work out the top and bottom margin from the vertical value of the shadow.

The following code will take the vertical property, multiple it by 2 and use this value as the margin top and margin bottom property.

@mixin create-box-shadow($horizontal, $vertical, $blur, $spread, $colour) 
{
  box-shadow: $horizontal $vertical $blur $spread $colour;
  margin: ($vertical * 2) 0;
}

On the header elements this will now compile the stylesheet to the following.

h1
{
  box-shadow:10px 20px 5px 0 #000;
  margin:40px 0
}

h2
{
  box-shadow:15px 15px 5px 0 #000;
  margin:30px 0
}

h3
{
  box-shadow:10px 10px 0 0 #000;
  margin:20px 0
}

Maths Operators

Above we saw how you can use multiple to change the values inside a mixin but we can also use other maths operators %, +, -, * and / in your values which come in handy when creating a grid system.

.grid-1
{
  width: 100% / 12;
}
.grid-2
{
  width: (100% / 12) * 2;
}
.grid-3
{
  width: (100% / 12) * 3;
}
.grid-4
{
  width: (100% / 12) * 4;
}
.grid-5
{
  width: (100% / 12) * 5;
}
.grid-6
{
  width: (100% / 12) * 6;
}
...

We have now got classes that we can use for a grid system on our site, even better than using this would be to create a new mixin grid-column so we can change the guttering and margins for the columns.

@mixin grid-column($column) 
{
  width: (100% / 12) * $column;
  margin: 0 10px;
  padding: 0 10px;
}
.grid-1
{
  @include grid-column(1);
}
.grid-2
{
  @include grid-column(2);
}
.grid-3
{
  @include grid-column(3);
}
.grid-4
{
  @include grid-column(4);
}
.grid-5
{
  @include grid-column(5);
}
.grid-6
{
  @include grid-column(6);
}
...

Extending / Inheritance

One of the best features of SASS is the ability to inherit the styles from another selector and share this with another, allowing you to cut down on the amount of the styles that you need to write. This is similar to grouping selectors in CSS allowing selectors to share the same styles.

h1, h2, h3, h4, h5, h6
{
  margin-bottom:30px;
}

We can use inheritance in the above grid example to improve the output code, in this example we have the margin and the padding inside the mixin, which means on the output code the margin and padding will each be added inside the each of the different grid classes. For our SASS file this is obviously fine because we still only have to add this property once, but in the compiled output we have the margin and padding defined on each grid column, when we should be grouping them as they are always going to be the same value.

We can group these selectors by using SASS inheritance, this is done by creating a style that we can reuse and then using the @extend keyword on the styles where we want to inherit this.

@mixin grid-column($column) 
{
  width: (100% / 12) * $column;
}
.grid
{
  margin: 10px;
  padding: 0 10px;
}
.grid-1
{
  @include grid-column(1);
  @extend .grid;
}
.grid-2
{
  @include grid-column(2);
  @extend .grid;
}
.grid-3
{
  @include grid-column(3);
  @extend .grid;
}
.grid-4
{
  @include grid-column(4);
  @extend .grid;
}
.grid-5
{
  @include grid-column(5);
  @extend .grid;
}
.grid-6
{
  @include grid-column(6);
  @extend .grid;
}

This will now group all the selectors that extend .grid with the .grid selector compiling the stylesheet as.

.grid,.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6
{
  margin:10px;
  padding:0 10px
}
.grid-1{width:8.333%}
.grid-2{width:16.667%}
.grid-3{width:25%}
.grid-4{width:33.333%}
.grid-5{width:41.667%}
.grid-6{width:50%}
...

Referencing Parent Selectors

There are times when you need to style an element using pseudo classes such as the hover element on a link. You need to style anchor tags and then you might want to change this styling for the hover event. In SASS you can use nested selectors, and we can reference parent selector by using an & in the selector. Therefore we can nest the hover event inside the anchor tag styling.

a 
{
  text-decoration: none;
  
  &:hover 
  {
    font-weight: bold; 
    text-decoration: underline; 
  }

  &:active
  {
    color: blue;
  }
}

Color Functions

One of my favourite features of SASS is the ability to change the shade of colours by using the lighten or darken functions. These functions take 2 parameters, the first is the starting point for the color the second is the amount of change you want to apply. For example you can have a starting color of black and return a color value 20% lighter.

.button
{
  background: #000;
  &:hover
  {
    background: lighten(#000, 20%);
  }
}

There are lots more color functions that you can use with SASS but I found that lighten and darken was the functions I used most, the other functions include:

  • rgb()
  • mix()
  • saturation()
  • greyscale()
  • invert()

SASS Color Functions

These are just some of the features and advantages that you get with SASS, hopefully from these show you the advantages that you can get with using SASS. With the advantages of partials for organisation and mixin for the use of functions and variables, hopefully this shows how you can increase the efficiency, future proof your CSS and still allowing you reuse the styles you have created.

Try it out for yourself on your next project.

SASS

The post Getting Started With SASS appeared first on Paulund.

]]>
http://www.paulund.co.uk/getting-started-sass/feed 0
Sticky Posts In WordPress http://www.paulund.co.uk/post-sticky http://www.paulund.co.uk/post-sticky#comments Mon, 14 Apr 2014 08:30:25 +0000 http://www.paulund.co.uk/?p=10428 As of WordPress version 2.7 you've been able to assign some posts to be sticky, a sticky post will make sure that this post appears at the top of the list of posts. If you use your WordPress site as a normal blog and have a list of posts of the homepage of your site, making a post sticky will ensure that this post appears at the top of the

The post Sticky Posts In WordPress appeared first on Paulund.

]]>
As of WordPress version 2.7 you've been able to assign some posts to be sticky, a sticky post will make sure that this post appears at the top of the list of posts.

If you use your WordPress site as a normal blog and have a list of posts of the homepage of your site, making a post sticky will ensure that this post appears at the top of the list.

To make a post sticky all you have to do is click the checkbox on the edit posts screen.

publish

In the visibility dropdown there is a checkbox called Stick this post to the front page, check this box and click update to make the post sticky. Now return to the homepage of your site and you will see this post at the top of the screen.

This updates a option on the wp_options table, this is stored in a meta option under sticky_posts, where it will store a list of all sticky post IDs.

Get All Sticky Posts

As all the sticky posts are stored in the wp_options table we can use the WordPress get_option( 'sticky_posts' ) function to return all the sticky post ID's on your WordPress site.

$sticky = get_option( 'sticky_posts' );

Programmatically Assign Post As Sticky

If for example you are writing a script to do a mass import into WordPress then you would be creating new post items programmatically by using the function wp_insert_post( $post ).

The argument that you pass into this function is all the settings that you can assign to your post such as the title, body, categories etc. But there isn't an argument to make the post sticky from these settings.

To programmatically make a post sticky you need to use another function on the post ID. WordPress comes with a function to do just this job, by using the function stick_post( $id ), you can make any post sticky.

The return of the wp_insert_post() function will be the new post ID that was added to the database, you can now use this value on the sticky_post() function.

$id = wp_insert_post( $postArgs );
stick_post($id);

The post Sticky Posts In WordPress appeared first on Paulund.

]]>
http://www.paulund.co.uk/post-sticky/feed 0
Update Row With Highest ID In MySQL http://www.paulund.co.uk/update-row-highest-id http://www.paulund.co.uk/update-row-highest-id#comments Sun, 13 Apr 2014 07:21:21 +0000 http://www.paulund.co.uk/?p=10434 Recently needed to update the last inserted row of a table but didn't have anyway in knowing what the highest ID in the table was. I can easily do this by using the max() function to select the highest ID in the table. Then I can use the result of this query in the UPDATE query to edit the record with the highest ID. But this is quite a easy

The post Update Row With Highest ID In MySQL appeared first on Paulund.

]]>
Recently needed to update the last inserted row of a table but didn't have anyway in knowing what the highest ID in the table was.

I can easily do this by using the max() function to select the highest ID in the table.

SELECT MAX(id) FROM table;

Then I can use the result of this query in the UPDATE query to edit the record with the highest ID. But this is quite a easy query so I should be able to do this in one query by using a nested select query on the UPDATE.

UPDATE table SET name='test_name' WHERE id = (SELECT max(id) FROM table)

But the problem with this is that the MAX() function doesn't work inside a nested select so had to find another way of doing this.

I found out that you can use an ORDER BY and a LIMIT in an UPDATE query therefore I can use a combination of these in the UPDATE query to make sure I only update the record with the highest ID, by doing a descendant order on the ID and limiting the return to only 1 record.

UPDATE table SET name='test_name' ORDER BY id DESC LIMIT 1;

The post Update Row With Highest ID In MySQL appeared first on Paulund.

]]>
http://www.paulund.co.uk/update-row-highest-id/feed 0
Share Multisite Media Libraries http://www.paulund.co.uk/share-multisite-media-libraries http://www.paulund.co.uk/share-multisite-media-libraries#comments Wed, 09 Apr 2014 08:27:12 +0000 http://www.paulund.co.uk/?p=10385 When you use WordPress multisite functionality you are creating a brand new site for each site in the network. This means that they will use different content, different menus and different widgets. They can re-use the same plugins and themes as each other but they are treated as completely different sites. While doing client work with WordPress multisite I've noticed that most sites want to kept separate but because they

The post Share Multisite Media Libraries appeared first on Paulund.

]]>
When you use WordPress multisite functionality you are creating a brand new site for each site in the network. This means that they will use different content, different menus and different widgets. They can re-use the same plugins and themes as each other but they are treated as completely different sites.

While doing client work with WordPress multisite I've noticed that most sites want to kept separate but because they are site networks they might want to reuse media over the different sites.

By default this is not possible on WordPress, when you go to the site media library you are only able to see the media for the current site.

Using the WordPress plugin Network Shared Media you are able to have access to all the other media on your network sites.

network-shared-media

When this is installed you will now see a link for Network shared media at the top of your media library. Accessing the network shared media will allow you select any site in the network and choose any of these images to use on your current site.

screenshot-3

The network shared media plugin is a WordPress.org plugin so you can get this for free for all your sites.

Network Shared Media Plugin

The post Share Multisite Media Libraries appeared first on Paulund.

]]>
http://www.paulund.co.uk/share-multisite-media-libraries/feed 0
Redirect Users After Login In WordPress http://www.paulund.co.uk/redirect-login-wordpress http://www.paulund.co.uk/redirect-login-wordpress#comments Tue, 08 Apr 2014 07:31:27 +0000 http://www.paulund.co.uk/?p=10172 WordPress comes with the ability to create different users for your website. Each of these users can have different roles and different capabilities to perform tasks on your website. You can have users which are allowed full control over everything on your site, install plugins, install theme, edit posts, upload media, everything. At the other end you can have users that are only allowed to view the posts on your

The post Redirect Users After Login In WordPress appeared first on Paulund.

]]>
WordPress comes with the ability to create different users for your website. Each of these users can have different roles and different capabilities to perform tasks on your website.

You can have users which are allowed full control over everything on your site, install plugins, install theme, edit posts, upload media, everything. At the other end you can have users that are only allowed to view the posts on your website.

WordPress starts with 6 default roles:

  • Subscriber
  • Contributor
  • Author
  • Editor
  • Administrator
  • Super Administrator

Each of these roles have different security access in WordPress, some can just read posts, some can write posts but not publish them and others have full access to the WordPress site.

Subscriber

This is the lowest level of WordPress users and can only view their own profile and only read posts on the WordPress site.

Capabilities

  • read

Contributor

A contributor is a user that can write their own posts but they are not able to publish them on the site. This is the ideal role to have for guest posters, it allows them full control to write the post but can't be published without the editor approval.

Capabilities

  • delete_posts
  • edit_posts
  • read

Author

The author is the next level up from the contributor, they are able to have full control over their own posts but they have access to publish the post to the site.

Capabilities

  • delete_posts
  • delete_published_posts
  • edit_posts
  • edit_published_posts
  • publish_posts
  • read
  • upload_files

Editor

The editor role is someone who can write their own posts and manage each of their own posts but they can also manage all the other posts on the site by any author.

Capabilities

  • delete_others_pages
  • delete_others_posts
  • delete_pages
  • delete_posts
  • delete_private_pages
  • delete_private_posts
  • delete_published_pages
  • delete_published_posts
  • edit_others_pages
  • edit_others_posts
  • edit_pages
  • edit_posts
  • edit_private_pages
  • edit_private_posts
  • edit_published_pages
  • edit_published_posts
  • manage_categories
  • manage_links
  • moderate_comments
  • publish_pages
  • publish_posts
  • read
  • read_private_pages
  • read_private_posts
  • unfiltered_html
  • upload_files

Administrator

This is the main role for the site and can have full control over the site, change theme, plugins, write posts, read posts, delete posts they can do what ever they want.

Capabilities

  • activate_plugins
  • create_users
  • delete_others_pages
  • delete_others_posts
  • delete_pages
  • delete_plugins
  • delete_posts
  • delete_private_pages
  • delete_private_posts
  • delete_published_pages
  • delete_published_posts
  • delete_users
  • edit_dashboard
  • edit_files
  • edit_others_pages
  • edit_others_posts
  • edit_pages
  • edit_posts
  • edit_private_pages
  • edit_private_posts
  • edit_published_pages
  • edit_published_posts
  • edit_theme_options
  • export
  • import
  • list_users
  • manage_categories
  • manage_links
  • manage_options
  • moderate_comments
  • promote_users
  • publish_pages
  • publish_posts
  • read_private_pages
  • read_private_posts
  • read
  • remove_users
  • switch_themes
  • unfiltered_upload
  • upload_files

Super Admin User

The super admin user is for multi-site WordPress installs, this user has all the capabilities as the admin user but can also create new sites, network themes, network plugins and network users.

  • manage_network
  • manage_sites
  • manage_network_users
  • manage_network_themes
  • manage_network_options

Even with all these different access in the admin area all the users will login to the same location and will see the same dashboard screen when they login.

But because they have different access then you might want them to go to different locations in the admin area. The following code will allow you to redirect users to different locations depending on what level access they have.

To change the redirect location you need to use the WordPress filter of login_redirect.

function redirect_home( $redirect_to, $request, $user )
{
    return home_url();
}
add_filter( 'login_redirect', 'redirect_home' );

The return of this function will be the URL that we redirect to after the user has logged in. The above example will redirect everything back to the home URL.

Only Allow Admins Into The Admin Area

If you want to redirect all users to the home page except for the users which have administrator rights then you can use the following code.

function only_admins_login_area( $redirect_to, $request, $user ) {
    global $user;
    if ( isset( $user->roles ) && is_array( $user->roles ) ) 
    {
        //check for admins
        if ( in_array( 'administrator', $user->roles ) ) 
        {
            // Redirect to default admin area
            return $redirect_to;
        }
    }

    return home_url();
}

add_filter( 'login_redirect', 'only_admins_login_area', 10, 3 );

Access wp-admin

The problem that you will find with the above code is that it will only stop users accessing the admin area when they log in because of the login_redirect filter. If the user would then navigate to www.example.com/wp-admin/ they will be able to access the admin area, this means that you will have to do further checks on the admin area to make sure that users with certain roles can not access the admin area.

function redirect_user_on_role()
{
    global $current_user;
    get_currentuserinfo();
 	
    //If login user role is Subscriber
    if ($current_user->user_level == 0)
    {
        wp_redirect( home_url() ); exit;
    }

    //If login user role is Contributor
    if ($current_user->user_level > 1)
    {
        wp_redirect( home_url() ); exit;
    }

    //If login user role is Editor
    if ($current_user->user_level > 8)
    {
        wp_redirect( home_url() ); exit;
    }
}
add_action('admin_init', 'redirect_user_on_role');

The post Redirect Users After Login In WordPress appeared first on Paulund.

]]>
http://www.paulund.co.uk/redirect-login-wordpress/feed 0
Equal Height Columns http://www.paulund.co.uk/equal-height-columns http://www.paulund.co.uk/equal-height-columns#comments Mon, 07 Apr 2014 07:51:39 +0000 http://www.paulund.co.uk/?p=10350 If you are displaying a number of columns on your web page then would of probably reached the problem where you need these columns to be the same height as each other. The problem you have with these is when you have different content in the columns some will be larger than others, which will break the design of the website. When you start adding content to these boxes they

The post Equal Height Columns appeared first on Paulund.

]]>
If you are displaying a number of columns on your web page then would of probably reached the problem where you need these columns to be the same height as each other. The problem you have with these is when you have different content in the columns some will be larger than others, which will break the design of the website.

columns

When you start adding content to these boxes they can become misaligned, as you will never have the same amount of content in each of the columns and you will have one column larger than the next one.

columns-one-large

How To Make Both Columns Equal Size

There are a few techniques that you can use to fix this problem, you can either use CSS only solutions or you can do this with Javascript. The following tutorial will create equal sized columns using 3 CSS methods and one method using jQuery.

View the demo to see how the different techniques can create equal size columns.

Demo

Relative Positioned Wrapper

The relative positioned wrapper method will have the columns inside a wrapper DIV, we can then place a position: relative on the wrapper DIV. We will then add a position: absolute to the columns, setting a top: 0 will place the columns at the top of the wrapper, placing bottom: 0 on the column will make both of them full height of the wrapper div.

<h2>Relative Position Wrapper Solution</h2>

<div class="relative-wrapper">
        <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
                            Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        </div>
</div>
.column
{
    font-size: 12px;
    color: #FFF;
    padding: 20px;
    width:400px;
    background: red;
    margin: 20px;
}

/*****************************************************
 * Relative Wrapper
 *****************************************************/
 .relative-wrapper
 {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 450px;
 }
 .relative-wrapper .column
 {
    position: absolute;
    top: 0;
    bottom: 0;
 }
 .relative-wrapper .column:nth-child(2)
 {
    left: 29%;
 }

To create the gap between the different columns we can't use margins because we are using position: absolute, so we have to use the left property on the second column.

CSS Table Solution

The CSS table solution will define the HTML DIVs as a table which makes the browser display these elements exactly as it would behave with a HTML table. The HTML for this can be exactly the same as the relative position wrapper, it has a wrapper DIV with the two columns inside of it.

<h2>CSS Table Solution</h2>

<div class="css-table-wrapper">
        <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
                            Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        </div>
</div>

To create this as a CSS table we need to define the wrapper DIV as a table, this is done by using the display property with the value of table. Next we need to define the columns as table cells inside the table, this is done again with the display property, now using the value of table-cell. Then all we have to do is say that the columns are 100% the size of the table.

.column
{
    font-size: 12px;
    color: #FFF;
    padding: 20px;
    width:400px;
    background: red;
    margin: 20px;
}

 /*****************************************************
 * CSS Table Wrapper
 *****************************************************/
 .css-table-wrapper
 {
    display: table;
    border-spacing:40px 0;
 }
 .css-table-wrapper .column
 {
    display: table-cell;
    height: 100%;
 }

HTML Table Solution

The HTML solution is the old fashioned way of how we had to fix the layout of the website before using CSS, all we have to do for this is to make sure that both the columns are 100% height of the table.

<h2>HTML Table Solution</h2>

<div class="table-wrapper">
        <table>
            <tr>
                <td class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.</td>
                <td class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
                            Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                </td>
            </tr>
        </table>
</div>
.column
{
    font-size: 12px;
    color: #FFF;
    padding: 20px;
    width:400px;
    background: red;
    margin: 20px;
}

 /*****************************************************
 * HTML Table Wrapper
 *****************************************************/
 .table-wrapper table
 {
    border-spacing:40px 0;
 }
 .table-wrapper table td
 {
    vertical-align: top;
 }
 .table-wrapper .column
 {
    height: 100%;
 }

jQuery Solution

The jQuery solution may not seem like the cleanest or nicest solution but it does have the advantage of not having to change the HTML and CSS that you have already created.

The HTML for this means that we can just have the two columns populated with the content.

<h2>jQuery Solution</h2>

<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.
</div>

<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
                            Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>

The CSS for this will be just styling the DIV making them a set width with margins making them styled like columns.

.column
{
    font-size: 12px;
    color: #FFF;
    padding: 20px;
    width:400px;
    background: red;
    margin: 20px;
    float:left;
}

Next we need to create jQuery function that will resize the columns to be the same height. The following function will search through all the columns and get the height of the tallest column. We can then save this height in a variable and then resize all the columns to be this height.

function resize_elements( selector )
{
    if(selector != '')
    {
        var maxHeight = 0;
        $(selector).each(function(){
            if(maxHeight < $(this).height())
            {
                maxHeight = $(this).height();
            }
        });

        if(maxHeight > 0)
        {
            $(selector).height(maxHeight);
        }
    }
}

View the demo to see how these different techniques work create the same equal height columns.

Demo

The post Equal Height Columns appeared first on Paulund.

]]>
http://www.paulund.co.uk/equal-height-columns/feed 0
Add Custom User Profile Fields In WordPress http://www.paulund.co.uk/add-custom-user-profile-fields http://www.paulund.co.uk/add-custom-user-profile-fields#comments Wed, 02 Apr 2014 06:51:15 +0000 http://www.paulund.co.uk/?p=10269 When you are working on projects that need a lot of user management then you can get to the point where you need to add additional information to the users of your website. This is similar to creating new post meta data where you are able to create new bits of data and attach them to your posts, the users can work in exactly the same way. In the WordPress

The post Add Custom User Profile Fields In WordPress appeared first on Paulund.

]]>
When you are working on projects that need a lot of user management then you can get to the point where you need to add additional information to the users of your website. This is similar to creating new post meta data where you are able to create new bits of data and attach them to your posts, the users can work in exactly the same way.

In the WordPress database there is a table called wp_usermeta which stores all additional data that can be found on the user profile. This table is made up of a unique ID, the user ID, meta name and meta values. The structure of this database table means you can add as many additional fields to the user account as you like.

In this tutorial we are going to investigate how you can use this table to add new custom fields to a user profile.

Add New Fields To User Profile

user-profile
On the user profile page there is an action at the bottom of the profile called edit_user_profile and show_user_profile.

do_action( 'show_user_profile', $profileuser );
do_action( 'edit_user_profile', $profileuser );

This will allow us to use these actions to add more fields to the profile page. The below code will allow us to add new fields which we can use to add different social media URLs linked to the user.

add_action( 'show_user_profile', 'add_extra_social_links' );
add_action( 'edit_user_profile', 'add_extra_social_links' );

function add_extra_social_links( $user )
{
    ?>
        <h3>New User Profile Links</h3>

        <table class="form-table">
            <tr>
                <th><label for="facebook_profile">Facebook Profile</label></th>
                <td><input type="text" name="facebook_profile" value="<?php echo esc_attr(get_the_author_meta( 'facebook_profile', $user->ID )); ?>" class="regular-text" /></td>
            </tr>

            <tr>
                <th><label for="twitter_profile">Twitter Profile</label></th>
                <td><input type="text" name="twitter_profile" value="<?php echo esc_attr(get_the_author_meta( 'twitter_profile', $user->ID )); ?>" class="regular-text" /></td>
            </tr>

            <tr>
                <th><label for="google_profile">Google+ Profile</label></th>
                <td><input type="text" name="google_profile" value="<?php echo esc_attr(get_the_author_meta( 'google_profile', $user->ID )); ?>" class="regular-text" /></td>
            </tr>
        </table>
    <?php
}

The above code will add a new table to the bottom of the user profile page, adding 3 new text boxes to the form. To make sure that these are populated with the saved data we use the WordPress function get_the_author_meta() to return the meta data stored against the user profile.

This function requires two parameters the first is the name of the field you want to return, the second parameter is the ID of the user you want to search on.

<?php 
get_the_author_meta( $field, $userID ); 
?>

Saving User Profile Fields

When the user profile is saved we need to add a new action to store this new information, the save actions that we need to use are personal_options_update and edit_user_profile_update.

We can then use the global $_POST variable to get the input fields from the user profile page and update the user meta information with these input fields. To update the user meta data we need to use the WordPress function update_user_meta().

<?php 
update_user_meta( $user_id, $meta_key, $meta_value, $prev_value ); 
?>

This function can take 4 parameters:

  • $user_id
  • $meta_key
  • $meta_value
  • $prev_value
add_action( 'personal_options_update', 'save_extra_social_links' );
add_action( 'edit_user_profile_update', 'save_extra_social_links' );

function save_extra_social_links( $user_id )
{
    update_user_meta( $user_id,'facebook_profile', sanitize_text_field( $_POST['facebook_profile'] ) );
    update_user_meta( $user_id,'twitter_profile', sanitize_text_field( $_POST['twitter_profile'] ) );
    update_user_meta( $user_id,'google_profile', sanitize_text_field( $_POST['google_profile'] ) );
}

Display User Fields

If you want to display this information within your theme then there are two functions that you can use to get this data, you can either use the function the_author_meta( $field, $userID ) or the function get_the_author_meta( $field, $userID ) the difference between these two functions is that get_the_author_meta() will return the data and the_author_meta() will echo the data on the screen.

// return the data
$twitter = get_the_author_meta( 'twitter_profile', $userID );

// echo the data
the_author_meta( 'twitter_profile', $userID );

The post Add Custom User Profile Fields In WordPress appeared first on Paulund.

]]>
http://www.paulund.co.uk/add-custom-user-profile-fields/feed 0
Free Files For April 2014 http://www.paulund.co.uk/free-files-april-2014 http://www.paulund.co.uk/free-files-april-2014#comments Mon, 31 Mar 2014 20:19:37 +0000 http://www.paulund.co.uk/?p=10407 Each month the Envato marketplace brings you free premium files. Envato is a web marketplace where you can get premium files for different areas of your website. My favourite marketplaces are the script marketplace CodeCanyon and the theme marketplace ThemeForest. Here are the files which you can get for free for March 2014. PHP Radio Stations Database 20 purchases at the price of $14. PHP Radio Stations Database is a

The post Free Files For April 2014 appeared first on Paulund.

]]>
Each month the Envato marketplace brings you free premium files.

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

Here are the files which you can get for free for March 2014.

PHP Radio Stations Database

PHP Radio Stations Database

20 purchases at the price of $14.

PHP Radio Stations Database is a simple, yet unique script which allows users to discover new radio stations around the world. They can find stations by their favourite genre, by the country they are from, or even random radios. The script is easy to install/configure, the only things in order to run it are a server with PHP5, cUrl(), mod_rewrite and a Dirble API key.

Download For Free

Create Muse Template

Create Muse Template

32 purchases at the price of $13.

Muse Template: Create Muse Template - Full editable (Change all color, font, pictures) - Contact Form - Gallery - Webkit Fonts - Short Codes to improve your site

Download For Free

Wedding Story Presentation

Wedding Story Presentation

39 purchases at the price of $30.
* 2 version album included.
* Fully customizable animation.
* 31 placeholder.
* 15 Replace Text.
* 1280X720 HD.
* 1920X1080 HD.
* 1 placeholder logo.
* 29,97 fps.
* Cs5, Cs5.5, Cs6 compatible.
* Version pre_render included.
* Included animation invitation.
* Video tutorial included.
* No require plugins.
* Music and images no included.

Download For Free

Inspiration

AudioJungle

119 purchases at the price of $17.

Inspiration is a beautiful and emotional solo piano track. Great as background music for an inspiring film, social video, advertising, wedding video, presentation, website and any project that needs an inspiring vibe.

Download For Free

Pixel's

Pixel's

88 purchases at the price of $7.

Pixel’s is a pixel art style city designer. With the help of this city designer you can create any city you prefer that will look great on any website, banner ad, illustrations or flyer. The designer set contains all sorts of different models.

Download For Free

Balls

Balls

0 purchases at the price of $3.

Download For Free

Mirror

Mirror

0 purchases at the price of $5.

Download For Free

Creative Photo Gallery

Creative Photo Gallery

21 purchases at the price of $12.

Download For Free

The post Free Files For April 2014 appeared first on Paulund.

]]>
http://www.paulund.co.uk/free-files-april-2014/feed 0