Using SSL in WordPress admin

Published October 8th, 2011 under General

Unbeknownst to many internet surfers, the data you submit to a website which does not use https, is free for anyone with appropriate access to see. This includes usernames, cookies and passwords – stuff you don’t want random people finding! Often these are not easily accessible as the data may be encrypted between you and the router, or you could be hard-wired into a network, however if your network security is compromised, perhaps via a hacked home WiFi network, or by simply being on an insecure WiFi network, then all of that data is freely available to anyone with the appropriate tools. If this doesn’t sound scary to you, it should! If someone can access your cookies or even worse, your password, then they will be able to take control of your website and use it for whatever nefarious purpose they may have for it.

Any WordPress powered website is vulnerable to these sorts of issues if it hasn’t been specifically setup to avoid them. There are various ways circumvent some of these security issues, including multi-factor authentication, but by far the simplest and most effective approach is to setup an SSL certificate and force your WordPress admin panel to use https for it’s admin panel. The encryption provided by https prevents anyone from snooping on that data. Your information remains confidential from snoopers as only your browser and server are able to decrypt the data.

Typically, websites will pay for an SSL certificate which is respected by all of the major browser vendors. This provides a nice green icon in the admin panel beside where it says https. However there is no need for you to pay for an SSL certificate if you are the only one using the site. As long as you create the SSL certificate yourself, you can trust it :) This is what I do here on PixoPoint.com so I thought I’d give a quick lesson on how to do it yourself.

There is a plethora of different server setups, so I’m only going to explain the most common setup here, but the same principles should apply for non cPanel setups too. Note, this may not work if your cPanel account is not setup to allow you to create new SSL certificates. If this is the case, simply contact your web host who should be able to setup a certificate for you. If they can’t, then change web hosts! There is no reason you should be forced to use your WordPress admin panel in an insecure fashion simply because of limitations in your web hosting.

SSL link in cPanel

Click the “SSL/TLS Manager” link in cPanel …

The SSL/TLS Manager provides you with links for creating a  private key (KEY), certificate signing request (CSR) and a Certificate (CRT)

The first one you need to create is the private key. Select the domain you want to setup https for, and it will auto-populate the “Host” for you. Then click “Generate”.

You will be provided with the private key although you won’t need to do anything with this as it will be automatically carried forward by the server.

Next up, head back to the SSL/TLS manager and generate a Certificate Signing Request (CSR).

As with the private key, the generated signing request will also be carried forward by the server so you don’t need to do anything with this.

Now head back to the SSL/TLS Manager and create the certificate. The private key and signing request you have already prepared will be automatically used to create the final certificate.

This stage, you will have https working on your site, but the WordPress admin panel won’t use it by default, so you need to force it use https. To do this, you need to edit the wp-config.php file (usually found in the main folder of your WordPress installation). At this point you have a choice between only forcing the login page to use https, which protects your password from being stolen, or forcing https over the entire admin panel. Theoretically the admin panel will load slightly slower when using https, so some people do prefer to take the login https option only. But the performance hit is so minimal that I recommend simply forcing https across the entire admin panel as a further security improvement. This ensures that not only is your password secure, but also your cookies and any private posts and data which you may enter via the admin panel.

Adding the following code to the wp-config.php file will force only the login page to use https (not recommended):
define('FORCE_SSL_LOGIN', true);

Adding the following code to the wp-config.php file will force the entire admin panel to use https (recommended):
define('FORCE_SSL_ADMIN', true);

Now when you visit your sites admin panel, you will be greeted by a lovely warning message! Don’t worry, this is simply because you are using a self-signed certificate, which since you were the one that created it is perfectly okay to use. If you can afford to buy a certificate, then do so, but otherwise this free solution should be good enough for most purposes. You just need to put up with clicking past the error message whenever you visit the admin panel from another computer/browser.

Now once you are logged into your admin panel, you should be surfing along in a totally secure admin panel which your neighbours can’t snoop in on. There will be an unpleasant looking line through “https” in your address bar, but this is not a problem due to you have signed the certificate yourself so is no cause for concern. Your admin panel is locked down nice and tight so that no prying eyes can watch what you are doing on your own site.

Multi-site

If you have a multi-site network with domain mapping, this will probably not work unless you have the domain mapping plugin set to use sub-domains of the primary domain as the admin URL for each sub-domain.

This post was heavily inspired by a similar post by Mika Epstein. Mika is an awesome contributor to the WordPress project and can often be found helping out in the support forums at WordPress.org.

WordPress Admin bar

Published November 18th, 2010 under General

WordPress Version 3.1 (due for release within the next month or two) will include an admin menu bar similar to the one seen on WordPress.com and Vipers’ Admin bar plugin. You can read more about the development of the admin bar in WordPress Trac.

You can see the admin bar in action by installing the latest trunk install of WordPress. Note: Trunk installs are not recommended for use on a live site; you should always wait until an RC or stable version is released (or a beta if you feel adventurous).

Screenshot of the new WordPress Admin bar

The version currently in trunk makes heavy use of javascript and has a lot of unneeded HTML. So this evening I quickly hashed together a pared down version with drastically smaller sprite images, support for IE6 and utilizing a basic unordered list instead of a gaggle of HTML. You can view a test version here. A link to the test version will also be posted on the Admin bar Trac ticket shortly.

The only javascript used in my new version is a suckerfish script to trigger support for the dropdowns in IE6. Some slick slide-down animations on the dropdowns would also be a nice touch, but I haven’t added those in since there weren’t any in the trunk version.

The current trunk admin bar makes heavy use of !important declarations. I’ve totally avoided this as it tends to cause nothing but headaches if you ever need to over-write it, however it may be necessary to include a few of them simply to force it to work with as many potential themes as possible. I’ll deal with that if someone questions it. In general, the use of !important should be avoided where possible, although this may be an unfortunate example where it may be unavoidable.

If you have any opinions on the addition of the new admin bar or my version of it, please leave a comment :)

Flash and dropdown menus

Published June 11th, 2010 under General

Flash - the cause of, and solution to, most of the internet's problems.

Aside from the known issues with flash, there is a major problem with the default setup of most flash objects which many people are unaware of.

A quick search through our support forum, will show up dozens of questions relating to Adobe Flash objects and dropdown menus appearing beneath them. The usual solution people look to as a solution, is to modify the z-index of either their menu, the flash object, or both. Unfortunately this only leads to dead-ends and confusion on the part of the site owner.

The solution thankfully, is relatively simple. All you need to do is to set the Flash object to “transparent”, and your dropdown menu will appear on top of the object instead of below it. I suspect Adobe added this behaviour intentionally as a way of hacking people’s sites into work as expected but has infuriated many web developers as this is not what would typically be expected for browser behaviour.

The solution

Add the following between your <object> tags:

<param name="wmode" value="transparent" />

Add this in an <embed> tag:

wmode="transparent"

Your code should now look something like this:

<object>
  <param value="blabla.swf" / >
  <param name="wmode" value="transparent" / >
  <embed src="transparency.swf" wmode="transparent" type="application/x-shockwave-flash">
  </embed>
</object>

WordPress and AJAX

Published May 4th, 2010 under General

Our JavaScript guru Ronald Huereca has launched a terrific new e-book explaining the technical side of using AJAX with WordPress. If you have ever wanted to learn how to add AJAX features into your WordPress powered site, then we highly recommend checking out Ronald’s new book.

The book is easy to read, easy to understand and ideal for those wanting to branch out from being the user of an AJAX’ified WordPress plugin or theme into adding their own customised functionality to their site.

The book is 249 pages long and covers the following:

  • The basics of AJAX
  • How to load scripts correctly in WordPress
  • How to set up PHP classes
  • Loads of code examples

The book is for sale for US$24 from the WordPress and AJAX site.

PixoPoint Theme Integrator in repo.

Published April 21st, 2010 under General

The PixoPoint Theme Integrator plugin for WordPress is now available in the official WordPress plugin repository.

PixoPoint Theme Integrator plugin page on WordPress.org

If you find the plugin useful, please rate is up by logging into the repository and clicking the stars in the right hand sidebar :) If you are using the plugin, please let us know as we’d love to see some more examples of the plugin in action.

The PixoPoint Theme Integrator page in the WordPress.org plugins repository

WordPress Weekly podcast

Published April 3rd, 2010 under General

Jeff Chandler, the host of WordPress Weekly.

For those of you looking for another way to find out about the latest news, tips and information about WordPress but are sick and tired of reading through blog after blog of posts, an excellent alternative is to listen or even participate in a WordPress related podcast.

The leading podcast on WordPress is the WordPress Weekly podcast hosted by Jeff Chandler. Jeff does an excellent job of presenting the latest news and has a slew of top level WordPress  plugin authors, themers and general WordPress experts on his show, both as interviewees and during round table discussions with other WordPress experts.

Live broadcast

One of the key ingredients to the success of WordPress weekly is not only the boundless enthusiasm of Jeff as host of the show, but also the live setup. You can listen to the podcast live as it happens, and even call in if you would like to ask a question. There is also a chat box for the live listeners to discuss the podcast as it happens and to ask questions which may be answered on the show.

The live service is provided by the TalkShoe podcasting service. Visit the WordPress Weekly Talkshoe page to see the upcoming live schedule and to join in on the conversation.

Other WordPress podcasts

Press This by Joast de Valk
WordCast by Bitwire Media

 

Thanks to Ronald Huereca for the photo of Jeff. Ronald is our JavaScript guru so if you have a use for any JavaScript/AJAX related WordPress work, please get in touch!