WordPress Archives - position: relative;

Replace the WordPress ‘Howdy’ Greeting With a Timely Message

January 7, 2015 by Debbie Campbell·2 Comments

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 the howdy greeting */
function replace_howdy( $wp_admin_bar ) {
	$my_account=$wp_admin_bar->get_node('my-account');
 	$newtitle = str_replace( 'Howdy,', 'Hello,', $my_account->title );
 	$wp_admin_bar->add_node( array(
 	'id' => 'my-account',
 	'title' => $newtitle,
 	) );
}
add_filter( 'admin_bar_menu', 'replace_howdy',20 );

/* Replace the howdy greeting */

function replace_howdy( $wp_admin_bar ) {

$my_account=$wp_admin_bar->get_node('my-account');

$newtitle = str_replace( 'Howdy,', 'Hello,', $my_account->title );

$wp_admin_bar->add_node( array(

'id' => 'my-account',

'title' => $newtitle,

) );

}

add_filter( 'admin_bar_menu', 'replace_howdy',20 );

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:

 /* Replace the howdy greeting */
function fancy_replace_howdy( $wp_admin_bar ) {
	date_default_timezone_set('America/Denver');
	$Hour = date('G');
	$msg = "";
	if ( $Hour >= 5 && $Hour <= 11 ) {
	    $msg="Good morning,";
	} else if ( $Hour >= 12 && $Hour <= 18 ) {
	    $msg="Good afternoon,";
	} else if ( $Hour >= 19 || $Hours <= 4 ) {
	    $msg="Good evening,";
	}
	$my_account=$wp_admin_bar->get_node('my-account');
	$newtitle = str_replace( 'Howdy,', $msg, $my_account->title );
	$wp_admin_bar->add_node( array(
		'id' => 'my-account',
	 	'title' => $newtitle,
		)
	);
}
add_filter( 'admin_bar_menu', 'fancy_replace_howdy',20 );

/* Replace the howdy greeting */

function fancy_replace_howdy( $wp_admin_bar ) {

date_default_timezone_set('America/Denver');

$Hour = date('G');

$msg = "";

if ( $Hour >= 5 && $Hour <= 11 ) {

$msg="Good morning,";

} else if ( $Hour >= 12 && $Hour <= 18 ) {

$msg="Good afternoon,";

} else if ( $Hour >= 19 || $Hours <= 4 ) {

$msg="Good evening,";

}

$my_account=$wp_admin_bar->get_node('my-account');

$newtitle = str_replace( 'Howdy,', $msg, $my_account->title );

$wp_admin_bar->add_node( array(

'id' => 'my-account',

'title' => $newtitle,

)

);

}

add_filter( 'admin_bar_menu', 'fancy_replace_howdy',20 );

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.

My First Post at WPTuts+

April 14, 2014 by Debbie Campbell·0 Comments

So exciting!

Today’s my birthday, and for an awesome present I got my first post tutorial post published at WPTuts+. It’s a beginner’s guide to using icon fonts in WordPress. Check it out when you have a few minutes – it’s a bit lengthy, but quite thorough.

Making a List from Custom Meta Box Entries

March 9, 2014 by Debbie Campbell·0 Comments

Recently I developed a WordPress site that uses a custom post type for Events. This is a typical event page – note the More Info section in the left sidebar.

The client needed to be able to insert a list of links under More Info, and the number of links will change for every event. I needed a way to make this super-simple for the client, so in the Events custom post editor, the links are entered one per line like so:

<a href="http://www.supportourwarriors.org/">Event Website</a>
<a href="http://www.supportourwarriors.org/scheduleofevents.html">Schedule of Events</a>
<a href="http://www.supportourwarriors.org/keynotespeaker.html">Keynote Speaker</a>
<a href="http://www.supportourwarriors.org/honoredguests.html">Honored Guests</a>
<a href="http://www.supportourwarriors.org/golftournament.html">Golf Tournament</a>

<a href="http://www.supportourwarriors.org/">Event Website</a>

<a href="http://www.supportourwarriors.org/scheduleofevents.html">Schedule of Events</a>

<a href="http://www.supportourwarriors.org/keynotespeaker.html">Keynote Speaker</a>

<a href="http://www.supportourwarriors.org/honoredguests.html">Honored Guests</a>

<a href="http://www.supportourwarriors.org/golftournament.html">Golf Tournament</a>

Then, I needed to convert that line break-delimited list into an unordered list for formatting… I had no idea how to do that but after some hunting around I found this post that completely answered my questions.

Then in my single-events.php template, I have this section including the wonderful code snippet from wordpressismypuppet that converts the entries into a standard unordered list:

<div id="links">
   <h3>More Info</h3>
       <?php if ( get_post_meta($post->ID, 'wpcf-event-info-links', true) ) :
	// Get the variable from the database as a string
	$links = get_post_meta( $post->ID, "wpcf-event-info-links", true );
	// Break the string up by using the line breaks (carriage returns)
	$links = explode( "\n", $links );
	// Start the unordered list tag
	echo '<ul class="link-list">';
	// Loop through each ingredient since it's now an array thanks to the explode() function
	foreach( $links as $link ) {
		// Add the list item open and close tag around each array element
		echo '<li>' . $link . '</li>';
		}
		// Once the loop finishes, close out the unordered list tag
		echo '</ul>';
	endif;
	?>
</div>

<?php if ( get_post_meta($post->ID, 'wpcf-event-info-links', true) ) :

// Get the variable from the database as a string

$links = get_post_meta( $post->ID, "wpcf-event-info-links", true );

// Break the string up by using the line breaks (carriage returns)

$links = explode( "\n", $links );

// Start the unordered list tag

echo '<ul class="link-list">';

// Loop through each ingredient since it's now an array thanks to the explode() function

foreach( $links as $link ) {

// Add the list item open and close tag around each array element

echo '<li>' . $link . '</li>';

}

// Once the loop finishes, close out the unordered list tag

echo '</ul>';

endif;

</div>

So now the result is a ul under ‘More Info.’ formatted to match the other sidebar widgets. The client has a bare minimum of HTML to contend with and has control over what appears in the list – everyone’s happy!

Adding a Sticky Header in WordPress

July 31, 2013 by Debbie Campbell·2 Comments

I found a very simple, nice CSS-only method for making a sticky header in WordPress today. This is for Genesis but is easy to use with non-Genesis themes.

Clean Custom NextGen Gallery Portfolio

June 29, 2013 by Debbie Campbell·4 Comments

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:

<?php 
/**
Custom Mortensen Template Page for the album overview (extended)
You can check the contents when you insert the tag <?php var_dump($variable) ?>
If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($galleries)) : ?>

<div class="ngg-albumoverview">	
	<!-- List of galleries -->
	<?php foreach ($galleries as $gallery) : ?>

	<div class="ngg-album">
		<div class="ngg-thumbnail">
			<a href="<?php echo $gallery->pagelink ?>"><img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/></a>
		</div>
		<div class="ngg-albumtitle"><span class="album-caption"><a href="<?php echo $gallery->pagelink ?>"><?php echo $gallery->title ?></a><span></div>
	</div>

 	<?php endforeach; ?>

	<!-- Pagination -->
 	<?php echo $pagination ?>

</div>

<?php endif; ?>

<?php

/**

Custom Mortensen Template Page for the album overview (extended)

You can check the contents when you insert the tag <?php var_dump($variable) ?>

If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>

**/

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($galleries)) : ?>

<?php foreach ($galleries as $gallery) : ?>

<a href="<?php echo $gallery->pagelink ?>"><img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/></a>

</div>

<div class="ngg-albumtitle"><span class="album-caption"><a href="<?php echo $gallery->pagelink ?>"><?php echo $gallery->title ?></a><span></div>

</div>

<?php endforeach; ?>

<?php echo $pagination ?>

</div>

<?php endif; ?>

And the code for gallery-clientname.php:

<?php 
/**
Custom Mortensen Template Page for the gallery overview with captions
You can check the content when you insert the tag <?php var_dump($variable) ?>
If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

<div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">

	<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>

	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
			<div class="caption-box"><span class="alt-caption"><?php echo $image->alttext ?></span></div>
		</div>
	</div>
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
	<br style="clear: both" />
	<?php } ?>
 	<?php endforeach; ?>

	<!-- Pagination -->
 	<?php echo $pagination ?>

</div>

<?php endif; ?>

<?php

/**

Custom Mortensen Template Page for the gallery overview with captions

You can check the content when you insert the tag <?php var_dump($variable) ?>

If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>

**/

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

<div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">

<?php foreach ( $images as $image ) : ?>

<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

<?php if ( !$image->hidden ) { ?>

<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />

<?php } ?>

</a>

<div class="caption-box"><span class="alt-caption"><?php echo $image->alttext ?></span></div>

</div>

<?php if ( $image->hidden ) continue; ?>

<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>

<?php } ?>

<?php endforeach; ?>

<?php echo $pagination ?>

</div>

<?php endif; ?>

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:

.ngg-albumoverview {
	margin-top: 0;
}
html>body .ngg-album {
	border: 0 !important;
	float: left;
	margin: 0 42px 42px 0;
	padding: 0 !important;
position: relative;
width: 186px;
}
.ngg-album .ngg-thumbnail a img {
	border: 4px solid #a0a2a2 !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 178px !important;
	width: 178px !important;
}
.ngg-album .ngg-thumbnail img:hover {
	border: 4px solid #c4c7c7 !important;
}
.ngg-albumtitle span.album-caption {
	background: url(images/gallery-caption-bg.png) top left repeat;
	left: 4px;
	padding: 10px;
	position: absolute;
	text-align: left;
	top: 4px;
	width: 158px;
	z-index: 20px;
}
.ngg-albumtitle span.album-caption a {
	color: #fff;
	font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 29px;
	font-size: 2.9rem;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.ngg-albumoverview {

margin-top: 0;

}

html>body .ngg-album {

border: 0 !important;

float: left;

margin: 0 42px 42px 0;

padding: 0 !important;

position: relative;

width: 186px;

}

.ngg-album .ngg-thumbnail a img {

border: 4px solid #a0a2a2 !important;

margin: 0 !important;

padding: 0 !important;

height: 178px !important;

width: 178px !important;

}

.ngg-album .ngg-thumbnail img:hover {

border: 4px solid #c4c7c7 !important;

}

.ngg-albumtitle span.album-caption {

background: url(images/gallery-caption-bg.png) top left repeat;

left: 4px;

padding: 10px;

position: absolute;

text-align: left;

top: 4px;

width: 158px;

z-index: 20px;

}

.ngg-albumtitle span.album-caption a {

color: #fff;

font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif;

font-size: 29px;

font-size: 2.9rem;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

}

Here’s the styling for the galleries:

.ngg-galleryoverview {
	margin: 0 0 15px;
	padding: 00;
	width: 100%;
}
.ngg-gallery-thumbnail-box {
	border: none;
	float: left;
	margin: 0 42px 42px 0;
	padding: 0;
	width: 186px;
}
.ngg-gallery-thumbnail {
	position: relative;
}
.ngg-gallery-thumbnail a img {
	border: 4px solid #a0a2a2 !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 178px !important;
	width: 178px !important;
}
.ngg-gallery-thumbnail img:hover {
	border: 4px solid #c4c7c7 !important;
}

.ngg-gallery-thumbnail .caption-box {
	background: url(images/gallery-caption-bg.png) top left repeat;
	left: 4px;
	padding: 10px;
	position: absolute;
	text-align: left;
	top: 4px;
	width: 158px;
	z-index: 20px;
}
.ngg-gallery-thumbnail span.alt-caption {
	color: #fff;
	font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 29px;
	font-size: 2.9rem;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.ngg-galleryoverview {

margin: 0 0 15px;

padding: 00;

width: 100%;

}

.ngg-gallery-thumbnail-box {

border: none;

float: left;

margin: 0 42px 42px 0;

padding: 0;

width: 186px;

}

.ngg-gallery-thumbnail {

position: relative;

}

.ngg-gallery-thumbnail a img {

border: 4px solid #a0a2a2 !important;

margin: 0 !important;

padding: 0 !important;

height: 178px !important;

width: 178px !important;

}

.ngg-gallery-thumbnail img:hover {

border: 4px solid #c4c7c7 !important;

}

.ngg-gallery-thumbnail .caption-box {

background: url(images/gallery-caption-bg.png) top left repeat;

left: 4px;

padding: 10px;

position: absolute;

text-align: left;

top: 4px;

width: 158px;

z-index: 20px;

}

.ngg-gallery-thumbnail span.alt-caption {

color: #fff;

font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif;

font-size: 29px;

font-size: 2.9rem;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

}

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

.page-template-galleries h1.page-title {
	color: #fff;
	font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 56px;
	font-size: 5.6rem;
	left: 10px;
	position: absolute;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-transform: capitalize;
	top: -115px;
	z-index: 10;
}

.page-template-galleries h1.page-title {

color: #fff;

font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif;

font-size: 56px;

font-size: 5.6rem;

left: 10px;

position: absolute;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

text-transform: capitalize;

top: -115px;

z-index: 10;

}

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!

A good-looking responsive menu for WordPress…

June 22, 2013 by Debbie Campbell·0 Comments

I haven’t found one yet.

My current holy grail is a Bootstrap-like responsive menu that I can use in non-Bootstrap custom themes. I followed the few tutorials on how to do this in the last week, but none of them wound up working (or not working like I expected them too).

I’m going to try Rachel Baker’s BootstrapWP (I’ve read lots of good things about its high quality of coding) and see if I can figure out how to get the menu into one of my custom themes based on Hybrid. I know it can be done, but I’m not enough of a programmer to easily get how to do it. Once I figure it out, I’ll post my solution here.

I like a good-looking menu. I want one I can use across the board for any WordPress custom theme.

position: relative;

web design and development notes

Tag: WordPress

Replace the WordPress ‘Howdy’ Greeting With a Timely Message

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

My First Post at WPTuts+

Making a List from Custom Meta Box Entries

Adding a Sticky Header in WordPress

Clean Custom NextGen Gallery Portfolio

A good-looking responsive menu for WordPress…