Before we go any further you must obtain a SSL Certificate (usually done via your hosting provider). Most decent web hosting providers now offer “Let’s Encrypt” which is a free, automated, and open certificate authority brought to you by the nonprofit Internet Security Research Group (ISRG).

Step two is to download and install the Really Simple SSL plugin. This plugin is the best out there for me. I use it on all my WordPress websites and have done for many years. It removes the headache of different server configurations and setup for https, may it be an apache server, or nginx this plugin has all basis covered.

Really Simple SSL

And finally, we need just need to active the plugin. As always it’s recommended you backup your website before doing this.

If you have any comments or questions, reach out below!

The post 3 Simple Steps to Protecting your WordPress Website with SSL / HTTPS. appeared first on Nicholas Rowe.

iPad in portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad 3 & 4 Media Queries
If you’re looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet’s Retina display, use the following media queries.

Retina iPad in portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
iPad 1 & 2 Media Queries
If you’re looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!

iPad 1 & 2 in portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}
iPad 1 & 2 in landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
iPad 1 & 2 in portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
Updated on February 23, 2015
iPad mini Media Queries

Targeting the new iPad mini with CSS definitely isn’t as difficult as it could have been. Apple thankfully made things easy on developers and gave the iPad mini the same resolution as the iPad 1 and 2.

As for the device-pixel-ratio of the iPad mini, I was informed by Daring Fireball’s John Gruber that this also remains the same as the iPad 1 & 2.

This means it’s really easy for developers to target all iPads with very little code, but it also means there’s no way to specifically target an iPad mini with pure CSS. In other words, nothing is new, and you might want to make your text a tiny bit bigger.

iPad mini in portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
iPad mini in landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
iPad mini in portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
iPad mini Resolution
Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)

Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)

Device-pixel-ratio: 1
Updated on February 23, 2015
iPhone Media Queries

iPhone 6 Media Queries
iPhone 6 in portrait & landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
iPhone 6 in landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 6 in portrait
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 6 Plus Media Queries
iPhone 6 Plus in portrait & landscape
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */}
iPhone 6 Plus in landscape
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 6 Plus in portrait
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 5 & 5S Media Queries
iPhone 5 & 5S in portrait & landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
iPhone 5 & 5S in landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 5 & 5S in portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 2G, 3G, 4, 4S Media Queries
It’s noteworthy that these media queries are also the same for iPod Touch generations 1-4.

iPhone 2G-4S in portrait & landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}
iPhone 2G-4S in landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 2G-4S in portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 5 Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 568px (CSS Pixels)

Screen Width = 640px (Actual Pixels)
Screen Height = 1136px (Actual Pixels)

Device-pixel-ratio: 2
iPhone 4/4S Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)

Screen Width = 640px (Actual Pixels)
Screen Height = 960px (Actual Pixels)

Device-pixel-ratio: 2
iPhone 2G/3G/3GS Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)

Screen Width = 320px (Actual Pixels)
Screen Height = 480px (Actual Pixels)

Device-pixel-ratio: 1
Updated on February 2

The post iPad Media Queries appeared first on Nicholas Rowe.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldurl', 'http://www.newurl') WHERE option_name = 'home' OR option_name = 'siteurl';

UPDATE wp_posts SET guid = replace(guid, 'http://www.oldurl','http://www.newurl');

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldurl', 'http://www.newurl');

UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.oldurl','http://www.newurl');

The post Quick snippet to change all instances of WordPress URL appeared first on Nicholas Rowe.

When your page is accessed over HTTPS, but the Load Balancer is performing SSL offloading and actually requesting your content on the non-SSL port 80, the webserver, PHP, or anything else for that matter, does not understand or see that it’s being accessed over https://.

The fix for this, is that Load Balancer sends the de-facto standard X-Forwareded-Proto HTTP header, which we can use to figure out which protocol the client is actually using on the other side of the Load Balancer.

With Apache 2.2, you could use something along the lines of:

<IfModule mod_setenvif.c>

SetEnvIf X-Forwarded-Proto “^https$” HTTPS

</IfModule>

This simply reads the X-Forwared-Proto header, and if it equals https then, sets the HTTPS environment variable to 1. PHP will see this environment variable, and eventually it will become $_SERVER[‘HTTPS’] that equals 1 — just like it would be for a “real” native SSL request.

The solution

Websites behind load balancers or reverse proxies that support HTTP_X_FORWARDED_PROTO can be fixed by adding the following code to the wp-config.php file

if ($_SERVER[‘HTTP_X_FORWARDED_PROTO’] == ‘https’)

$_SERVER[‘HTTPS’]=’on’;

Then to redirect any http requests to https, we need to define the following In the .htaccess file:

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteCond %{HTTP:X-Forwarded-Proto} !https

RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

RewriteBase /

RewriteRule ^index\.php$ – [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

</IfModule>

The important parts here are in bold. Under usual circumstances inside the .htaccess file the rewrite condition would be to check for https to be set to OFF:

RewriteCond %{HTTPS} off

When behind some forms of proxying, whereby the client is connecting via HTTPS to a proxy, load balancer, Passenger application, etc., the %{HTTPS} variable may never be on and cause a rewrite loop. This is because your application is actually receiving plain HTTP traffic even though the client and the proxy/load balancer are using HTTPS. In these cases, check the X-Forwarded-Proto header.

References:

http://stackoverflow.com/questions/452375/detecting-https-requests-in-php

http://stackoverflow.com/questions/13977851/htaccess-redirect-to-https-www

The post WordPress SSL Offloading appeared first on Nicholas Rowe.

1. Automatic Updates: If the plugin is freely available from WordPress.org already, then so are automatic updates to the plugin. The original author can add features, fix bugs, and deploy them quickly. Your clients and customers then benefit from on-going development. If you were to package them in your theme, though, you are essentially freezing the code at that point in time – any further updates, bug fixes, etc. would have to come from you. This means you’ll need to continuously release theme updates whenever the included plugins update.
2. Core: When WordPress updates, some plugins will break. This is because the original authors didn’t take the time to remove deprecated functionality or test with new versions of WP. Do you really want to commit to maintaining your theme + someone else’s code?
3. Interoperability: As the great mfields once said, “If you’re building a bathroom and you change the wallpaper, the toilet shouldn’t disappear, too.” Users should be able to swap out themes whenever they want without losing their content, their custom data, or the additional functionality they have on their site. Remember, themes are meant for presentation, plugins are meant for functionality.
4. Bad Practice: Whether the theme updates or not, whether the plugin updates or not … WordPress will eventually update. Limiting your client to a single version is, frankly, insulting and bad business. Instead of hard-coding a drop-in plugin, just make your theme play nice with provided hooks and encourage users to install the other system. If you’re using WordPress hooks (actions and filters) rather than direct function calls, you aren’t risking much in terms of stability. If a hook changes, the feature is just disabled as if the plugin weren’t installed.

Though there may be specific cases where including a plugin in our themes is needed. For example, a recent case where I was building a content platform for a network of sites that would use the same basic theme across each site. I needed a way to bundle these plugins with a theme. The plugins were the fantastic advanced custom fields using the options page, the main plugin and some addons such as the repeater field.

I bundled all the plugins within my theme using the TGM Plugin activation library. With this plugin we create a hook and use php require_once function to call our plugins.

Sources: Adding plugins to WordPress themes, Are drop-in plugins a product of design, TGM Plugin Activation, Advanced Custom Fields

The post Bundling plugins with WordPress themes. appeared first on Nicholas Rowe.

By default WordPress uses a default quality of 90%, if you wish to revert the image quality throw the following function in your functions.php file:

add_filter( 'jpeg_quality', 'smashing_jpeg_quality' );
function smashing_jpeg_quality() {
return 100;
}

The post One thing you didn’t know about WordPress images. appeared first on Nicholas Rowe.

Whenever you were reading a blog post under one of these categories, the sidebar should show readers more posts from that specific category. May it be News, Races or Events. So we needed a way to show only the posts from the category that particular post was tagged under.

I decided that interacting with WP_Query here would be the best thing to do. The next thing we need to do is, because we are on a single.php page we need to find out what category that post is in. We can do this by using the get_the_category function.

// Assign get_the_category to a variable
$catData = get_the_category();

Here we have simply just stored the wordpress function get_the_category(); to a variable $catData. This is so we can use it later. The next step is to get the Category ID, in WordPress Categories are counted as Taxonomies and we can get the ID by passing the get_the_category(); variable through the term_id. Like so:

// Assign get_the_category to a variable
$catData = get_the_category();
$catID = $catData[0]->term_id;

As you can see we have a ‘[0]’ within our $catData. This is because get_the_category returns an array of objects due to a post potentially having numerous categories. By using ‘0’ our array will just loop through the first category. Now that we have found our current category, no matter what post single.php we are on, this will show us the category for this post, which is great if there are going to be more categories created down the line. This is a good way to future proof the website.

The final bit is putting this all together within the WP_Query. So let’s do that:

// Assign get_the_category to a variable
$catData = get_the_category();
$catID = $catData[0]->term_id;
$query = new WP_Query('cat'=.$catID);
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
echo '
<ul>
	<li>' . get_the_title() . '</li>
</ul>
&nbsp;

';
}
} else {
// no posts found
}

This will simply loop through all the posts found in the current category and output them in a list item showing the title.

The post Interacting with WP_Query, listing more posts from the current category. appeared first on Nicholas Rowe.