Kendra Schaefer » Web & Code

Wordpress Tutorial: How to Add a Form Inside of a Lightbox / Greybox

Kendra — Sun, 13 Dec 2009 16:10:31 +0000

On a recent web design project, it became necessary to drop a newsletter sign-up area in a rather space-restricted footer. Instead of try to cram the form fields into the footer itself, or redirect the user to a sign-up form page, I opted to drop the form into a lightbox – or to be specific – a greybox.

This is not a tutorial for beginners – if you’re building your first site, or don’t know much about HTML, I’m sorry to say I didn’t get into too much hand-holding here. This tutorial was created with Wordpress 2.8.5, and I used the Greybox Integrator Plugin.

You might want to start off by installing the plugin through your Wordpress control panel, or through the plugin site.

For an example of what we’ll be doing, check out the site I was working on. Bottom left-hand corner of the page, there’s a “Click here to subscribe” button. Click it. You’ll see what I mean. The newsletter subscription box is not a normal pop-up. I didn’t have to plunder anything from HotScripts, or fumble around with javascript. Instead, the form pops up in a Lightbox (Greybox, specifically). This was done almost completely with available plug-ins and some easy HTML & PHP.

Step 1: Build the form

This bit might seem fairly simple. There’s a billion Wordpress plug-ins that will let you easily create forms, then drop a special tag that references that form onto a Wordpress page, and wallah.

Problem: You tell Greybox to reference the page which houses your form. Greybox loads that page – the ENTIRE page, meaning your site template will load into the Greybox window as well, and your users will be seeing double copies of your site. Not very slick. You just want Greybox to load the form, and only the form – no extras.

You’ve got two major solutions here:

The coder way: If you’re functional with PHP, you can get around this by dropping some easy if statements into your index.php page, ie, if the website is on the form page, don’t load the theme or any other graphics. Or, tell it to load a totally different template to do some hot-shot form styling. I’d throw in an example, but everyone’s page is a different story. This is probably the best method, as it allows you to still use Wordpress plugins and pages to create the sign-up form.

The HTML-er way: Not good at coding, but good with design? Open up your hosting account file manager or jump on FTP, and upload a few form pages that reside outside of the Wordpress directory structure, with a pre-made script that handles the form. You should already know how to create a functioning form, and there’s a hundred billion ways to do it. One way is to create four pages: yourform.html, yourformhandler.php, sent.html and error.html (it doesn’t matter what you name them).

Yourform.html will hold the form fields of your contact form (the main form). This is the page that greybox will reference. Error.html will hold nothing but an error message in case the form doesn’t process. Literally, something like:

Form (greybox handles the title)

We're sorry, your form didn't go through. Want to try again? If not, please email us directly at email@emailaddress.com

Your sent.html should be similar, just a “Your form was sent successfully!”

yourformhandler.php will take care of form routing, redirecting the user to error.html if the mail didn’t go through, and redirecting to sent.html if it did. Etc.

Or you can skip all that, and use a form generator like Wufoo.

However you go about this, the end result should be a functioning form that resides outside of your Wordpress hierarchy.

About Greybox Integrator

Like many things in Wordpress, the Greybox functionality works with tags. When you install Greybox Integrator, a new tag button, similar to the wordress “link”, “more” and “lookup” tags, will appear in your page editing window. It’s called the GBI button. You can (and should) read more on exactly how to use Greybox by reading this.

Before moving forward, you should have Greybox integrator installed.

Step 2: In the appropriate page, add with a link to your form

In your Wordpress dashboard, navigate to the page where you want to add the form, or create a new page. Make sure you’re in HTML view, not “visual” view.

Type “Click here to subscribe!”, or any other text you’d like to use. Highlight the text you just typed, and with the text still highlighted, click the GBI button.

Enter “3″, and click OK.

Enter the path to your form. If you used the PHP method, and your form is a Wordpress page, enter the permalink to your form.

Enter a title.

Enter the width of your form – this is how wide your greybox window will be. Because my form only has two fields, I want to keep it small. If your form is larger, go ahead change the size to suit. Size should be entered in pixels.

Enter the height.

And there you go, a link is generated:

Now, when you go to your page or post on the front-end of your site, you’ll see the link to your form. Huzzah.

But what if you want to put the form outside of page content? Like in a sidebar, or a footer? Since greybox relies on tags to generate its links, you’ll still need to do step one and two above, creating a page, and then creating a greybox link in that, but then you’ll also need to pull the contents of your page into a div.

I found a great snippet of code for this, written by WordPress user stvwlf. Read more about it here on the Wordpress forums: http://wordpress.org/support/topic/266861

So, implementing a greybox on the sidebar or other non-content area requires a couple of extra steps, which are:

1. Create your form, as in step 1 above.

2. Create a new Wordpress page, and then follow the steps in step 2 above, to add a greybox link inside of that page.

3. Open up your index.php file, navigate to the place where you want to place your code, and inside of the

tags, drop this:

global $more; $about = new WP_Query(); $about->query('pagename=newsletter-sign-up'); while ($about->have_posts()) : $about->the_post(); $more = false; // set $more to false to only get the first part of the post ?> $more = true; // restore default $more behavior ?>

So, for example, if you want this in your footer, drop it between

(or whatever the div is called).

In the above code, you’ll need to change “newsletter-sign-up” in $about->query('pagename=newsletter-sign-up'); to the name of your own page. If you’re not using permalinks, you may need to change the query arguments to make sure your code can find, and is pointing to, the right page.

And that’s it!

Wordpress Tutorial: Prevent Page from jumping to top on Reload

Kendra — Sun, 11 Oct 2009 21:02:06 +0000

Big web page headers are in design vogue at the moment, so I thought I’d incorporate one into my new site, keeping all links and content below the fold. After I’d dropped the header into the template, I ran into an annoying problem: every time a user clicked a link, the view would bounce back to the top of the page as it reloaded, forcing the user to scroll all the way back down to the content area.

That might seem like an inconsequential problem, but the Herculean amount of mouse action involved discouraged users from browsing more than a page or two. I wanted a simple php-based solution, and I eventually found it on the WordPress forums courtesy of member gelo.tv.

Below, you’ll find a slightly-modified version of the gelo.tv’s original code, and the instructions to implement it. Using simple HTML page anchors and a bit of basic scripting, this code first checks to see whether or not the user has loaded the home page (where we want them to look at the header), and then checks to see whether or not there’s already an anchor hash tag in the URL.

If not, the code will add an anchor tag into the URL, forcing the page view down to a name= anchor set by you.

Step 1: Open your index.php template file, and delete the tag

Step 2: Using page anchors, set the location that you want the page to align with

Anchors create links to a location within the current page. Typically, anchors are used to link to a graphic or paragraph half-way down a long web page.

What we want to do here is decide where in the index.php file to drop our anchor. My anchor is set at the very top of my content div, so whenever a user clicks a link, the page reloads, showing the content aligned to the top of the browser window, and skipping the header.

Anchors are set as a parameter of any other tag. To add a page anchor, add name="youranchorname" to the div tag that begins your content section. For example:

BEFORE:

AFTER:

It doesn’t matter what the name of the anchor is.

Step 3: Insert the following php snippet into your index.php file, right where the body tag used to be.

global $anchor_var; $Url="Http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; $mystring = '#'; $pos = strpos($mystring, $Url); if (($pos === false) && (is_front_page() )) { $anchor_var = false; } else { $anchor_var = true; } ?>

Don’t forget to replace “YOURANCHORNAME” with the name of your anchor from step 2.

And that’s it. The original code featured an is_home() instead of an is_front_page(), but I found that this caused the script to stop working when I associated a specific page to be the home page in the WordPress back end.

Joomla 1.5 Tutorial: Make each menu item a different color

Kendra — Sun, 29 Mar 2009 00:13:33 +0000

This article covers the most basic method of giving each Joomla 1.5 menu item different visual properties. After you’ve learned how to separate each menu item into its own class, complete with its own styling, the design possibilities are endless.

I try to make my tutorials as easy on beginners as possible, but you will need some basic-intermediate CSS knowledge for this one. If you are just starting out doing web development of *any kind*, even if you’re just changing the occasional template, I highly, highly, highly recommend you use Firefox browser (if you’re not doing so already) with Firebug installed.

Firebug is a free plug-in for Firefox that lets you explore and manipulate any website, including your own, in ways you never thought possible. You can even temporarily edit your website live, without uploading a single file or going into your back end. Firebug gives you a visual representation of each area of your website, allowing you to pinpoint problems, grab the names of CSS divisions and classes just by pointing and clicking, and much more. Yeah, yeah, yeah, I’m a walking advertisement. But it really is that cool.

Download Firebug here

If you’re not already intimately acquainted with your site’s CSS, or you are modifying a template that someone else built, you will need Firefox with Firebug installed to complete this tutorial

You’ll also need basic – intermediate CSS knowledge

Oookay, enough faffing around.

Step 1: Make sure your top menu is in “list” mode

In your Joomla administration panel, go to Extensions > Module Manager.

In the Module Manager, find the module associated with your top menu. Often times, this module is called “Top Menu”.

Click on the name of the module to enter the module editing screen. In this case, my top menu module is named “Top Menu”, so I’ll go ahead and click on that.

In the editing screen, look under the Module Parameters menu, and check the setting under “Menu Style”. The setting should be set at “List”. If it’s not – for example, if it’s set on any of the Legacy formats – you should change it to “List”.

TECHY WHYS AND WHEREFORES: Under Legacy mode, Joomla’s index.php file does not assign each menu item its own class. In List mode, the index.php file assigns each menu item its own CSS class, allowing you to simply add these classes to the CSS document and edit them, which we’ll cover how to do in this tutorial. Leaving your menu in Legacy mode means you’ve got to jump through a whole lot of hoops to get the same effect – something we’re trying to avoid here.

Save any changes you made and exit the editing screen.

Step 2: Note down all of your item ID numbers for the top menu

In your Joomla administration panel, go to Menus > Top Menu

You should now be looking at a list of all of the menu items in that menu. You don’t have to make any changes here, but you do have to note down all of the itemID numbers for every item in this menu. The menu item IDs for each item are located in the very right-hand column of the screen.

Just note down all the numbers listed here, in the same order that they appear on your site. In this case, I would simply note down, “28, 29, 18, 30, 65”. This is for your own reference only.

TECHY WHYS AND WHEREFORES: In “List” mode, the CSS classes that Joomla’s index.php file assigns to each menu item is based on the item ID number. Each item ID number is, very literally, the CSS class. So, for example, if one of your menu items has the ID “28”, then the code generated in the HTML is . That’s why it’s important that you note the ID numbers down correctly, and in the same order that they are displayed on the site.

Step 3: Using Firebug, figure out which part of the CSS you need to edit

Sometimes, developers stick to the kinda-not-really-so-standard practice of naming their top menu div #pillmenu or some variation thereof, but definitely not always. So we need to first figure out which part of our CSS we’ll be editing.

If you already know the names of the CSS divisions and classes associated with the top menu, or you know how to find out some other way, you can skip this step. This is for those who’ve never done this before.

In a new window, open up your site in Firefox, and start Firebug (Tools > Firebug > Open Firebug).

In the Firebug window, click the “Inspect” button. You can now mouseover areas of your site, and the code / division names associated with those areas will be highlighted in the Firebug window, like so:

When I put my mouse over the division surrounding my menu, in the Firebug window below, I can see that in my case, this division is called “pillmenu”. Sweet! Now I know which part of my CSS I’ll need to edit. Note down whatever the division name is in your template.

Step 4: Edit the CSS

NOTE: Every single CSS template is different. Your code won’t look exactly like mine, and that’s why this tutorial requires at least a bit of CSS knowledge to get through. You need to be skilled enough to find the right part of the CSS code to work with. If you can do that, you can do this.

Go to Extensions > Template Manager

Click on the name of the template you are currently using, or that you wish to modify.

In the top right-hand navigation bar, click on “Edit CSS”.

Choose the name of the CSS template you want to edit, and click “Edit”.

In the CSS editing screen, do a search for the name of the division that you saw in Firebug. In my case, I’ll do a search for “pillmenu”. Ah hah, here it is in the code, the part that defines the background color for my menus:

#pillmenu li a { font-family: Verdana, Tahoma, sans-serif; font-size: 12px; float: left; display: block; line-height: 116px; padding: 0 25px; margin: 0 1px; color: #fff; text-decoration: none; font-weight: bold; background: none; height: 117px; background: url('/../images/pillmenu_bg.png') center center repeat-x; }

#pillmenu li a:hover { color: #fff; text-decoration: none; background: url('/../images/pillmenu_bg_hover.png') center center repeat-x; }

I can see here that my CSS calls two different images – I get one background image (pillmenu_bg.png) when the menu is sitting there all by its pretty little self, and the background image changes (to pillmenu_bg_hover.png) when it’s getting some mouse love.

I’m going to go head and COPY this entire block of code, and paste it in to the CSS file again – you want TWO copies of this block of code (or the corresponding code in your own CSS document). Leave the first copy alone for now.

Here’s the fun part: in your second copy of the block, add the item id of the second top menu item to the code, like this:

#pillmenu li.item29 a { font-family: Verdana, Tahoma, sans-serif; font-size: 12px; float: left; display: block; line-height: 116px; padding: 0 25px; margin: 0 1px; color: #fff; text-decoration: none; font-weight: bold; background: none; height: 117px; background: url('/../images/pillmenu_bg2.png') center center repeat-x; }#pillmenu li.item29 a:hover { color: #fff; text-decoration: none; background: url('/../images/pillmenu_bg_hover2.png') center center repeat-x; }

Then you can go ahead and modify the background image to suit your needs.

In this instance, I designed a different background image for the item 29 class, uploaded it to my template/images file through FTP, and now the second menu item shows my second image. But you could just as easily not put an image in there, and just change the background color instead (in fact, your template may already be written this way).

Save the CSS file. Check your work.

Repeat step 4 for each menu item in your top menu, making sure to reference the right item ID. For example, if you have five links in your menu, you need to repeat this 5 times, and modify 5 blocks of code.

You’re done! Enjoy!