Textpattern tips, tutorials and code snippets

Create your own Admin theme

Want to make some changes to your Textpattern admin interface without learning PHP? Sure, we all do. In the old days before Textpattern 4.2, there were excellent mods that required you to hack core Textpattern files, and even a plugin by the dynamic David DeSandro, complemented by several luxurious stylesheets, which allowed you to customize Textpattern’s styles (see this TXP Tip for more info).

The problem with mods is that they make upgrading Textpattern into a chore, and old mods might not even be compatible with the latest stable version. That’s why Textpattern 4.2 allows you to make your own admin UI without editing any of the core files. That’s right— the new theme directory gives you everything you need to make strident style changes without dreading your next upgrade. Most folks can safely ignore this directory, but if you’re reading this article, you won’t be able to resist it’s honeyed allure.

Before coding up a new theme full throttle, lets take a quick detour over to the Textgarden, your best place to find the admin themes that already exist. Would you believe that all of David DeSandro’s themes have already been packaged into archives you can download and install into your Textpattern-driven site? That’s because it’s easy!

For starters, let’s download DeSandro’s Wilson Orange theme, and look at it in our text editor. In addition to the theme-specific image files, and a customized version of textpattern.css, there is a theme manifest file, appropriately called “WilsonOrange.php”. Let’s look at the theme manifest first:

<?php

if (!defined('txpinterface')) die('txpinterface is undefined.');

theme::based_on('classic');

class WilsonOrange_theme extends classic_theme
{

	function manifest()
	{
		return array(
			'title'		=> 'WilsonOrange',
			'author' 	=> 'David DeSandro',
			'author_uri' 	=> 'http://txpadminthemes.desandro.com/',
			'version' 	=> '0.1',
			'description' 	=> 'Wilson Orange admin theme',
			'help' 		=> '',
		);
	}
}
?>

I want to draw your attention to two innocuous lines that give you a lot of potential:

theme::based_on('classic');

class WilsonOrange_theme extends classic_theme

Did you see that? That’s a bit of the trademarked jujitsu that makes Textpattern so magical. Those lines make it possible to extend existing themes, even the “classic” theme, so that you don’t have to build your theme from scratch. This is great for non-programmers like me: I can pick a theme that has the functionality I want, and use the theme::based_on() function to tell Textpattern to load that theme, and apply my changes to it. Then, all I have to do is create a new “textpattern.css” file and commit some CSS wizardry to create the layout and color scheme I need.

Lets take a real-life example: Martin Walker wants larger textareas. You would want them too if you prefer to access Textpattern in a non-WebKit browser. Steal his CSS and save it as a new “textpattern.css”. I dare you— don’t worry, he’s not looking!

Now, let’s make a manifest for it:

<?php

if (!defined('txpinterface')) die('txpinterface is undefined.');

theme::based_on('classic');

class MarkWalker_theme extends classic_theme
{

	function manifest()
	{
		return array(
			'title'		=> 'MarkWalker',
			'author' 	=> 'Mark Walker',
			'author_uri' 	=> 'http://smd.net.au/',
			'version' 	=> '0.1',
			'description' 	=> 'Make your textareas bigger!',
			'help' 		=> '',
		);
	}
}
?>

As you can see, I only made a few light changes:

  1. Since I’m making adjustments to the “classic” Textpattern theme, this theme is based on “classic”: theme::based_on('classic');
  2. I gave the theme a unique name: class MarkWalker_theme extends classic_theme.
  3. I filled out the manifest info: “title”, “author”, “author_uri”, “version”, and “description”.

After that, put these files in a folder called “MarkWalker”, and go on break. When you get back, congratulations! You’ve made your first Textpattern admin theme!

To see your new theme in action, put your “MarkWalker” folder in the “theme” directory of your Textpattern-driven site. Then navigate to the “Advanced Preferences” tab as a Textpattern admin, select your new theme from the dropdown menu, and click save.

“Uh-oh. Nothing happened.” Don’t worry— you have to navigate away from the Advanced Prefs tab to see the new theme applied.

You can add new styles to the theme’s “textpattern.css” file whenever you want. That’s all.

Now you have total control over the layout, interface graphics, color and type in your Textpattern admin panel. Not everyone is as talented as DeSandro— but with a custom theme, you can make Textpattern look as ugly as you want, without suffering under DeSandro’s sweet CSS tyranny. Since you’ve been such a diligent learner, go on break again. You deserve it!

4 Comments Comment feed

John, This is just the walkthrough I was looking for. Thanks so much for putting this together and for the kind words.

Thank you, David!

When you look at the Remora theme that is now part of TXP’s core, it’s obvious that you can do a lot more than just restyle “classic” or other themes as I’ve done here— but I don’t have the PHP chops for that. I’d love to see an advanced theming tutorial that goes further!

Someone say my name? :) Definitely a much better way to extend a theme.

The best way to extend the admin theme, excellent.

Add a comment

Use Textile help to style your comments