The default howdy greeting

The default howdy greeting

I like the WordPress ‘howdy’ greeting. It’s friendly and it usually makes me smile when I login to the admin dashboard. But for some clients, something a bit more elegant is in order.

Changing the text of the greeting is easy if you’re willing to get into the theme files. All you need to do is open up functions.php in your theme’s folder and add this code snippet:

Replace ‘Hello,’ with the message of your choice.

Replace the WordPress ‘howdy’ with a timely message that’s more personalized for you.

Or if you want something a little more fancy, we can set it to include a message appropriate to the time of day. To do that put this in functions.php:

New modified WordPress greeting

New modified WordPress greeting

For this one, you’ll need to replace the date_default_timezone_set with your own timezone (assuming you’re the admin). You can find a list of PHP-style timezone formats here. Then you may want to change the hours and the contents of $msg to fit your needs or language.

One issue with timezones – there’s no way to detect them automatically with an HTTP header and other methods like geolocation can be problematic. If you have a number of admins in different regions, you can try using this script to detect the timezone and modify the code above to include that so that the timezone will change for admins as they login, but that’s a bit beyond this simple tutorial.

Just recently I did some WordPress development work for a graphic design company. I thought their portfolio section was quite nice and used a few custom NextGen Gallery templates to pull it off. Here’s how I did it (mostly so I can do it again easily, but I hope this might help someone else too!).

Here’s a screenshot of the finished album:

NGG Custom Album

And here’s one of the galleries:

NGG Custom Gallery

(This post assumes you’ll need both Albums and Galleries, if that’s not the case, skip ahead as needed.)

After setting up each of the galleries and the album in NGG with some sample photos, I made two custom templates based off the existing NGG ones: album-clientname.php from album-extend.php, and gallery-clientname.php from gallery-caption.php. To make these, open the NGG plugin and you’ll find the original templates in the /view folder. Copy them and paste them into a new /nggallery  folder in your theme, then change the names as needed. Don’t forget to then go to the album and gallery pages in your site and change the shortcode to match the new template names:

[ album id=1 template=clientname] and [ nggallery id=1 template=clientname]

You’ll remove that extra space between the opening bracket and the first word in your own shortcode.

Here is the code for album-clientname.php:

And the code for gallery-clientname.php:

I didn’t change them too much; in the gallery template I removed some unneeded code and added a container around the alttext (which I’m using for the title on top of the thumbnail). In the album template, I removed the photo number and moved the album title, again adding a container to make it easier to style with CSS.

Here are the styles for the album – pretty simple:

Here’s the styling for the galleries:

For the gallery, I also needed to use a modified page-title on those pages that would show over the header image:

I made a new page template called page-galleries.php to use for the gallery pages so I’d have a body style I could hook into.

All in all this took about an hour to do, start to finish. I think it’s a nice-looking portfolio and I hope you find this useful!

Earlier this month I completed a redesign of a long-time client’s site that I first worked on in 2008. Because the client always has loads of great imagery (she’s an interior designer), we decided to incorporate full-screen backgrounds. I’m using the lightweight jQuery plugin Backstretch to handle the resizing.

I had some problems getting this working in WordPress, so I thought I’d post my process here. The main issue turned out to be that the version of backstretch.js I got from the demo site was not working; I have a correctly-functioning version here to download.

This little script makes images stretch to the full size of the browser window and resize as needed; it works fine down to IE7. I’d recommend an image width of no less than 1440px, this seems to work well.

Adding the Script

Add this to your theme’s functions.php, this registers and loads the backstretch.js script.

Then add this function, this one adds a backstretched image to individual pages which you can control. This one is placed in the footer to make sure it loads after jQuery.

I hope this helps someone else!

Have a private blog category only visible to logged-in members of your blog or website? You can hide that category so that it doesn’t show up in your site’s default feed. Just add this to your theme’s functions.php file:

If you need to exclude more than one category, just add more like this:

This took a bit to figure out. If you only want to load Meteor Slides on the home page, try this:

I’m currently working on building a good responsive base version of the Theme Hybrid child theme I use as the starting point for most WordPress sites. To that end, today I destroyed a project-in-progress to rebuild it responsively. It’s going well so far, but I’m not close to being done. 

One thing that is complete: I now have a responsive menu thanks to a little jQuery script called TinyNav.js. This automatically converts any ul or ol-based navigation menu to a select menu. It was very easy to do except for one thing that wasn’t clear from the documentation, which I’ll explain below.

First download TinyNav.js from the link above and upload it to your theme directory. Then in the head section of your theme, connect to the script:

Then add this, changing #menu-primary to the ul id in your WordPress menu. The second part of this makes the current_page_item appear in the select menu by default.

Finally, open up tinynav.js. This was the tricky part because it wasn’t explained clearly. You’re going to need to make one change: the first occurrence of ‘selected’ needs to be changed to ‘current_page_item’ and then the first part of the script should look like this:

Note that that’s just part of the first line in the minified script…

Now you’ll use media queries to control the appearance of the select menu and the hiding of the main menu, perhaps like this:

And you can style select.tinynav in CSS. Enjoy!