The Goal:

We will use clean markup. We’re trying to integrate this into exsting HTML – so we will be generating all extra classes and tags using Javascript. I imagine most web documents follow the same constant pattern: Heading tags, followed by some content which are a mixture of different DIVS, paragraphs, images etc. This goes on until the next heading tag – which is usually the same type as the first heading.
Look at the sample mark up below:

We will use the H5 tags as our “Clicker” – once clicked, will hide the contents right underneath it. Click it again, and it will show the contents again.

The Script:

We start by calling the jQuery library, followed by the document.ready() call:

We then loop through each of our particular heading tag (in this case, all of H5). Once it finds all of them, it checks to see if right next to it is another H5 tag; if it’s not, it adds a class of “clicker” to it and appends a span with a minus (-) sign in it:

If you investigate your code so far – you will see that only the H5 tags that have content OTHER than H5 tags have the class “clicker” and the span tag with a minus (-) sign in it:

Now let’s code the click events:

Now that we have our designated clickers, we create a couple of functions that toggle at every click.
The first action, hides the contents below “$(this)” – which is the tag you just clicked. Remember – we only want to hide the contents up until the next H5 tag. It also changes the content of the span into a plus (+) symbol.
The second action shows the contents below, and changes the span to a minus (-) symbol.

Optional Styling:

At this point you already have a functional accordion. If you’re applying the code to an existing page, you are already working with the current styles. Although, using CSS3 for say the plus (+) and minus (-) span looks pretty cool – which I’m sure you’d want to use.
Add this code to your styles:

Of course you have to replace the #wrap h5 with your own class / ids. This creates the css3 button you see in the demo. This code is courtesy of Zurb’s Super Awesome buttons with CSS3 and RGBA:

Conclusion

And that is it! You have yourself an accordion page powered by jQuery. Feel free to grab this code and improve it. Maybe refactor it into a more plugin like code – make it more reusable. Or even – fix the choppiness issue in the slideUp / slideDown animation in certain browsers. In any case, please leave a comment on what you think of this code.
You might also be interested in these articles regarding jQuery accordions:

• Simple Accordion w/ CSS and jQuery
• Exactly How to Create a Custom jQuery Accordion
• Grid Accordion with jQuery

The post Yet Another jQuery Accordion Tutorial appeared first on Michael Soriano.

Convert the Feature into a jQuery Powered Slideshow:

Our feature section looks good as it is. Though it would be better if the large image on the right would change and cycle through other images. In other words, we need to convert it into a slideshow of our best work.

Adding the Script Files

First thing we need to do is download jQuery. jQuery will be powering all of the javascript we’re using for our page. Head on to http://jquery.com/, download and save it into our current directory.
Inside the head section of our HTML, insert our script tag. Now all of jQuery’s magic is in our fingertips. Download the slideshow plugin from: http://jquery.malsup.com/cycle/. Right below our first script tag, insert directly below:

Getting the images ready:

Now that our scripts are intact, let’s get our images and our stylesheet ready so the animation will take place. Open feature.png in Photoshop and create new guides as shown below. Make sure you cut right down to the pixel.

Cut out the center image and fill with solid color.

Save the file under the same name.
Create several images that will go inside the slideshow – all must have the same dimensions – in our case: 476 pixels and 349 pixels.
Insert the HMTL right below the feature div. Of course you will replace the image names with your images, along with the right path:

Append this code inside your existing style.css file:

This ensures that the slideshow will sit on top of the designated box in the feature div:
Preview index.html in your browser. By now you should see your new slideshow swapping your images in your feature section:

Next up: The expanding sections, and the “lightbox” effect.

Adding the “More” click events on the sections below the fold:

We have two sections below the fold that showcase what our work is all about. One is the useful “Testimonials” section – where visitors read what others are saying about our services. And of course, the “Previous Work” area – where you plug in screenshots of work that you’ve done. This may be websites, photographs, software; anything that can be screen captured you can apply.
The point is to only show a few of testimonials, and a few thumbnails of your previous work. When visitors click on the “More” buttons, the section expands to show the rest.
This approach is also best for people who have plenty of work, but only would like to show a little at first.

Insert the code below inside the $(document).ready function:

The above code first hides our testimonial DIVS (that are greater than 3) and our previous work list items (that are greater than 4). Then it alters the HTML of our buttons, as well as toggle our hidden sections to appear while sliding slowly.

Adding the light show effect for the Portfolio gallery:

For the portfolio thumbnails – it would really be nice to add a “lightbox” effect once the images are clicked. Lightbox provide a way for viewers to see the detailed image without physically leaving the page. For our portfolio – we’re using http://fancybox.net/
Download: http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip
Extract the files and copy the folder “fancybox” from the unzipped file and place in the root folder of our portfolio. Inside index.html, place the code in the head section:

In our un-ordered list of thumbnails, insert this “class” and “rel” attributes for each anchor tag. Refresh index.html in your browser and click a thumbnail. You should now see the effects of Fancy box from your portfolio:

Last step: The contact form.

Completing the Contact Form with PHP

Since HTML and javascript doesn’t support contents of a form to be sent through email, we need a little help from PHP to bring our contact form to life. We are now working with server side technology, so won’t be able to test our file without a web server. So in order to test our code, upload your file to your web host or run apache locally using WAMP or MAMP.

First thing we have to do is change the extension of index.html to .php. We will be working with the .php file from now on. You can discard the .html version – or keep it for archive.
Look for the form tag inside index.php; add a method “post” and an action attribute.
This enables our form to use the $_POST array and be processed by the same page. To test the contents of our post array, type the following code right above the form:

Now, add some stuff to the form fields, click “Submit” and see what our pre tags have spitted out:

Now we know what we need to work with as far as the contents of our post array. We can now remove the pre tags and continue to work on our code. Add the following code on the very top of the page (even before the !DOCTYPE declaration):

What the above code is doing:

• Checks to see if the “submit” button has been clicked by checking if an array key by the name of “send” exists. If it does, the rest of the code executes:
• We’re creating several variables that we can work with – this includes $to – email address to send to, along with the contents of the post array
• We’re compiling the message by concatenating the variables we’ve created
• Finally, the “mail” function which is what allows you send mail

Now it’s time to test the code. Enter your email address into the $to variable then upload index.php to your web server. Fill out the form fields and click “submit”. You should receive an email similar to below:

Now remember that this is a stripped down version of a contact form. You should seriously consider adding several things such as form validation and formatting the entries for safe and legitimate values. Also add error and success messages to let the user know what’s going on. (I won’t cover such things because as you can see – this tutorial has gone waaay too long).

Final Words

There you have it – a complete single page portfolio. We started all the way from scratch: Mocked up the concept in Photoshop, hand coded the HTML, while slicing the images and writing the CSS. We’ve added some jQuery magic as well as a little bit of PHP functionality. As you see – a lot of work does go into it (and that’s just a single page!)
In closing, I hope that you may learn something from this 3 part series. I also would like to thank the script and plugin developers which I included in this tutorial. You can download the finished product from this link, and of course view the live demo from here.

The post Create a Single Page Portfolio from Scratch – Part 3: jQuery and PHP appeared first on Michael Soriano.

Lock Down the Registration Process

Now that you have your site open for registration, it is best that you install these plugins first to enable tighter security:
Secure WP – as many options that this plugin comes with to enhance security, what I especially need it for is to disable the error messages at login (which this plugin does very well)
SABRE – stands for “Simple Anti Bot Registration Engine”. This produces that image during registration to block “autobots”.
Limit Login Attempts – the plugin title says it all. Activate this plugin and tweak depending how tight you want login attempts. Note that you’re not going to see any error messages due to the Secure WP plugin.

Hide the WP Admin Panel

So registration is open, security is tight – you still don’t want users to see your WordPress admin area. Not that there’s anything wrong with that – but it just looks more sophisticated when all is done in the front end. Install the following plugins:
Theme My Login – this plugin will generate a page called “Login” – this is where your new login forms (includes new registration and forgot password) will sit. Additional options also include custom emails, redirection and moderation. *Make sure you check “Enable Template Tag” under “Optimization” – You’ll need this in your theme later.

Theme My Profile – plugin created by the same author, which ports the users “profile” page into the front end. Make sure you theme and block admin area ONLY for roles you want.
The following screenshots show the login page, as well as the profile page generated by the plugins that I’ve mentioned:

TDO Mini Forms

We’ve come to the meat of the project. This is the plugin that does all the magic. TDO Mini Forms allows users (registered on not registered) to submit and edit posts to your blog. It comes with its form creator that lets you design the post submission form any way you want. Widgets that let you drag and drop components into your form, as well as a form “hacker” that allows even deeper code tweaking. What I especially liked is that it hooks up with your “Akismet” for spam protection.

After specifying all the configuration settings with TDO, go ahead and create a form with “Form Creator”. The form creator is a somewhat decent drag and drop interface where you grab the widgets in the bottom and drag it to the form. Widget settings are applied by clicking on the settings tab and it brings up the settings window as shown below:

Once you’ve decided on the fields and the settings, you can now alter the code to change the verbiage, along with adding HTML elements in order to be able to style it in your stylesheet. Below shows my contribute form:

Maybe some Custom Code

Depending on your pages – you might need to add some PHP conditional tags and functions to the theme manually. This is to link the new pages to each other. Simply copy your theme’s page.php file and rename it to something.php – convert it into a template by adding the code on top of the page:

Now below the call for the content, add the conditional tag with from the Theme My Login plugin:

The screenshot below shows the custom link to the contribute form that we just created:

All you have to do now is to wait for guest post submissions and depending on the content – simply approve, edit or deny. The submissions are saved as draft posts and are in the moderation view of TDO mini forms:

Conclusion

Now that you have converted your blog into a more automated (and sophisticated) posting process – think of all the possible scenarios you can create. Of course I’m completely aware that my guest posts will not land any successful submissions any time soon – it’s just good to know that it’s available. Not to mention, it was fun to make.

The post How to automate the WordPress Guest Posting Process appeared first on Michael Soriano.