stevenclark.com.au » snippets

WP Dynamic Body ID and Current Page

steven — Thu, 04 Sep 2008 00:47:42 +0000

Referring back to an old post on using a Dynamic Body ID in WordPress you might notice that anything in WordPress that is not a page is actually a part of the blog – including search, single, archive and the posts page. The following code should refresh your memory on how to use a dyanamic body ID. If it’s not a page then give the body an ID of News, else if it is a page with the following titles then the appropriate body ID of the title is used, otherwise just insert the body tag.

{ ?>

This is a handy base for doing something useful so I thought a simple continued snippet or two might open your mind to the possibilities. For example, you might like to highlight the current page in your navigation. Even better, you could highlight the current page but keep the News (blog) link highlighted while users are on all the blog related pages such as search, archive etcetera. Sounds logical and it’s easy enough to achieve (This example comes from the Hunter Island Press theme).

We’ll start by putting a few more IDs into the links on the horizontal navigation bar. In this case the navigation is made up of a simple unordered list of links. Note that the ID is placed directly on the unordered list and not on a containing div. You don’t need to put a block level element into a div container, it’s better to just work directly with the list.


    Home
    Studio
    Support
    
About
    News
    Contact

The next task is to style the horizontal navigation bar without the current page tab highlighted. When you get this working you can worry about the current tab later.

ul#navbar { position: static; margin: 0; padding: 0; width: 100%; display: block; list-style-type: none; background-color: #000;}ul#navbar li { display: inline; }

ul#navbar li { display: inline; }

ul#navbar li a { margin: 0; padding: 9px 0; width: 16.6%; min-width: 70px; height: 40px; float: left; border-bottom: 4px solid #000; font-size: .9em; font-family: helvetica, verdana, arial, sans-serif; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; background: #000; } ul#navbar li a:hover { border-bottom: 4px solid #8F0000; background: #222; }

As a snippet goes you can take or leave a lot of what is in there (including the min-width that applies to the fluid layout of Hunter Island Press). But all that’s left for us to achieve is the highlighting of the current tab – specifically so that users entering the news get a consistent tab for the section. We achieve this by associating the body ID with the link ID in the navigation bar. If any of the following selectors are present the background and bottom border will be changed to appear as the current tab.

body#Home li a#homelink, body#Studio li a#studiolink, body#Support li a#supportlink, body#About li a#aboutlink, body#News li a#newslink, body#Contact li a#contactlink { background: #222; border-bottom: 4px solid #8f0000; }

Hopefully you can take something about using WordPress away from this tutorial and extend the concept of the dynamic body ID further. Enjoy.

SQL ConnectToDatabase Function

steven — Sat, 23 Aug 2008 00:49:41 +0000

Carrying on from my last post about connecting to an SQL database using PHP, here are the functions I use to open and close database connections (Note: » just extends the line, you’ll need to remove that for this to work correctly).

// to open the database
function connectToDatabase ()	{
$link = mysql_connect("localhost", "database_name", »
                                  "database_password");
    if ($link && mysql_select_db("database_name"));
        return ($link);
	    return (FALSE);
}

// to close the database
function db_close($connecter)  {
    mysql_close($connecter);
}

It’s a good idea to keep these database connection functions in one place and then reuse them as you need, rather than repeating them everywhere.

Maintainability of your code is important even on smaller websites, if you only need to change a password in one place you’ll find life a lot easier. This code is very close to that found in PHP docs for mysql_connect, by the way. The connectToDatabase function returns a link identifier on success or FALSE on failure.

Further information in the mysql_connect documentation should take you an extra step as well.

So, in your PHP code where you want to run your SQL query all you need to do is something like the following snippet:


// connect to the database
include("down/in_some/folder/db_function_file.php");
$link = connectToDatabase();
    if(!link) {
        print "database connection error";
        mysql_close($link);
	exit();
}

Now run your query and put the values into variables, then explicitly close the link, and you’re done. Hopefully this snippet of advice might be useful.

SQL for Comments and Pings in WordPress

steven — Sun, 17 Aug 2008 00:44:41 +0000

Just a snippet of SQL (Structured Query Language) that comes in handy for WordPress. If you have phpMyAdmin on your account you can just cut and paste these two queries into the SQL area and you’re away. What do they do? If you’re being hammered by spam you don’t want to have to revisit every article and shut off comments and pings – in the past I’ve found the WordPress administration area gave unreliable results at times when turning them on and off. This method offers fine grained control.

So the first query just closes all comments and pings on every article. The second opens comments and pings on twenty articles – change the number on the end to suit your needs. So to close them:

update wp_posts set comment_status='closed', ping_status='closed' where comment_status='open' or ping_status='open'

and to reopen them:

update wp_posts set comment_status='open', ping_status='open' where comment_status='closed' or ping_status='closed' order by wp_posts.ID desc limit 20;

More Accessible Popup Windows (If Coerced)

steven — Sun, 10 Aug 2008 05:44:33 +0000

There’s something extremely annoying about pop-up windows and yet clients often seem to demand them as though they were the answer to that internal fear users will follow a link and never return. My advice from the beginning is if you have such a link remove it immediately – problem solved. There’s a lot to be said for never linking to sites far more interesting than your own.

In real life this fear just isn’t founded and the last thing you should be doing is trying to hold your users captive. If they want to leave then let them, for Christ’s Sake! It’s repeat visitors and conversions that make a successful site not keeping your window open in some sub-level dungeon on the task bar. You’ve probably figured already that pop-ups confront users with a back button that isn’t going to work. And sometimes the window is chromeless. It’s obtrusive, offends a large number of your users, and will confuse the hell out of sighted users let alone someone using assistive technology. And they should never EVER occur without a warning! OK the rant is over for now so we’ll carry on (we understand that pop-up windows are bad for usability and shitty and considered industry worst practice). About the only thing you should be popping up in a new window is a PDF (Portable Document Format) file in its native application.

But sometimes you’re forced with your back against the wall to suck air and implement the suckers! You’re handed deprecated target="_blank" attributes on external links that smack the users in the forehead [Steven takes forefinger and pokes each reader three or four times firmly on the forehead saying "How do you like that?!"]. Delete all those target="_blank" attributes for a start, its a behaviour not content and you’ll oneday have to go clean the suckers out of there eventually so now is the best time to do it. They’re even the most primitive way of achieving popup windows, so get the fuckers out of there now! Begone shite. Don’t you loathe the way target="_blank" instantly throws up a full sized new window – Whoa, where the friggen hell am I again? WTF (again)? How about letting me, the user, make the decision about whether or not to open a new window [ranting again!].

OK the torture is getting prolonged here. If coerced into doing this, you need to look at pop-ups as a behaviour layer issue. If it’s this or target="_blank". Yes it’s sucky, but at least you can implement them in a sensible way if you’re ever coerced by the prospect of unemployment. So you’re looking for an Unobtrusive JavaScript solution, not a content solution to achieving your result. The benefit of this is you can at least provide for graceful degradation (if they don’t have JavaScript they get a normally functioning link to a new page), window size (definately not full screen) and browser features available to the user (preferably all of the features enabled).

I’m not sure where exactly this snippet came into my arsenal (mainly because I have hardly ever had a call to use it). But maybe it will come in handy for your coerced situation. There’s no crime in trying to make an intolerable thing out of an abject bad situation. Name this script popups.js (I should metion this code wasn’t written by me) and call it from an external file in the head section of your document. Then when you want your external link to open in a new window just include rel="external" as an attribute of the link. In that way, only links you specifically want to open in new windows will do so.

function prepareLinks()
{
    if(!document.getElementsByTagName) return false;
    var links = document.getElementsByTagName("a");
        for(var i=0; i
function popUp(winURL)
{
    window.open(winURL, "external", "width=420,
    status=1,scrollbars=1,toolbar=1,
    location=1,menubar=1,
    directories=1,resizable=1");
}


Roger Johansson has another script using class instead of rel to trigger the opening of new windows. My preference goes to the rel attribute, but you’re free to choose. Either way these scripts fall back nicely for non-JavaScript enabled users. So, overlooking the suckiness of having to implement a feature that continuously turns up as one of the 10 biggest web design mistakes, and was identified as long ago as 1999 by Jakob Nielsen as having usability issues – there you go. You can run along and shoot your foot off with it.
If I recall where I picked this script up I’ll put a link here, it’s a rather short list of suspects. Best of luck. And doesn’t it strike you as odd that since popups have been criticised now for at least 9 years at a high professional level we’re still having to do this shite? I’m friggen bowled over. Another WTF moment brought to you by the letter K and the numbers 3, 4 and 25. Exit and run…



Dynamic Body ID in WordPress
steven — Sun, 24 Feb 2008 09:49:55 +0000
As Elliot Jay Stocks is throwing a tidbit of WordPress tutorial out there today on creating dynamic body IDs and Classes it seems appropriate to follow the bandwagon. In short it depends a little on what you are out to achieve I suppose. My example is the recent Hunter Island Press redesign.
 

    


    { ?> 

    



    


What this snippet does in English is it says – if this isn’t a page (which would mean its a part of the news section – blog, archive, single, search) then the body id will always be News. This allows for me to keep the News tab highlighted in the horizontal navigation bar. Else if the page is Home, Studio, Support, About or Contact (which are other members of the horizontal navigation bar) then the body id will use the page title and that tab remains highlighted on the navigation bar. Otherwise if its any of the other pages (like the ones in the content rich footer) just use a plain old body element.
One thing about using PHP in your WordPress templates is the power of skinning a cat whichever way you need to on the day. Simply understanding the available WordPress Conditionals puts some gusto into your possiblities. What was the last way you skun that dynamic body id in WordPress?



WordPress: Page Within a Page
steven — Thu, 22 Nov 2007 20:58:34 +0000
One of the limiting factors I see within many wordpress designs is the tendency to remain blog-like even though a site might require a different look and feel to the standard two column generic layout supplied by the default template. Merely changing a header image and filling in some basic colour changes doesn’t make a solid customisation. You can, in fact, make WordPress look exactly like you want with a few customisations of the templates themselves. If you can draw it you can most likely build it – something worth considering.
To that end I suggest you may find use for the following code snippet which allows you to call the content of any authored page on your WordPress site into a sup-part of another page – perhaps index.php could do with some static content.


$pages = $wpdb->get_results ("SELECT post_content FROM " . $wpdb->posts . " WHERE ID = 15"); 

foreach ($pages as $page)

{

echo $page->post_content;

} ?>

So why would you do this? Well I’ve found great use with clients who I only want to allow editing of a certain section of a page. For example, a portion where they offer a weekly special. I don’t want them playing in the code (no way) and I don’t want them going to a full page with other information they might inadvertently junk up on me. So I’ll jump into the template and call this snippet where the ID equals the page that contains the content your client can edit. Its that simple really. The client is given the name of that specific page (in this case it is called specials) and they just open that one page when they need to update specials on their site.
You should note that creating your new page will add it into your pages navigation list called by the wp-list-pages() function. You’ll probably want to exclude it with a parameter of &exclude=15 where the number is that of your specials page.