Frumph.NETWork

The first thing to understand is that there are ‘action’ locations all over the Easel theme and some in the ComicPress theme, ComicPress 2.9.2.28+ has a new one in the menunav area of the menubar, while the Easel theme’s menunav had some previously a new one is introduced in version 1.1.7

Those action locations allow you to use your child theme to ‘inject’ code into certain areas of the theme. With Easel the action location we are going to use is called ‘easel-menubar-menunav’ and in ComicPress it’s called ‘comicpress-menubar-menunav’ see the trend in the naming conventions yet? /grin

In both themes there’s a file available to be used in your child theme, it’s called “child-functions.php” If you do not have one you can create it.

The first thing we’re going to do is go to the Easel Options & ComicPress Options and disable the RSS feed from displaying in the menubar.

After that, open up the child-functions.php file in your child theme and let’s start adding the code.

For Easel:

add_action('easel-menubar-menunav', 'easel_social_icons');

function easel_social_icons() {
	echo '<a href="http://www.twitter.com/Frumph" title="Follow Frumph on Twitter" class="menunav-social menunav-twitter">Twitter</a>'."rn";
	echo '<a href="http://www.facebook.com/philip.hofer" title="Friend Frumph on Facebook" class="menunav-social menunav-facebook">Facebook</a>'."rn";
	echo '<a href="'.get_bloginfo('rss2_url').'" title="RSS Feed" class="menunav-social menunav-rss2">RSS</a>'."rn";
}

For ComicPress:

add_action('comicpress-menubar-menunav', 'comicpress_social_icons');

function comicpress_social_icons() {
	echo '<a href="http://www.twitter.com/Frumph" title="Follow Frumph on Twitter" class="menunav-social menunav-twitter">Twitter</a>'."rn";
	echo '<a href="http://www.facebook.com/philip.hofer" title="Friend Frumph on Facebook" class="menunav-social menunav-facebook">Facebook</a>'."rn";
	echo '<a href="'.get_bloginfo('rss2_url').'" title="RSS Feed" class="menunav-social menunav-rss2">RSS</a>'."rn";
}

Then we’re going to place 3 images into the images directory of your child theme, I put them into a subdirectory of that images directory called icons because i’m a stickler for organization.

The RSS, Twitter and Facebook images that I use

Notice that with these 3 images that the actually consist of a “normal” state and a “hover” state inside of the image itself, that way we do not need so many images loading all the time. The more CSS proficient people can add them all into a single image and do background-position’ing to find the right locations to use.

Next is the CSS, the CSS is the same for both ComicPress and Easel; you should put the CSS into the child-themes style.css so that it can be easier to path to the images in the images directory.

---

Now for the CSS

/* menunav social icons */

.menunav-social {
	text-indent: -9999px;
	display: inline-block;
	float: left;
	height: 25px;
	width: 25px;
}

.menunav-twitter {
	background: url('images/icons/twitter.png') no-repeat;
}

.menunav-rss2 {
	background: url('images/icons/rss.png') no-repeat;
	margin-right: 3px;
}

.menunav-facebook {
	background: url('images/icons/facebook.png') no-repeat;
}	

.menunav-social:hover {
	background-position: 0 -25px;
}

If you look at this css, the .menunav-social sets the block removes the text from displaying and allocations the 25px by 25px space to use, then each of the relative icons have their own class for which image to use, finally the .menunav-social:hover changes the positioning to show the hover state of the graphic when the icon is moused over.

… erm.. and that’s it, now you have social icons in your menubar.

- Phil