Tag Archives: howto

for the obsessive theme switchers

I’m prepetually unsatisfied by themes. it’s not the theme authors’ fault, i’m just restless. alex king pointed to more advice: From Install to Pimped Out that sounds like the advice i found when i started using wordpress. but for anyone who does, or might, change themes, it’s wrong.

when you’re talking about meta tags, or feedburner RSS feeds, or custom title tags, you’re talking about things you don’t want to break when you change themes. and there’s no reason for them to. this is how i do it: i wrote a plugin.

Gasp! Shock! horror!
not really. if you can handle everything in the post above, you can handle this plugin. here’s how it starts:

<?php
/*
Plugin Name: archGFX Functions
Plugin URI: http://archgfx.net/
Description: all the things that i hack into themes, now they have their own file
Version: 1.0
Author: SunBurntKamel
Author URI: http://archgfx.net/
*/

you need to have a name, the rest of it’s optional.

so, all that fun stuff that you want to add to the head of your blog? dump it into a function:

function archGFX_head() { ?>
<META NAME="Description" CONTENT="archGFX is the brand name used by Adam Freetly. This portfolio represents personal and collaborative work." />
<meta name="keywords" content="adam freetly, architecture, blog, portfolio, design, rendering" />
<META NAME="geo.position" CONTENT="41.92;-87.70" />
<META name="geo.region" content="US-IL" />
<META name="geo.placename" content="chicago" />
<link rel="shortcut icon" href="http://www.archgfx.net/images/blogrdfbg.jpg" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/archGFX" />
<link rel="search" href="http://archgfx.net/opensearchdescription.xml" type="application/opensearchdescription+xml" title="archGFX" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-91088-3";
urchinTracker();
</script>
<?php }

obviously i have a few more things than average. google analytics scripts, geo tags, favicon, etc. you can call the function whatever you want, just remember it. now that we’ve got all our code, we need to insert it:

add_action('wp_head', 'archGFX_head');
?>

that’s it, save the file, activate your ‘plugin’, and you’re good to go. naturally, i do a few more things with this. i also handle my footer copyright notice the same way, with

add_action('wp_footer', 'archGFX_foot');

i add the mybloglog widget to my dashboard with
add_action('activity_box_end', 'archGFX_MBL');

and, i don’t have to worry about forgetting to add any of it next time i switch themes.  the only thing that i don’t put in the plugin is my title tags.  you can only have one of those.  so while i could add mine with a plugin, i’d have to delete the theme’s title manually.

Defective Themes: Duplicate Content

Talking to Rob about his nifty architecture blog search engine, I realized just how important things like the Duplicate Content Cure Plugin are. Not just for fear of being kicked out of google, but because it makes your search results real. By default, your monthly, category, tag, and author pages (if they exist) show up, and force your relevant blog posts ‘below the fold’. Worse still, old articles won’t show up on category pages, despite being the reason a person landed on your blog. That’s exactly what happens with a search engine that searches only blogs, without using google’s blogsearch: pages and pages of archives, before you get to actual posts.

So, the plugin is nice, but you can also do it in themes, just add:

 <?php if ( is_category() || is_archive() || is_search() || is_author() ) { ?>

    <meta name="robots" content="noindex,follow"><?php

} ?>

<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?>

    <meta name="robots" content="noindex,follow">

<?php } } ?>

to header.php. The UTW stuff (is_tag()) is a little annoying, but other than that, it’s boilerplate.

SF.net PT 2: Setting up a demo site

Part 1 was easy. it’s all GUI stuff, that you can figure out by poking around. Part 2 is the reason I started writing this down. The only way to maintain your sourceforge.net website, is via SSH (and by extension, sFTP). Programs you will need:

install WinSCP, and get started!

Hosting a theme on Sourceforge, PT. 1

The advantages of sourceforge hosting are all things that all themes should have: demo blog, screenshots, download stats, nationwide download mirrors, SVN repository, bug tracker, forums. All things you could provide from your own web host, but not only would it cost a fair chunk, having bugs and support show up as comments on your blog can get to be a bit unweildy. For any GPL theme, sourceforge hosting is Free as in beer. unfortunately, getting set up on sourceforge isn’t a cakewalk. so i’m going to attempt to index their documentation in a more straightforward manner. Part 2 will explain how to install wordpress on your project’s website, to give you a fully featured demo site.

This gets a tad long

Save your contact page from spam

there are a couple of different methods for blocking email harvesting bots from your contact page. Some involve javascript and obfuscating the email address. some involve putting the address in an image. my new favorite trick involves both.
first, go get your email address turned into escaped HTML characters. Take the code they give you, and wrap it in a span with a specific class, and add the same class to the link:

<span class="jsmail"><!--
document.write("<a href='mailto:put your scrambled address here' class='jsmail'> wp-admin [at] archgfx [dot] net</a>"))
// --> 

</script>

</span>

I also changed the ‘contact us!’ text to a human readable, but not copyable version of the email address. Now, get your email turned into an image, and we’re going to use the image in CSS, so that even if a real person is browsing the site with javascript disabled, they’ll still see the email address:

.jsmail {

display: block;

width: 129px;

height: 11px;

background: url('http://safemail.justlikeed.net/e/dd6330802be7d20f41dc95336e2acbfa.png') no-repeat 0 0;

text-indent: -9000px;

}

i like it. it’s not completely accessible, but it’s pretty good. it’s reliable, and it won’t be confusing to people with older browsers or strict security settings. Here’s an example.

Akismet Excerpts

Engtech and I thought this was an excellent suggestion for dealing with the torrents of spam in the akismet panel, but matt disagrees. Engtech wrote a Greasemonkey Script that implements it browser side. I, being afraid of browser bloat, and wanting this for archGFX, not for this wordpress.com blog, hacked it in /wp-admin/wp-admin.css. It’s a hack so simple, i’m embarassed i didn’t think of it sooner:

#spam-list li {
max-height: 6.5em;
overflow: hidden;
margin-bottom: .5em;
}

#spam-list li * {
display: inline;
}

added to the end of the file. (i actually appended it to tiger.css, which works the same.) this is what it looks like:

auntie spam

if that’s not enough context for you, or if it’s more than you need, you can adjust max-height to your liking. if you’re using IE6 or below to review your spam, you’ll want to specify height instead of max-height.

The Thin Line: From Skin To Theme

You may have noticed that i really like The Sandbox. Andy suggested a possible path for it to become the default theme, which I think would be an excellent idea. Mainly because writing PHP is not my strong suit. CSS is closer to my skill set.

WordPress versions 1.2 and below used a templating system like the one andy proposed. The problem was, the classic theme had limitations. if you wanted to remove the sidebar on post pages, as kubrick does, you were out of luck. The Sandbox would fix that. The other development that helps make templating viable again was introduced in wordpress 2.0. Since 2.0 was introduced, wordpress loads functions.php of the current theme, if it exists. this means that a theme could use only style.css and functions.php, and have an enormous level of control.

Changes to The Sandbox

it’s been a while since andy added the sandbox branch, but it doesn’t seem to be making progress. so, while i can’t implement status: hidden, i can make a workable version of The Sandbox to test The Thin Line on.

It’s been stripped of it’s skins panel (as well as the skins subfolder), had the default skin set to none, and had status: hidden added to the theme information. I also moved wp_footer(); inside the #footer div, for even greater semantic justice so that information added to the footer can be styled more easily (scroll to the end).

Changes to The Thin Line

when i said that Themes could be built on style.css and functions.php, that’s only partly true. you could build a theme that way that only inserted a footer credit, and applied javascript to the head of the theme. to add an options panel, you’ll probably want to use theundersigned’s tutorial, or ozh’s theme toolkit. I’m using theundersigned’s tutorial, mainly because the PHP is simple enough for me to get the gist of what’s going on. Ozh’s toolkit does more, but requires me to take more on faith, and has previously caused problems on the theme viewer and wordpress.com.

The first step to gluing The Thin Line to The Sandbox is this:

/*



Theme Name: The Thin Line

Theme URI: http://archgfx.net.net/blog/index.php/themes/the-thin-line

Version: 0.7

Description: Hand on mouth, the game goes on

Author: Sunburntkamel

Author URI: http://archgfx.net/blog/index.php/about/

Template: Sandbox



*/

That’s my entire style.css. it doesn’t need to have anything else. I’ll be using style.php for all the style information. The important part is the last line, which tells wordpress to use the template files (index.php, single.php, etc) from ‘sandbox’ to handle the content. Style.php will be loaded on top of the existing sandbox CSS, which is why we set the sandbox skin to ‘none’.

Layouts

I was going to re-use the sandbox’ “skins” submenu at first, but that would require digging into the function, and renaming all the variables to use theundersigned’s $shortname converntion, and including it in the thin line, rather than the sandbox. That requires redistributing more code, which isn’t my goal. so i used theundersigned’s tutorial to make a dropdown list.

corrosponding to the dropdown list is this section of style.php, which performs roughly the same task as the skins page:

<?php if ($thethinline_layout_style = "3c-b") { ?>

@import url('skins/3c-b.css');

<?php } else if ($thethinline_layout_style = "3c-l") { ?>

@import url('skins/3c-l.css');

<?php } else if ($thethinline_layout_style = "3c-r") { ?>

@import url('skins/3c-r.css');

<?php } else if ($thethinline_layout_style = "2c-l") { ?>

@import url('skins/2c-l.css');

<?php } else if ($thethinline_layout_style = "2c-r") { ?>

@import url('skins/2c-r.css');

<?php } else { /* 1c-r */ ?>

@import url('skins/1c-b.css');

<?php } ?>

after that, style.php is just the remainder of the original thethinline.css. The advantage of styling in a PHP fileis that you can use variables, wordpress conditionals, and other assorted tricks.

Functions.PHP

Adding functionality to The Thin Line via functions.php is a little more like writing a plugin than like writing a theme. I’m using add_action(); hooks to add to both the header and footer of the theme. I could also add and remove widgets, although i don’t need to mess with the basic widget formatting, because that’s handled by functions.php in The Sandbox. Theundersigned’s tutorial needs a minor correction first, though. at the end of functions.php, I changed <?php bloginfo('template_directory'); ?> to <?php bloginfo('stylesheet_directory'); ?>. For most themes, those hooks point to the same file. This is the first time the difference matters to a theme.

Updated Footer

This is the new footer for The Thin Line. I added an image and link to The Thin Line homepage, as well as a section for users to add their own copyright notice/pithy slogan/whathaveyou (another trick i stole from scott). This is purely PHP, but it’s not scary. Just make the end of theundersigned’s functions.php look like this:

function mytheme_wp_footer() {/* Places credit link in the footer */ ?>

<span id="skin-link">

<a href="http://archgfx.net/blog/index.php/themes/the-thin-line" title="Theme by SunBurntKamel">

<img src="<?php bloginfo('stylesheet_directory'); ?>/thethinline/ttlogo.jpg" alt="The Thin Line" title="The Thin Line" /></a></span> <br />

<p class="annotation"><small><?php echo $thethinline_footer_text ?></small></p><?php }

add_action('wp_head', 'mytheme_wp_head');

add_action('admin_menu', 'mytheme_add_admin');

add_action('wp_footer', 'mytheme_wp_footer');

?>

That’s actually probably easier than creditting yourself in footer.php I could (and may possibly) also use this function to add, say, siFR to the theme as well. Someone who didn’t ph34r javascript the way i do might add livesearch to a sandbox based theme.

The End

My point in writing all of this is to show that the idea of writing a new theme every time is overkill. Template files themselves don’t vary a lot. Most of the functionality and variation happens in javascript and CSS. those can both be handled by only a couple of files. If theme authors could depend on the sandbox being in every wordpress distribution, It would make it easier for them, as well as for casual users who just want to change something small about a theme. It’s a lot easier to find the thing to change when there are only 3 files in the Theme Editor panel of the dashboard.

theme contents

I was going to include The Thin Line with this, but i’m having a little difficulty making everything style the way it was before, and some of the variables i’ve created with theundersigned’s tutorial aren’t properly sticking, despite showing up correctly in my database.

Bookmark This:

add to del.icio.us :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: TailRank