I’m not sure if we were missing some easy way to do that, but we couldn’t think of a nice way to accomplish it.

Let’s Backup

I guess it will be helpful to give you some more context. We had created a Channel (our term for Weblog) for events. You could categorize the events, and they would publish in different places.

In this instance, the homepage, we wanted to pull an event from one category, but if there were none, then just display an event from another category.

The Initial Code

This code was separated out in an embed so that we could use it in various places on the site:

{assign_variable:channel_name="{embed:channel}"}
{assign_variable:category_id="{embed:category}"}

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}

	<h2>{title}</h2>
	{if events_feature_image}
		<p class="rightSide"><a href="{url_title_path="{embed:template_path}"}"><img src="{events_feature_image}" alt="" /></a></p>
	{/if}
	{if events_summary}
		{events_summary}
	{/if}

	<p><a href="{url_title_path="{embed:template_path}"}" class="more">Read more »</a></p>
{/exp:weblog:entries}

The code doesn’t really need to be explained; it’s not the important part of this post. So on the homepage, we had code that looked like this to pull in the event:

{embed="site/.events" channel="events" category="7" template_path="news-events/events"}

Now, what we really wanted to be able to do was to modify the exp:weblog:entries code to pull from a different category if there were no results. Something like this:

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}
…
	{if no_results}
		Code  to pull from a different category
	{/if}
…
{/exp:weblog:entries}

But the problem was, there really was no code that we could put in there that would pull from another category since you can’t nest exp:weblog:entries tags. So that’s when I remembered that you could stick an embed file in there that could have the exp:weblog:entries tag inside of it.

Then we realized that the code we wanted to write would be exactly like the code in the embed file we were already working with.

So we did a little investigation and found out that according to the documentation (see notes section), you cannot embed an embed within itself.

That makes sense, because you could create an infinite loop. But what if we knew that it would not return an infinite loop?

Modified Code

So we determined that what we could do is not pass in the category on the embed statement, and that would pull back any events.

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}
…
	{if no_results}
		{embed="site/.events" channel="events" template_path="news-events/events"}
	{/if}
…
{/exp:weblog:entries}

See how there is no category parameter this time? Here is the full modified code:

{assign_variable:channel_name="{embed:channel}"}
{assign_variable:category_id="{embed:category}"}

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}

	<h2>{title}</h2>
	{if events_feature_image}
		<p class="rightSide"><a href="{url_title_path="{embed:template_path}"}"><img src="{events_feature_image}" alt="" /></a></p>
	{/if}
	{if events_summary}
		{events_summary}
	{/if}

	<p><a href="{url_title_path="{embed:template_path}"}" class="more">Read more »</a></p>

	{if no_results}
		{embed="site/.events" channel="events" template_path="news-events/events"}
	{/if}
{/exp:weblog:entries}

And that worked!

Houston, we still have a problem…

But, we then realized that the same problem would occur if there were no future events in any categories. So, we still needed to go back and solve that problem by similarly passing the value for the show_expired parameter in the embed statement as well. I left that to my colleague, so I didn’t test this code, but this is my guess of how to solve that problem:

{assign_variable:channel_name="{embed:channel}"}
{assign_variable:category_id="{embed:category}"}
{assign_variable:show_expired="{embed:show_expired}"}

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="{show_expired}" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}

	<h2>{title}</h2>
	{if events_feature_image}
		<p class="rightSide"><a href="{url_title_path="{embed:template_path}"}"><img src="{events_feature_image}" alt="" /></a></p>
	{/if}
	{if events_summary}
		{events_summary}
	{/if}

	<p><a href="{url_title_path="{embed:template_path}"}" class="more">Read more »</a></p>

	{if no_results}
		{embed="site/.events" channel="events" show_expired="yes" template_path="news-events/events"}
	{/if}
{/exp:weblog:entries}

Conclusion

Was there some really easy way to do this that we completely blanked on? It seemed a little hacky, but the solution worked.

If you want to skip right to the demo, feel free.

View Demo

Disclaimer

Let me first say that I have started to size text in pixels and soft serving EMs to IE6. There are tons of different font sizing techniques you can use, but this is what is working for me. So use whatever technique you please, and adjust as needed.

Another thing: I hate text resizers. In my opinion, there is no reason to duplicate browser functionality. I feel the same about back and print links, but sometimes the functionality is requested, so I have to build it.

Concept

The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.

Code

Let’s first start as we always should, by creating the markup:

<ul class="resizer">
	<li class="small"><a href="#">A</a></li>
	<li class="medium"><a href="#">A</a></li>
	<li class="large"><a href="#">A</a></li>
</ul>

jQuery

The markup was simple enough, so let’s get started on the jQuery. First, we want to execute our code when the document is loaded, and then add an event when one of the resizer links are clicked:

$(document).ready(function() {
	$('.resizer a').click(function() {

	});
});

Next, we want to get the class of the parent of the link that has been clicked, remove any of the resizer classes from the body, and add the new one:

$(document).ready(function() {
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
	});
});

We also don’t want to regular action of the link to be followed, so we need to return false:

$(document).ready(function() {
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
		return false;
	});
});

I also think it is important to remember what text size a user has selected while browsing the site, so we will take advantage of the jQuery Cookie plugin to help us with that. We will set a cookie that denotes which size the user has selected:

$(document).ready(function() {
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
		$.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
		return false;
	});
});

Finally, we just need to add a check to the beginning of the script, so that if that cookie is set, we add that size as a class to the body:

$(document).ready(function() {
	if($.cookie('TEXT_SIZE')) {
		$('body').addClass($.cookie('TEXT_SIZE'));
	}
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
		$.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
		return false;
	});
});

CSS

Now is where we get to the really powerful part of doing the text resizing like this: the CSS. We can start by simply stating our text size when it is in the small/default state:

body { font: 12px/18px Arial, sans-serif; }

Then, we just need to make a simple adjustment for the medium and large sizes:

.medium { font-size: 16px; line-height: 22px; }
.large { font-size: 20px; line-height: 26px; }

So you can just carry through this idea for the rest of the elements that have been assigned a font size:

h1 { font-size: 30px; line-height: 36px; }
.medium h1 { font-size: 34px; line-height: 40px; }
.large h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 24px; line-height: 30px; }
.medium h2 { font-size: 28px; line-height: 34px; }
.large h2 { font-size: 32px; line-height: 38px; }
h3 { font-size: 18px; line-height: 24px; }
.medium h3 { font-size: 22px; line-height: 28px; }
.large h3 { font-size: 26px; line-height: 32px; }

View Demo

The idea is very simple, and it really separates the presentation and behavioral layers. So what do you think? Do you have another technique that you like?

View Demo

I had to create an “online newsletter” that had issues that were made up of multiple articles. I ended up creating two separate weblogs: one for each issue, and one for individual articles. In the issues weblog, there was a Playa custom field which could be used to pick the individual articles to be published in that issue. But, another one of Brandon Kelly’s fabulous extensions, FieldFrame, seems to be a much better choice for creating this functionality.

So, download, install, & enable the FieldFrame Extension, and let’s be on our way.

Creating the Custom Field Group

First, let’s create a field group named Newsletter. Now, we just need to create one custom field with the field name of newsletter_articles. Select FF Matrix as the field type.

We want to have two cells in the FF Matrix: articles_title & articles_body. The cell types should be text and textarea, respectively. Then, adjust the sizes as you see fit.

Creating the Weblog

Now that we have the custom field group setup, we need to create a new weblog called newsletter and make sure to assign our Newsletter field group to it. Now that the newsletter weblog is created, we can start adding newsletters.

First, fill in the main title field, and then add in one or more articles. Now, let’s get onto coding the output template.

Creating the Template

Let’s start by creating a new template group called newsletter. We have two different pages that we want to create: the page listing all of the newsletter entries, and the individual newsletter entry displaying all of the articles. But, we can do this with only one template.

So, open up the index template in the newsletter template group, and we will start by setting up the structure of the template:

{assign_variable:weblog="newsletter"}
{embed="newsletter/.header" title="{if segment_2}
	{!--Display individual newsletter entry title here--}
{if:else}
	Newsletters
{/if}
"}

{if segment_2}
	{!--Display full individual newsletter entry with 1 or more articles--}
{if:else}
	{!--Display list of newsletters entered--}
{/if}

{embed="newsletter/.footer"}

We start by creating a variable to store the name of our weblog. Then, I created a simple header and footer to store some of the HTML that frames the page. I am passing in the title value in an embed variable to the header and displaying that in the browser title.

If the segment_2 value is not null, we know that we are on an individual newsletter page, so we will display that title. If the segment_2 value is null, then we are on the main newsletter listing page, so we just display Newsletters.

We are using the same conditional again for the content on the page. We either show the individual newsletter entry with the articles, or we show the list of newsletter entered. So let’s build out the code a little more. First, let’s finish displaying the title:

{embed="newsletter/.header" title="{if segment_2}
	{exp:weblog:entries weblog="{weblog}" limit="1" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
		{title} : {entry_date format="%F %j, %Y"}
	{/exp:weblog:entries}
{if:else}
	Newsletters
{/if}
"}

Pretty simple stuff here, just displaying the title and entry date of the newsletter entry. Next, let’s tackle displaying the single newsletter entry view:

{if segment_2}
	{exp:weblog:entries weblog="{weblog}" limit="1" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
		<h1>{title}: {entry_date format="%F %j, %Y"}</h1>

		{newsletter_articles}
			<div class="entry">
				<h2>{articles_title}</h2>
				{articles_body}
			</div>
		{/newsletter_articles}
	{/exp:weblog:entries}
	<p><a href="{path="newsletter"}">« Back to Newsletters</a></p>

The beginning should look pretty normal: just using the standard exp:weblog:entries tag to pull in the individual entry. We first display the title and entry date. Then, the next part is where we are taking advantage of the FieldFrame Matrix. We are basically just looping through all of the newsletter_articles and displaying them in divs.

Finally, let’s finish up by displaying the list of newsletter entries:

{if:else}
	{exp:weblog:entries weblog="{weblog}" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
		{if count == 1}
			<ul>
		{/if}

			<li><a href="{url_title_path="newsletter"}">{title}: {entry_date format="%F %j, %Y"}</a></li>
		{if count == total_results}
			</ul>
		{/if}
	{/exp:weblog:entries}
{/if}

Simple stuff again: just looping through all newsletter entries and displaying them in a list. The two conditional statements are so you don’t end up with any empty unordered lists when there are no entries.

View Demo

I wish I would have realized this would have been a more efficient way to build a newsletter in EE for the project; but, this is why always learning is so important.

• The Choosing an Open Source CMS book was won by Eric D. Greene with his comment on the blog article.

• The WordPress 2.7 Complete book was won by Adrian Turner with his Twitter entry.

• The Learning jQuery 1.3 book was won by CodeJoust Chattanooga Webdesign Development for their comment on the blog article.

The winners have been contacted, but if their are any problems, I will choose a new winner. Thanks everyone for the entries, and I hope to be able to do this again.

But first, let me provide a little more detail about the books.

Learning jQuery 1.3

To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with JavaScript, the library’s design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency.

Revised and updated for version 1.3 of jQuery, this book teaches you the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features.

Full Book Detail

WordPress 2.7 Complete

Using WordPress you can easily create dynamic blogs and web sites with great content and many outstanding features. It is an ideal tool for developing blogs and although it is chiefly used for blogging, it can also be used as a complete CMS with very little effort. You can customize the features, incorporate your own design, and even write your own plug-ins with ease. Its versatility and ease of use have attracted a large, enthusiastic, and helpful community of users. While it is easy to get started with WordPress, its full power is not obvious.

If you want to create a powerful, fully-featured blog or non-blog web site in no time, this book is for you. It will give you a rapid and straightforward introduction to the rich and powerful features of WordPress and get you up and running with a state-of-the-art blog as quickly and painlessly as possible. It will help you learn everything WordPress has to offer, from the ground up, so you can build your complete web site. You will see many of WordPress’s hidden powers that will help you build a fully functioning web site.

Full Book Detail

Choosing an Open Source CMS

There are many powerful open source CMSs available to take the pain away from managing a web site. These systems are feature rich, often easy to use, and free. Unfortunately, there are so many choices it’s tough to be sure you’re choosing the right one. How can you be sure that you are selecting and working with the right tool?

This book will guide you through choosing the right CMS for your needs. You can be confident in your choice of CMS for the needs of your project. It will also help you make a start using the CMS, and give you a feel for what it’s like to use it – even before you install it yourself.

Are you bewildered by the many open source CMSs available online? Open source CMSs are the best way to create and manage sophisticated web sites. You can create a site that precisely meets your business goals, and keep the site up to date easily because these systems give you full control over every aspect of your site. Because open source CMSs are free to download, you have a huge amount of choice between the various systems.

Full Book Detail

How to Enter

There are two different ways to enter:

1. Post a comment on this blog post with the book of your choice: jQuery, WordPress, or CMS. Make sure you provide a valid email address so that I can get in touch with you if you win.
2. Tweet about it. Here is what you need to tweet:

   http://bit.ly/5J7Gj Free Packt Book Giveaway from @davist11 I want the (BOOK NAME HERE) book.

   Then just replace BOOK NAME HERE with the book of your choice: jQuery, WordPress, or CMS.

Contest Details

You can enter once by submitting a comment on this post and as many times as you want on Twitter. The contest will end Friday, July 24th at 6 PM ET. Once over, I will randomly choose the winners and notify them to get their addresses.

That’s it, now get going and enter already. Big thanks to Packt Publishing for sponsoring the giveaway!

So I ask you: what is Microsoft supposed to do?

It isn’t their fault that users won’t upgrade their browser.

Suck It Up

If you call yourself a web developer, you should be able to make things presentable in IE6. If you can’t, then you probably shouldn’t call yourself one. So suck it up and deal with it. Doesn’t the challenge make our jobs more interesting?

I’m not saying that your site has to look exactly the same in all browsers. We already know the answer to that question. Just make it presentable. Make sure a user can access all content on the site. Remember, it’s still all about the content.

Better Yet

Take a look at the traffic to the site and determine to what degree you even need to support it. If IE6 visitors only compromise a very small percentage, maybe consider using Andy Clarke’s Universal Internet Explorer 6 CSS. That will put the content front and center in IE6, and you won’t even have to worry about it.

Just please, stop complaining.

</rant>

Maybe I need to explain a little better what I am referring to. Instead of using a label that is next to or above the input element, the label is actually within the input. Then, when the input is focused, the label goes away and you can enter your value into it. Finally, when the input is no longer focused, if there is no value entered, the inline label is then added back in.

See Demo

My Solution

The title attribute.

It’s so simple, but perfect. A great benefit of using the title attribute, is that when you hover over the input, you get a little tooltip displaying the inline label. So all I need to do is add a title attribute with the text that we want to have show up as the inline label. Then, we just use a little jQuery to make it all happen.

The jQuery

First, we want to select each input that has a title attribute, once the document is loaded:

$(document).ready(function() {
	$('input[title]').each(function() {
	…
	});
});

Next, if the value of the input element is empty, we want to take the title attribute and add it as the value of the input.

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}
	});
});

After that, we want to setup a function that will fire once the input is focused. When it is focused, if the value is equal to the title attribute, we want to set the value to nothing and add a class of focused:

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}

		$(this).focus(function() {
			if($(this).val() === $(this).attr('title')) {
				$(this).val('').addClass('focused');
			}
		});
	});
});

The reason why we add the class of focused is so that we can change the text color, border or anything to make it noticeable that the input is being focused. You can see this effect in the demo.

Finally, we want to add a function that will fire when the input loses focus. When it does, if the input value is empty, we want to set the value back to the title attribute and remove the class of focused:

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}

		$(this).focus(function() {
			if($(this).val() === $(this).attr('title')) {
				$(this).val('').addClass('focused');
			}
		});

		$(this).blur(function() {
			if($(this).val() === '') {
				$(this).val($(this).attr('title')).removeClass('focused');
			}
		});
	});
});

See Demo

And that’s it. It’s just a little bit of code, but it can go a long way. So take it and build on it.

Be the Expert

We have to remember that we are the web experts in this relationship. We need to show confidence when talking with clients. Talk authoritatively about the details of the project and show them that we know what we are talking about. Just like we wouldn’t go tell an architect how to design a house, our clients need to trust us to build their website.

Stick to Your Guns

So let’s say a client suggests something that you know would work better if you did it a different way; don’t just say yes to the client, make your suggestion and build a case for it. Reference other examples. Site statistics. Fight for the best solution. Remember, you are the expert.

Read, Browse, and Read Some More

The web is full of great articles, bad examples of web sites, good examples of web sites, and much more. So by just spending time browsing the web, you can amass a huge amount of knowledge about what works and what doesn’t. This will provide you with loads of ammunition to use when clients need your guidance.

It’s Hard

I struggle with it all the time. It’s hard to say no to a client when they are the ones paying you. But the best thing to do is to make your suggestions, back it up with statistics & examples, and hope that the client trusts your judgment.

Remember, you are the expert.

There was basically no part of my jury duty experience that was pleasurable. Let me walk you through how my day went.

Getting Up Early

First off, I had to get up super early in order to get there on time. If I am just going to be waiting around most of the day, why do I have to be there at 8:15am?

Parking

So I pulled into the parking lot that they told me to park in, and started to walk to the court house. But wait, I had no clue where to go. There were no signs at all. Luckily I guessed right, or I would have been late.

Security

Since I was going into a court house, I totally expected to have to go through security. I was told that jury duty would probably end up being a lot of waiting around, and I saw that they had wireless internet access there, so I figured I would bring my laptop and get some work done.

First, I had to check my cellphone since it had a camera on it. I’m not really sure what I would want to take pictures with, but whatever, I checked it. I did feel a little lost without my phone though.

Next, I had to go through the metal detectors and put my bag on the x-ray machine. The security officer asked me to take out my laptop and turn it on. I was confused as to why I would need to turn it on, but I hit the button and waited for it to power up. Then, he sees that my laptop has a built-in camera, and tells me that I can’t bring it in.

I looked at him befuddled because I couldn’t imagine sitting with my laptop facing out in the courtroom, taking pictures, and not having someone say something to me. The security officer tells me that I have to take it back to my car. So, I had to walk the quarter of a mile back to my car, put the laptop in there, then walk back and go through security.

Seems a little ridiculous, right? I must give them credit for actually having wireless internet, but not being able to bring in my laptop really pissed me off.

The Waiting Room

Once I got through security and checked in, I was directed to a big room with a bunch of tables and chairs where we would wait for the next hour or so. Of course, the chairs were jammed in together, and there were not enough seats in the room for everyone.

We watched a 15 minute training video, and then the courthouse employees tried to get us to donate money to the court system. Yeah, after you put me in a bad mood because I couldn’t bring in my laptop, I’m sure I’ll jump at the opportunity to give you money.

What a great start to the morning.

The Next Waiting Room

Finally, my group got called to the courtroom, and we stood around and waited for about two hours until we finally got called into the court room to go through the jury selection process.

So again, more waiting, that’s basically what I did all day.

Does anyone think about the experience?

Here we are in a situation where we are supposed to be impartial and have no biases, and I was in a piss poor mood. Why don’t they make these kind of situations as painless as possible? Why isn’t there someone making sure that the experience of having jury duty is not awful?

Just like we devote time thinking about users’ experiences on the websites we are creating; organizations need to consider what those experiences outside of the web are like.

Who is it for?

This book is definitely aimed toward beginning users of EE who have some knowledge of HTML. There is no knowledge of EE needed in order to read this book. So basically anyone who wants to learn how to use EE would benefit from reading this. While I have had some experience with EE, I found many parts of this book that were more of a review for me.

What I liked

I really liked that Leonard uses a lot of screenshots and code snippets to help walk through how he is doing something. They definitely would have helped me to comprehend some of the EE concepts that I did not understand until devoting a lot of time online doing research.

This book does a great job of covering a variety of topics, from installing EE and creating a calendar to using other modules and plugins. Even though I have prior experience with EE and this book is geared toward beginners, I did learn a few things about EE from reading this book.

What I could do without

There seemed to be a large chunk of the book devoted to applying CSS to the examples to make them presentable. I don’t think there is any need to go through and explain the CSS; people are buying the book for information about EE.

I also wish that the example site that is used in the book were a bit more realistic. I really learned a lot from Mike Boyink’s Building a Church Site and Building a Small Business Site tutorials because the content and functionality of the sites were real.

Conclusion

This book is really the only EE book out there. So if you are one of those people who has trouble learning from online tutorials and needs a book, this is definitely a solid choice to get started with EE. You can get a preview of it by downloading a sample chapter.

Update

I actually wasn’t aware of this, but Mike Boyink also has his tutorials available as books.

If anything, it gives visitors a chance to see my ability to code with web standards. I take the time and effort to write well structured XHTML, so it is still readable without any style applied.

I am striping my design with the CSS Naked Day WordPress Plugin. I encourage everyone else to strip down and show off your body.

Is anyone else going naked today?

So basically, Mr. Brown has people in the industry come in and speak to his students every Friday. After looking at the list of other speakers, I sure was nervous. I mean; I go to conferences to see some of these guys speak.

Mr. Brown has a great program going, and I was glad to be a part of it. He is one of the few teachers that actually teach about web standards and is a member of the WaSP Education Task Force. He also gave a presentation at RefreshDC about web education the night before my presentation, that I unfortunately missed.

My Presentation

I decided to focus my presentation on my path through web development, some tips to become successful as a front-end developer, and then how to maintain that success.

I was pretty nervous, and I felt like I raced at times, but I think it turned out well. Mr. Brown has posted the audio from the presentation on his site.

I would love to hear any feedback on the presentation, so let me know what you all think.

I don’t think it’s necessary to discuss the benefits of body ids because I have already discussed them in the other posts. So if you still aren’t using body ids/classes, go read the articles, and start using them.

The Plan

This seems so straightforward that I’m not sure why I didn’t start with this method. So basically, I look at the URI, and if it is equal to / then I give it a body id of home. Otherwise, I grab the first “folder” and set that as the body id.

Example

Let’s say that the URI is: /about/team/leadership/. The body id would be about. Ok, the seems easy, let’s get to the code.

The Code

Here is our setBodyId function:

function setBodyId() {
	$path = $_SERVER['REQUEST_URI'];

	if($path === '/') {
		$bodyId = 'home';
	} else {
		$bodyId = substr($path, 1, (strpos($path,'/',1)-1));
	}

	return $bodyId;
}

If you are using this in WordPress, put this function in your theme function.php file.

Then, you want to call the function and assign it to a variable:

$bodyId = setBodyId();

Finally, if the $bodyId variable is not empty, add the id attribute on the body tag:

<body<?php if(!empty($bodyId)) echo ' id="'.$bodyId.'"';?>>

Conclusion

It’s so simple, yet powerful. This could also easily be recoded in other programming languages. What do you think? Any ideas for improvement?

Some people may want to skip the post and get to the demo and source files:

View Demo Download Source Files

So, why not use a plugin?

Well, I think that a contact form is so simple that a WordPress plugin that doesn’t provide exactly what I want is pretty lame. Plus, I don’t need all those fancy interfaces for building the form; I just need the code.

The Plan

Our plan is to create a custom WordPress Page Template, then create a page that uses that template. Finally, we will add in a little jQuery to improve the form. Let’s write a little pseudo code to help determine how our page template will be structured.

Pseudo Code

If form was submitted validate it
	If the form was submitted successfully
		Send email(s)
	Else
		Set variables to show errors

If the form was submitted successfully
	Show thank you message
Else
	Show form (with errors if there are any)

Creating the WordPress Page Template

Alright, so first, we are going to start with some basic stuff: define the template name, include the header/sidebar/footer, and setup the basic structure of our pseudo code.

<?php
/*
Template Name: Contact Form
*/
?>

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {
	//If there is no error, send the email
	if(!isset($hasError)) {

	}
} ?>

<?php get_header(); ?>

<?php
//If the email was sent, show a thank you message
//Otherwise show form
if(isset($emailSent) && $emailSent == true) {
?>

<?php } else { ?>

<?php } ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The Form

Next, let’s code the actual form. I also want to provide the ability for the user to enter some text to go above the form, so we are going to use the regular loop:

<?php if(isset($emailSent) && $emailSent == true) { ?>

	<div class="thanks">
		<h1>Thanks, <?=$name;?></h1>
		<p>Your email was successfully sent. I will be in touch soon.</p>
	</div>

<?php } else { ?>

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
			<h1><?php the_title(); ?></h1>
			<?php the_content(); ?>

			<?php if(isset($hasError) || isset($captchaError)) { ?>
				<p class="error">
					There was an error submitting the form.
				<p>
			<?php } ?>

			<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

			</form>

		<?php endwhile; ?>
	<?php endif; ?>
< } ?>

If the emailSent variable is set to true, we display the thank you message. Otherwise, we show the form. So we are outputting the title of the page, and any content that was entered. Then, we are checking to see if there was an error. Finally, we display the form:

<ol class="forms">
	<li>
		<label for="contactName">Name</label>
		<input type="text" name="contactName" id="contactName" value="
		<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>"
		 class="requiredField" />
		<?php if($nameError != '') { ?>
			<span class="error"><?=$nameError;?></span>
		<?php } ?>
	</li>

	<li>
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="
		<?php if(isset($_POST['email']))  echo $_POST['email'];?>"
		class="requiredField email" />
		<?php if($emailError != '') { ?>
			<span class="error"><?=$emailError;?></span>
		<?php } ?>
	</li>

	<li class="textarea">
		<label for="commentsText">Comments</label>
		<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField">
		<?php if(isset($_POST['comments'])) {
			if(function_exists('stripslashes')) {
				echo stripslashes($_POST['comments']);
			} else {
				echo $_POST['comments'];
			}
		 } ?></textarea>
		<?php if($commentError != '') { ?>
			<span class="error"><?=$commentError;?></span>
		<?php } ?>
	</li>
	<li class="inline">
		<input type="checkbox" name="sendCopy" id="sendCopy" value="true"
		<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true)
			echo ' checked="checked"'; ?>
		/>
		<label for="sendCopy">Send a copy of this email to yourself</label>
	</li>
	<li class="screenReader">
		<label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label>
		<input type="text" name="checking" id="checking" class="screenReader" value="
		<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>"
		/>
	</li>
	<li class="buttons">
		<input type="hidden" name="submitted" id="submitted" value="true" />
		<button type="submit">Email me »</button>
	</li>
</ol>

Note: Line wrapping added for readability.

Ok, wow, that may seem like a lot. So let’s break down the name field to see what this code is actually doing:

<li><label for="contactName">Name</label>
	<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
	<?php if($nameError != '') { ?>
		<span class="error"><?=$nameError;?></span>
	<?php } ?>
</li>

We are displaying each form field in a list item, displaying the label, input field, and then showing an error message if there is one. We are also displaying the value in the form field if it was already submitted.

So in essence, we are just doing that for each field of the form. You could easily go into the code to add more fields.

We are also using honeypot captcha to see if a bot was trying to submit the form:

<li class="screenReader">
	<label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label>
	<input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
</li>

That list item is pushed off the page with CSS, and if there is a value in that field, we can assume that it is not a human trying to submit the form:

.screenReader {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

The Validation

Next, we are going to have a conditional statement to determine if the form was submitted or not:

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {

} ?>

Within that conditional, is where we are going to do all of our validation of the required fields. First, let’s check to see if our honeypot captcha form field is filled in. If it is, then we will display an error and not check anymore of the form:

//Check to see if the honeypot captcha field was filled in
if(trim($_POST['checking']) !== '') {
	$captchaError = true;
} else {

} 

So if the captcha field was left blank, we will continue to validate the required fields:

//Check to make sure that the name field is not empty
if(trim($_POST['contactName']) === '') {
	$nameError = 'You forgot to enter your name.';
	$hasError = true;
} else {
	$name = trim($_POST['contactName']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '')  {
	$emailError = 'You forgot to enter your email address.';
	$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
	$emailError = 'You entered an invalid email address.';
	$hasError = true;
} else {
	$email = trim($_POST['email']);
}

//Check to make sure comments were entered
if(trim($_POST['comments']) === '') {
	$commentError = 'You forgot to enter your comments.';
	$hasError = true;
} else {
	if(function_exists('stripslashes')) {
		$comments = stripslashes(trim($_POST['comments']));
	} else {
		$comments = trim($_POST['comments']);
	}
}

Again, that may seem like a little much, so let’s just take a look at the validation on the name field:

if(trim($_POST['contactName']) === '') {
	$nameError = 'You forgot to enter your name.';
	$hasError = true;
} else {
	$name = trim($_POST['contactName']);
}

If the name field if empty, set a variable that will display the name error and set a flag saying that there was an error on the form. Otherwise, set a variable that will contain the name value from the form.

Sending the Email

Now, we want to send the email if there are no errors:

//If there is no error, send the email
if(!isset($hasError)) {

	$emailTo = 'me@somedomain.com';
	$subject = 'Contact Form Submission from '.$name;
	$sendCopy = trim($_POST['sendCopy']);
	$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
	$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

	mail($emailTo, $subject, $body, $headers);

	if($sendCopy == true) {
		$subject = 'You emailed Your Name';
		$headers = 'From: Your Name <noreply@somedomain.com>';
		mail($email, $subject, $body, $headers);
	}

	$emailSent = true;

}

Note: Items bolded are values that you will want to change before implementing.

I personally like to have the contact form submission come from myself. That way, I just setup a filter in Gmail, and I can guarantee that it won’t get caught in my spam filter. The second email is only sent if the user checks the checkbox to send a copy to themselves.

View Entire Custom Page Template

Creating the Page in WordPress

First, you want to upload the contact-form.php page template to your themes folder. Next, you will create the page in WordPress and select Contact Form as the page template.

Then, just publish your page and you will have your contact form. Well, the form will be usable, but we are going to add in some CSS and jQuery to finish it off.

Styling the Form

I recently wrote an article about styling forms, so we are just going to stick with some basic styles:

.screenReader { left: -9999px; position: absolute; top: -9999px; }
.thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding: 10px; }

/*****Forms*****/
ol.forms { float: left; list-style: none; margin: 0; width: 100%; }
ol.forms li {
	clear: both;
	float: left;
	margin-bottom: 18px;
	position: relative;
	width: 100%;
}
ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	font-weight: bold;
	padding-right: 20px;
	width: 100px;
}
ol.forms input, ol.forms textarea {
	border: 1px solid #7E8AA2;
	border-radius: 3px;
	font: inherit;
	-moz-border-radius: 3px;
	padding: 2px;
	-webkit-border-radius: 3px;
	width: 214px;
}
ol.forms textarea { height: 300px; width: 334px; }
ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
ol.forms li .error { font-size: 12px; margin-left: 20px; }
ol.forms li.textarea .error {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}
ol.forms li.screenReader { margin-bottom: 0; }
ol.forms li.buttons button {
	background: #ff9800;
	border: none;
	color: #000;
	cursor: pointer;
	font: 16px/16px "Avenir LT Std", Helvetica, Arial, sans-serif;
	overflow: hidden;
	padding: 6px 3px 3px 3px;
	text-transform: uppercase;
	width: auto;
}
ol.forms li.buttons button:hover { color: #222; }
ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; }
ol.forms li.inline input { width: auto; }
ol.forms li.inline label { display: inline; float: none; width: auto; }

So drop that CSS in your theme stylesheet and you will see the form start to look much better.

Enhancing the form with some jQuery

I have also already written about creating AJAX forms with jQuery, but I thought I would specifically talk about an AJAX script for a contact form.

First, we want to execute our jQuery when the document is ready and the form was submitted:

$(document).ready(function() {
	$('form#contactForm').submit(function() {

		return false;
	});
});

Next, we want to hide any error messages if there are any and validate any required fields which are denoted with a class of requiredField:

$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {

});

After that, we want to validate that the field is not empty and append an error message if it is:

if(jQuery.trim($(this).val()) == '') {
	var labelText = $(this).prev('label').text();
	$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
	hasError = true;
}

If the field is not empty and also has a class of email, we want to validate that the email address is valid:

 else if($(this).hasClass('email')) {
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	if(!emailReg.test(jQuery.trim($(this).val()))) {
		var labelText = $(this).prev('label').text();
		$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
		hasError = true;
	}
}

If there are no errors, then we want to replace the submit button with a loading image:

if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
	$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
});

Note: You will need to update the source of the image to wherever you upload it in your theme.

Finally, let’s submit the form via an AJAX request, slide the form up, and show a thank you message:

var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
	$('form#contactForm').slideUp("fast", function() {
		$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
	});
});

Take a look at the entire script:

$(document).ready(function() {
	$('form#contactForm').submit(function() {
		$('form#contactForm .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text();
				$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
				hasError = true;
			} else if($(this).hasClass('email')) {
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val()))) {
					var labelText = $(this).prev('label').text();
					$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
					hasError = true;
				}
			}
		});
		if(!hasError) {
			$('form#contactForm li.buttons button').fadeOut('normal', function() {
				$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
			});
			var formInput = $(this).serialize();
			$.post($(this).attr('action'),formInput, function(data){
				$('form#contactForm').slideUp("fast", function() {
					$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
				});
			});
		}

		return false;

	});
});

Just include it in the head of your document after jQuery, and you are good to go:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/contact-form.js"></script>

Note: You may need to change the source depending upon where you upload the files in your theme.

Conclusion

View Demo Download Source Files

That’s it! Just upload the files and you’ve got your form. Since you’ve got the code right in front of you, it should be very easy to tweak and add on to. Enjoy!

This is definitely not me trying to tell you to code in a certain way; they are just some tips that I have found to become very useful for myself. I hope you enjoy, and feel free to share other tips.

It’s definitely nice that the plugin doesn’t throw an error, but I really don’t want that message displayed on my site. So what’s the solution? jQuery of course.

When the Tweet Comes Through

Here is the markup that is displayed on my site when a tweet comes through successfully:

<div id="twitterContainer">
	<a class="twitter-link" href="http://twitter.com/davist11/status/1200405534">
		I feel like I'm in an episode of Seinfeld right now.
	</a>
</div>

When the Tweet Doesn’t Come Through

This is what you end up with:

<div id="twitterContainer">
	No public Twitter messages.
</div>

The jQuery

My thinking is that I will check the contents of div#twitterContainer to see if it is No public Twitter messages. If it is, I think it would be useful to replace that text with a link to my Twitter account with a message telling people to follow me.

So first, let’s execute the jQuery code when the document is loaded:

$(document).ready(function() {

});

Next, we are going to check and see if the contents of div#twitterContainer is No public Twitter messages:

$(document).ready(function() {
	if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {

	}
});

Finally, let’s just replace this text with a link to my Twitter feed:

$(document).ready(function() {
	if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {
		$('div#twitterContainer').html('<a href="http://twitter.com/davist11" class="twitter-link">Follow Me on Twitter</a>');
	}
});

Why are Body Ids Useful?

Body ids can be useful for styling sections differently, displaying certain parts of a dynamic template, displaying current navigation states, and many other things.

A Simple Example

Let’s say that I want to have my font size be 14 pixels, except on the homepage. It would be as easy as this:

body { font-size: 14px; }
body#home { font-size: 12px; }

Pretty useful. By using body ids, we now have a unique hook for each section of the website.

Why not Body Classes?

I do utilize body classes as well. I typically use the body id to indicate the section, then other various items for the body classes.

For Example

For my own blog, I have some pages that I want to have a left gutter on it so that I can push images, quotes, etc. into the column. I also have another class that indicates when it is a blog article page. So, I can just continue to use multiple classes on the body to help me control the width and layout of the page.

Here is what the body element looks like on a blog article on my site:

<body id="blog" class="subpage leftGutter article">

The subpage class just indicates that it is not the homepage. Not completely necessary since I already have a specific id on the homepage, but it can sometimes become useful.

The leftGutter class is used to push the content area to the right and make it narrower. Then, I can pull elements into the left-hand gutter as well.

The article class is useful because some of the markup for the blog entry information is the same as the homepage and archive pages. Using this class, I can be more specific with my styles to change the way that these elements are displayed on the blog article page.

I always try and add classes and id attributes as high up in the tree as possible. This let’s me utilize descendant selectors in the CSS without having to add additional classes and ids lower down.

Setting the Body Id in Expression Engine

I want to have complete control over the body id, so I want to be able to have it set dynamically and also be able to set it statically.

So my thought behind this is that first, I want to check to see if the body id was set statically. When I say statically, I mean passing the variable in as an attribute on my embed statement. Next, I will then set the body id dynamically.

Setting the Id Statically

In order to make changes to the overall website structure simpler, I have a header template the sits in the includes template group. So in all of the other template groups, I embed the header on the page:

{embed="includes/header"}

Then, if for some reason I want to specifically pass in a body id, I can just change it to this:

{embed="includes/header" body_id="contact-us"}

So the first step in the header is to check to see if the embed:body_id variable is set:

<body
{if embed:body_id}
	id="{embed:body_id}"
{/if}
>

Note: Line wrapping added for readability.

Dynamically Setting the Id

If we are not statically setting the body id, we want to then do it dynamically. My thinking is that I will take advantage of Expression Engine’s URL segments to determine which section we are in.

Here is an example of URL segments using the following URL:

http://ee.trevordavis.net/index.php/about/me/education/

• Segment 1 = about
• Segment 2 = me
• Segment 3 = education

Then, we can reference each segment like so:

• Segment 1 = {segment_1}
• Segment 2 = {segment_2}
• Segment 3 = {segment_3}

So basically what we want to do is assign the body id the value of {segment_1} if it is not empty. So continuing on our example:

<body
{if embed:body_id}
	id="{embed:body_id}"
{if:elseif segment_1}
	id="{segment_1}"
{/if}
>

Note: Line wrapping added for readability.

But wait, what about the homepage? The homepage will have nothing for the value of {segment_1}, so we can just put in an else statement:

<body
{if embed:body_id}
	id="{embed:body_id}"
{if:elseif segment_1}
	id="{segment_1}"
{if:else}
	id="home"
{/if}
>

Note: Line wrapping added for readability.

Here is the line of code without any line wrapping:

<body{if embed:body_id} id="{embed:body_id}"{if:elseif segment_1} id="{segment_1}"{if:else} id="home"{/if}>

I created a demo Expression Engine site to test this functionality.

View Demo Site

Walking Through the Demo Site

Since we have body ids for each section and an id on each list item in the navigation, I have created the current state for the navigation with a few simple line of CSS:

body#home ul#primaryNav li#homeNav a,
body#about ul#primaryNav li#aboutNav a,
body#services ul#primaryNav li#servicesNav a,
body#contact-us ul#primaryNav li#contactNav a {
	background: #B3602D;
	border-top-color: #B3602D;
	color: #fff;
}

Note: Line wrapping added for readability.

I also want to show the sidebar on all of the subpages, so I just need 1 more conditional:

{if embed:body_id || segment_1}
	<div id="sidebar">
	</div>
{/if}

This is checking to see if {embed:body_id} or {segment_1} are not empty, and displaying the sidebar if one or both are set.

These are just a few examples of using a body id in Expression Engine, but the possibilities are endless.

One More Thing

Another thing that I was trying to figure out was how to create a variable that I could reuse in multiple embed files. So what I want to do is in my conditional statement, determine that the body id should be and assign it to a variable. Then, I want to be able to access that variable in the footer without have to use the same conditional statement.

Is this possible? I was messing around with the {assign_variable} tag, but that didn’t seem to do the job because it can only be used in the same template. Anyone know how to do this? I’m relatively new to Expression Engine, so I am still learning.

In my second article, Creating a “Filterable” Portfolio with jQuery, I take a look at creating a portfolio that can be filtered by category.

This tutorial was kind of inspired by the effect that I created on my company’s portfolio.

How will this effect my web site?

Yes, I am not going to be able to write articles as frequently on my blog, but I am still going to be posting some articles. I will also post a note each week discussing my weekly NETTUTS article.

I hope you all enjoy the articles.