I’ve ended up having to tweak WordPress in several ways to make the system work as I want. At the moment I’m erring on the side of coding minor adjustments into my custom themes. Plugins are more flexible, but if you just need to change a small thing, coding it into the theme leaves your site with less overhead from another plugin being loaded.

So, here are a few little plugin-free techniques for tweaking you WP Subscriber system.

(In all this, remember that functions.php is your friend. It’s a standard WP theme file that gets included in every request to your site, front- or back-end. It’s generally used—of course—to include custom functions for your theme, but you can also use it just to run code to tweak your installation.)

Allowing Subscribers to see Private posts and pages

I want to be able to create pages that are only viewable when Subscribers (or Admins, of course) are logged in. Unfortunately, for some reason the “Private” visibility status that you can assign to posts or pages in WordPress excludes Subscribers—only higher user roles can see Private content.

Installing a full role management plugin is overkill for this, so I trawled around for and eventually found the core functions that allow you to add specific capabilities to a role (check out this handy table for a quick overview of roles and capabilities). I popped these lines into functions.php, which seem to do the trick nicely:

$subRole = get_role( 'subscriber' );
$subRole->add_cap( 'read_private_pages' );

Redirecting logins to home page

When Subscribers log in, you don’t necessarily want them dumped onto the WP dashboard—with loads of info on the blogging aspect that’s irrelevant to them. Of course there’s plugins to do this, but how about a few lines of theme code? Nathan Youngman sorted me out with this:

function loginRedirect( $redirect_to, $request_redirect_to, $user ) {
	if ( is_a( $user, 'WP_User' ) && $user->has_cap( 'edit_posts' ) === false ) {
		return get_bloginfo( 'siteurl' );
	}
	return $redirect_to;
}
add_filter( 'login_redirect', 'loginRedirect', 10, 3 );

Check Nathan’s post for a description of the code. Note for now that the edit_posts capability is used as a check for the Subscriber role; all other roles can do this, but Subscribers can’t.

What about the logout?

Good question, glad you asked. I have a bit on my sidebar with links to special Subscriber-only pages, including the profile page (/wp-admin/profile.php). For the logout link, if you want to do it properly, and want to redirect to the home page, use something like this:

<a href="<?php echo wp_logout_url( get_bloginfo( 'url' ) ); ?>">Log out</a>

Customizing the WordPress screens

How about a little customization of the login screen and the WordPress admin area? A custom logo, at least? Again, plugins can help, but if you want to just slap some code into functions.php…

Here’s the code to pull in a CSS file for the login screen. Note that I close then re-open the PHP block to output straight HTML; the code extracts below assume that they’re extacted from a larger file that begins with <?php and ends with ?>.

function customLogin() { ?>
	<link media="all" type="text/css" href="<?php bloginfo( 'template_directory' ); ?>/style-login.css" rel="stylesheet">
<?php }
add_action( 'login_head', 'customLogin' );

Put style-login.css in your theme directory.

Here’s the code for adding custom CSS to WordPress itself.

function customAdmin() {
	global $user; ?>
	<link media="all" type="text/css" href="<?php bloginfo( 'template_directory' ); ?>/style-admin.css" rel="stylesheet">
 <?php
	if ( !current_user_can( 'edit_posts' ) ) { ?>
		<link media="all" type="text/css" href="<?php bloginfo( 'template_directory' ); ?>/style-admin-subscribers.css" rel="stylesheet">
	<?php }
}
add_action( 'admin_head', 'customAdmin' );

Again, put the CSS files in your theme directory.

I’ve included an extra bit in there which adds a subscriber-specific stylesheet (try saying that when you’ve had a few). Again, the edit_posts capability is used to check to see if the current user is a Subscriber.

Hiding the Dashboard

Why include Subscriber-only CSS? There’s many possibilities, but for now it’s a quick-and-dirty way of hiding the dashboard from them. You can get rid of the link down the side with this in your style-admin-subscribers.css:

ul#adminmenu li#menu-dashboard { display: none !important; }

What if they manage to navigate there anyway? Try hiding all the boxes:

.postbox { display: none !important; }

Again, these are rather inelegant hacks. But they do the job (so far!), and leave the site a little leaner plugin-wise.

• Firebug – simply incredible
• Web Developer Toolbar – still very valuable, with some great little features
• ColorZilla – a good colour picker, plus some things that the others do, but slightly quicker to access

This is all great. However, more often than not, the times when you really need this sort of stuff is in Internet Explorer – especially pre-7 versions.

I’ve not had much luck in IE 6 with the Firebug Lite implementation. I have just come across a good bookmarklet called XRAY. Compared to the Swiss Army Knives above, it’s very basic, but it provides key information about page elements that can really speed debugging along.

Things may be changing with new CSS standards, and with the evolution of various hacks and workarounds. Anyway, I just found a solution for a site I’m working on which seems to work well in this instance. I may have reinvented some wheel or other, but here it is.

The design involves a content area and sidebar looking a bit like this (scaled down & simplified here!):

My solution is partly based on the common technique of using a vertically repeated background image to delineate the sidebar and content areas. This usually puts the image as the background of the body tag, giving top-to-bottom vertical columns. Here, I need the rounded top and bottom, and there’s the header and footer (not shown here) to account for, too.

Here’s the markup for my solution:

<div id="main-top"></div>
<div id="main">
	<div id="content">
		[content here]
	</div>
	<div id="sidebar">
		[sidebar here]
	</div>
	<div id="main-bottom"></div>
</div>

main-top and main-bottom take care of the rounded top and bottom, with full-width background images and a fixed height (not forgetting the Expanding Box and min-height fixes for good ol’ IE 6).

main is given a vertically repeated background image, about 5px high, for the sidebar’s gradient and the white background for the content. (This design actually has a slight vertical gradient in the content area, too. Setting it as a non-repeating top-aligned background image for content, and giving content a min-height equal to the image’s height, sorted that out.)

The content and sidebar are floated right (don’t forget IE’s double float margin bug!).

The key here is setting main-bottom to clear:both and – my new (for me) innovation – placing it inside the div with the class main. It clears the content and sidebar, exposing the repeated background on main.

Hey presto, equal-height content and sidebar.

Image replacement involves using CSS to hide the text for an element (e.g. a <h1>), and setting the background-image for that element to replace it with an image. Users with visual browsers with CSS get the image; text-only browsers, bots, etc., just see plain text.

It’s not without its detractors and slight drawbacks, but it’s a widespread technique. A quick scan of big-name sites as of writing found it in evidence on stopdesign.com, mezzoblue.com and adobe.com.

However:

Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. (Google Webmaster Help Center)

This obviously caused some panic among developers using image replacement. While Google seem to have made some comments saying that they would distinguish between legitimate usage and spamming, they’re pretty vague about what constitutes one or the other. The ever-informative 456bereastreet.com have a good summary. But while their conclusion is quite reassuring, it’s two years old – an aeon in web technology – and still vague:

While it’s good to know that sites are not currently being removed without a manual review, that could change in the future. So I would advise anyone making extensive use of CSS techniques that hide text to make sure that it can’t be mistaken for spamming.

How do you make sure? They don’t say.

More recently, SEO Critique took the approach of checking out high-profile designers with close links to Google and seeing if they used image replacement:

Rand Fishkin at SEOmoz does use CSS image replacement on the SEOmoz.org site, albeit sparingly. … I figure that Rand goes to enough conferences and has enough interaction with Googlers like Matt Cutts and Vanessa Fox that if there was a danger of imminent death by penalty he would know and would quickly order the offense removed. Hence, used sparingly and in the strict spirit of If a Blind Person Were Using a Text Reader How Would It Sound? My opinion is that using CSS image replacement is probably okay.

Probably not an issue to get panicked about, then, but one to keep your eye on. I’ll carry on using it judiciously until further notice.

I’m creating a box with rounded corners around some content using my usual method:

• Place empty <div>s with ids above and below the content <div>
• Create background images for the top and bottom of the box <div>s, and put them in (with fixed width and height for the <div>) with CSS
• Continue the border along either side of the content <div> with CSS borders

All well and good. Only, on IE6/Win, the top <div> wouldn’t shrink to less than about 16px, leaving a gap of whitespace below the 8px high background image.

After much searching, I found a workaround buried in the life-saving Explorer Exposed pages. You can read about the ins and outs over there; here you’re just going to get a nice quick fix.

Put this in the CSS rule for the <div>:

overflow: hidden;