As usual, a new problem arose when I was developing this site. I didn’t want the featured slider to appear on every page, as it was located in the header. You too, may want to display page-specific headers on your site. Well, it’s not that hard.

The Fix

First, open your header.php file and copy and paste its contents into a new file. Name this new file “headerwithnofeaturedslider.php” or whatever is more semantic to you. Make sure you remove the offending featured slider portion (or include/remove what you want from this version of the header). Save and upload this new header file to your site.

Now you have two headers; you could easily make another, and another, and so on. Next we need to call them to appear on the pages in Wordpress. In my case, I wanted to include the “headerwithfeaturedslider.php” only on my home page. Every other page would load the normal header. So in my index.php file I replace the normal header tag with to include the new header file we created, like so:

<?php include (TEMPLATEPATH . '/header_notebook.php'); ?>  

All other pages will load the regular header. As you can see, it’s very simple. The most involving part would be changing your headers.

How to turbocharge Firefox

Visit

21 Firefox hacks and tweaks

Visit

Speed up Firefox

Visit

Bonus speed hacks

I figured I’d post up the best speed improvement hacks for Firefox right here, since that’s what you want, right?

To switch Firefox from a six banger to a v8, type “about:config” in your address bar and hit return. Then modify these lines as shown:

network.http.max-connections 30 to 96
network.http.max-connections-per-server 15 to 32
network.http.max-persistent-connections-per-server 6 to 8
network.http.pipelining false to true
network.http.proxy.pipelining false to true
network.http.pipelining.maxrequests 30 to 8
network.http.pipelining.ssl false to true
network.http.proxy.pipelining false to true

Visit Flip - A jQuery Plugin

The second option is a little different. It animates a hover and slides the top portion off to reveal some HTML below. Take a look. Again, I can think of multiple uses for these excellent plugins.

Visit Animate a Hover with jQuery

To begin, you will need a few things:

• Latest version jQuery
• jFlow 1.2
• jFlow (autoscrolling version

jFlow is an awesome tool to use for this purpose because it’s super lightweight, and the code is retardedly simple. Compared to coda slider and others, it’s a breeze. Install this, and set it up on your page where you would like it to appear. Play around with it for a bit.

Now you need to decide what you want to appear in the sliding window. In my case, I wanted an image, the post title, and an excerpt to appear. But first, we need to set up the PHP code to make this happen.

The PHP

First, put this bit of code just after your #myslides div and just before the first open div that will contain the first piece of sliding content.

<div id="mySlides">
<?php $countfeatured=0; ?>
<?php $my_query = new WP_Query('category_name=Featured&amp;showposts=4');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php if ($countfeatured == 0) { ?>

What this does is set query posts in a category - in this case, “Featured”, and to show four of them.

Now let’s make the first featured entry.

<h2 class="feature-title">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</h2>
<?php the_excerpt(); ?><br />
<strong><a href="<?php the_permalink() ?>" class="readmore add">View project</a></strong>
</div>
<div class="entry" style="padding-left:10px;">
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<img src="<?php echo get_option('home'); ?>/wp-content/themes/thematic/images/projects/<?php
// this is where the Lead Story image gets printed
$values = get_post_custom_values("frontpageproject"); echo $values[0]; ?>" alt="" class="featureimg" /></a>
						<?php $thumb = get_post_meta($post->ID, "thumb", true);
						if ($thumb != "") { ?>
							<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
							<img src="<?php $values = get_post_custom_values("frontpageproject"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumb" />
							</a>
							<?php the_excerpt(); ?>
						<?php } else { ?>
						<?php } ?><br/>

                        <p><?php $values = get_post_custom_values("link"); echo $values[0]; ?></p>

That looks like a lot, and in fact it contains some custom fields and other stuff which may be a bit advanced. In between each blank div that jFlow provides, you can put whatever sliding content you want. In this example I created several new classes to hold content such as the title, excerpt and “read more” bits that the PHP pulls in, and later a transparent section to hold the written content.

If we wanted to simply display a post, with an excerpt, you’d place something like so in between the divs:

<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</h2>
<?php the_excerpt(); ?><br />
<strong><a href="<?php the_permalink() ?>" class="readmore add">View project</a></strong>

In between each div, you must insert the following bit of code, which will look for more featured posts:

<?php $countfeatured++; ?>
<?php } elseif ($countfeatured == 1) { ?>

So for the second div, you would repeat the above process, and replace the “1″ with a “2″ in the $countfeatured variable.

The CSS

I used some less-than-perfect CSS to get what I wanted. But here it is.

/* =Featured Slider
-------------------------------------------------------------- */
#featurewrap {float: right; width: 520px;}/*holds entire feature container*/
#myController span{color:#FFF;margin-right:10px;cursor:pointer;}
#mySlides {}
#mySlides div {padding: 0px;} /*the divs that hold sliding content*/
#jFlowSlide{float: right; margin-top: -5px; background:url(images/featured.png) no-repeat; overflow: hidden; z-index:10;}/*bg image for slider*/
#jFlowSlide img {z-index:4;}
#myController span.jFlowSelected {background:#F00;}

#prevNext{position: absolute; margin: 100px 100px 0 -21px; width: 595px;}/*The navigation buttons, custom positioned*/
#prevNext img{position: relative;z-index: 2;cursor: pointer;}

.jFlowPrev{float: left; background: url(images/leftarrows.png) no-repeat left top; height: 35px; width: 45px;}/*left arrow*/
.jFlowPrev:hover {background-position: left bottom;}
.jFlowNext{float: right; background: url(images/rightarrows.png) no-repeat; height: 35px; width: 45px;}/*right arrow*/
.jFlowNext:hover{background-position: left bottom;}
jFlowSlideContainer .entry {float: right; margin-top: 10px; width: 180px;} /*the featured post entry*/

.featureimg { margin:16px 13px; border: thin solid gray; float: right; z-index:1;} /*the white background on each feature*/
.featurecontainer {background: white; position: absolute; width:470px; height: 100px; margin: 127px 200px 0px 16px; z-index:3; padding: 5px;}/*container for written post content*/
.feature {margin-left: 28px;}
.feature-title {margin: 5px 0px 0px 5px;}
.featurecontainer p {margin: 0px 10px 0px 10px;!important padding-left: 5px;}
.transparent {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.readmore {margin-left: 10px;}

Now if you should choose to use the previous and next navigation, or style the controller nav, that’s up to you. I wanted to automate mine. Also notice the “featurecontainer” and “transparent” classes, which I use to structure post content. Copy the code and repeat the same steps above into the blank divs that jFlow provides and you should be all set.

Fire it up

Last thing you need to do is put this in your header.php head, just after the php wp_head tag.

<script language="javascript">
$(document).ready(function(){

	$("#myController").jFlow({
		slides: "#mySlides",
		width: "400px",
		height: "200px",
		duration: 400
	});
});
</script>

Of course if you’re using the autoplay version, you’d want this simple extended version:

<script language="javascript">
$(document).ready(function(){

	$("#myController").jFlow({
		slides: "#mySlides",
		width: "470px",
		height: "210px",
		autoplay: 'true',
		easing: 'easeIn',
		duration: 1200
	});
});
</script>

I hope this helps some people get started building a featured content slider with Wordpress, and I look forward to updating this post with more detailed instructions. If you have any suggestions, tweaks, or can explain things further than I can (which is easy to do) please voice them.

Having a website is only the first piece of a much larger online marketing mosaic. It’s like having a great product sitting on a shelf - it’s useless if no one knows enough about it to buy it. I know how to get your site traffic.

Get your new or existing website seen & heard with effective online marketing & promotion tactics, including Pay Per Click, Search Engine Optimization, Email Marketing, and Link Building with my help. The ROI seen on many online marketing techniques is usually so good that it pays for itself and then some, and what’s more, you don’t have to hassle with the organizing, administrating and maintaining of the various programs - I do. All you have to deal with is results and profits.

When you work with me we will create a detailed marketing approach for the website and create the most effective campaign possible.

My online marketing services include:

* Pay Per Click advertising with Google, Yahoo and MSN
* External link building programs
* Online Advertising design & creation - banner ads and flash ads
* Sponsored blogging
* Online advertising – banners, advertisements
* Design & creation of unique landing pages for PPC, email, viral or one-off campaigns
Affiliate marketing set up

Email Campaigns

Email Marketing campaigns are a proven and highly effective marketing tool that can be used by any-sized business, at any stage in their marketing cycle, and with great results. They are cheap to start up and offer a large return on investment; it’s also completely trackable – meaning you can see where every hard-earned penny went and better target your audience.

Offers range from tailored email marketing services to SMBs, ranging from single newsletter or campaign design & creation to full-scale email marketing programs that see you delivering your monthly content and letting me do the rest.

Regardless of what stage you’re at in your SMB marketing lifecycle, email marketing can and should be used in some capacity. If you’re just starting out and don’t yet have an email list, no problem: I can add a list-building/newsletter subscription form to your website to start collecting and building relationships with your customers. If you already have a list, then we can build off that existing platform.

Good organization and simplicity are keys to a website that is easy to maintain and that can expand to meet your expanding needs. For those website owners who have the time and moderate technical skills I will design the site so that it may be maintained by the owner or his/her aid. I can even design custom software to help owners maintain their own sites. However, many website owners will choose to have updates made for them. My low rates and fast response time make this a viable option for nearly everyone.

If you already have a website we can maintain and manage that site for you. I handle everything from updates and domain name registration renewal to search engine submission.

SEO Friendly

Right out of the box, Wordpress comes ready to reign in the search engines with it’s powerful “All in One SEO” plugin which performs fantastically. I integrate it with Google Analytics, and other tools and strategies to give you a complete overview of you site’s performance and usage.

Blog Management

Wordpress is by nature a blogging tool; as the most popular one it has a huge support network and can easily be customized. If your website includes Articles, Press Releases, and Updates of any nature, our CMS will allow you to easily manage everything. I include all sorts of social networking goodies, RSS feeds, and more, so your blog gets maximum exposure.

Ecommerce

I can integrate most popular merchants with an easy to manage shopping cart on your blog or website. If you want to sell a few items or a warehouse full, there’s a solution.

Designing by web standards

I take pride in designing attractive websites by W3C compliant standards. Designing by these standards ensure cross-browser compatibility, keeps code clean, and makes sure that the site design is forward and backward compatible with web browsers. We check compatibility with Internet Explorer, Firefox, and Safari.

Making your message clear

I understands how critical the first five seconds of a user’s visit to your site truly is. Users don’t want to have to try too hard to find the information, service, or product they were looking for. That first five seconds may very well be all you ever see of that potential customer if the website doesn’t reflect what they were hoping to find.

Simple design, simple navigation

Web design should be simple, elegant and innovative. I prioritize the end-user experience first, and understand that the last thing anybody wants is to be confused by site navigation that doesn’t follow typical logic one expects when they get to a website.

Appealing to your client base

Before starting on your design, we do our research to make sure that the website strikes the right chord with you and your intended audience. I often recommend clients download the project questionnaire before starting.