– Blog / Wordpress

A More Subtle WordPress Admin Bar

Sun, 11 Mar 2012 00:00:00 +0000

I've always found the WordPress admin bar a bit annoying. It can definitely be handy for editing pages while browsing (clicking the edit button on the admin bar is easier than trying to find it in the admin area). Whilst it has its uses however, I tend to turn it off by going to Users / Profile / then un-ticking the 'Show Toolbar' check box.

I've seen tricks for moving the Toolbar to the bottom of the page, which is better because the toolbar is less obtrusive... but it still annoys me because it gets in the way of experiencing the site. The other problem of moving the toolbar around is that you have to keep track of how WordPress develops it; for example recently WordPress added another pane for the user (screenshot below).

![WordPress user pane](/perch/resources/wordpress-user-pane.png)

One of the techniques I was using to push the toolbar down the bottom broke because of this new addition (well, it didn't break, but you couldn't see the new user bar because it was pushed below the bottom of the screen, being unaccounted for in the CSS).

In this tutorial we'll leave the toolbar where it is, so if WordPress adds or removes anything in future we won't have any problems. But we'll subtly hide it by default, fading it in when users hover at the top of the page. Better still we'll use CSS transitions to further control how it fades in.

The best thing is that we're only modifying 6 properties...

body.admin-bar {
    margin-block-start: -28px;
}

#wpadminbar {
    opacity:0;
    transition: opacity 0.3s 3s;
}

#wpadminbar:hover {
    opacity:1;
    transition: opacity 0.3s 0s;
}

Laser Targeting IE with WordPress

Tue, 13 Dec 2011 00:00:00 +0000

Here is a way to finely target IE to your heart's content in WordPress (but you could easily adapt for plain HTML).

Add the following to your head, replacing your opening `` tag:

 class="no-js gtie7 gtie8 gtie9 modern-browser">

This method adds a loads of classes that you can use to target IE after you've targeted normal browsers.

Example

In the example below I know that when I move the nav around it messes up in Internet Explorer 7. This is probably a bug that I would rather not waste time fixing, choosing to dedicate my time to working on advanced CSS3 for modern browsers.

Normally I would write two sets of rules (one for normal browsers, and one to neutralise IE7), but with our extensive targeting classes I can simply target browsers outside and above IE7 using the gtie7 (greater than IE7) rule.

.gtie7 #nav {
    right: 440px;
    top: 26px;
}

It's important to note that these classes are more for targeting buggy behaviour. If you're looking to change layout for less capable browsers then consider using feature detection with Modernizr.

W3 Total Cache for WordPress Users

Mon, 13 Jun 2011 00:00:00 +0000

Finding the Build Script hard work?

The scope of the HTML5 Boilerplate by Paul Irish and the team is pretty big. In fact, they seem self-aware of this, sending a questionnaire to their users, trying to figure out which parts of the project people use or don't use.

Part of the Boilerplate is a tool called the Build Script; a script that runs in Terminal that essentially speeds up your website through compressing your code and images, forcing visitor's browsers to cache everything, and probably some other wizardry that I can't fathom.

Unsurprisingly over 70% of users don't use the Build Script. Whilst the BS seems great, it's one weakness is that it requires a bit of time-investment to download Terminal stuff and figure out what's going on. Sure, the HTML5 team have videos, but as soon as you start watching them it's immediately clear that Paul and the team are already perfectly comfortable with Terminal and assume we are too. When Paul started typing gibberish like 'Ant Build' into the Terminal I imagined many of the designers out there simply switching off. From the outsider point of view it's more developer territory. Don't get me wrong, I think the Build Script is great, but there's an easier way...

The Good News

If you're in the habit of building websites on WordPress, there is an amazing tool that will pretty much do the same thing as the Build Script, but with a nice user interface and no Terminal work :-). I'm talking about a free plugin called W3 Total Cache, which I've seen recommended in many places but not bothered to check out until now. I'm so pleased with it that I'm going to side-park the Build Script from now on (unless I'm working on a non-WordPress website of course).

Setting up MAMP and Dropbox

Thu, 12 May 2011 00:00:00 +0000

I realise that there are quite a few tutorials out there that show you how to set up MAMP on your Mac, take this great video series by Chris Coyier for example - First Moments with MAMP, but since these days there a few people that DON'T design on multiple computers, I set about trying to figure out a way to synchronise my local WordPress databases with across multiple computers with Dropbox.

I found a great article on a blog called StuckTogetherWithTape (update 19th September 2020: it appears this link is no longer available but it used to be stucktogetherwithtape.com/blog/2009/12/sync-web-dev-with-mamp-and-dropbox) on how to do this and I'll walk you through this method in the video. Even if you don't work on multiple computers you should do this for backup purposes anyway, just in case your hard drive crashes. In this tutorial, we'll go through...

Briefly why you should be using MAMP
Changing the preferences in MAMP
Backing up your website files
Using Symbolic Link to copy the actual WordPress database to Dropbox

The link to the Symbolic Linker that I mention in the video is here... Symbolic linker.

Publishing Your Build Script WordPress Theme

Wed, 27 Apr 2011 00:00:00 +0000

Getting your head around the Build Script and adapting it for WordPress can take a bit of time, but there's more! Trying to figure out the best way to publish everything can be a bit of a head-scratcher.

I was pretty upset that publishing the Build Script broke my previous workflow using Espresso's built-in FTP, and eventually had to resort to FileZilla, a self-contained FTP program, to get things working smoothly. But once you tweak it a bit, publishing your Build-Scripted WordPress theme becomes a snip!

Filezilla is a free FTP program available on Mac and Windows, you can download it here.

Here are the filter configurations I talk about in the video:

]]>

Disabling system files]]>

Disabling the images folder]]>

Filtering essential files

Using The HTML5 Build Script With WordPress – Part 2 Of 2

Tue, 12 Apr 2011 00:00:00 +0000

In part 2 of the HTML5 Build Script + WordPress tutorial we'll go through the changes we need to make to the build script so that it works nicely with WordPress. It's actually not too taxing, but there are a few gotchas.

Using the HTML5 Build Script with WordPress - Part 1 of 2

Fri, 08 Apr 2011 00:00:00 +0000

The idea of the HTML5 Boilerplate is to provide a starting point for future-proof web design. From putting JavaScript at the bottom of the page to using Modernizr, this is a collection of best practices from some notable people in the web industry and we really need to be aware of these basic fundamentals.

However, basic Boilerplate aside my next two videos will specifically focus on the 'Build Script', a feature fully realised in version 1.0 of HTML5 Boilerplate. The idea of the Build Script is to always serve your code compressed, and always get visitors to cache unchanged code. Achieving this will significantly increase the load speed of your website and in future, you'll be forever turning your nose up at other people's YSlow score.

In this video, we'll go through...

Downloading and using the HTML5 Boilerplate Build Script
Using Terminal to run the script