So, I essentially needed ads to run after the first post, and only once on any page. In order to do that I needed a simple function that I could run in the WordPress loop, and guarantee my requirements were met.

Thus, the display_ads function was born:

function display_ads(){
    global $ad_count;
	if($ad_count < 1){
      $display = 'AD CODE HERE';
	  echo $display;
	}
	$ad_count++;
}

It's quick and dirty but pretty effective. Is there a better way to do this, because this is pretty much the quickest thing I could come up with on short notice? I am legitimately asking you, is there a better way?

When I first started development, I wasn’t too keen on what API/xml data feeds to use, so I went with the ever popular Weather.com XML data feed. Development was a bear because the terms of use were incredibly restrictive. You had to display their logo, which is fine, but then you HAD to display four links that were meant to generate click-throughs for them in some fashion; and all of this had to be visible near the weather data itself. Ok, I said to myself, I can deal with that, even if it makes the whole thing ugly.

Two weeks later, they decided to end the free XML data service in favor of a different API model. I thought, “Excellent, I can finally develop something free of the cumbersome links and logos I was required to use before!” Not so fast. This service cost several hundred dollars a year. Not so good for me if I’m creating a plugin. Then I discovered Yahoo! Weather, ironically enough, powered by Weather.com’s data.

Ok, get to it already, jerk.

Fine, fine, fine. I simply thought that background information would be useful for you. With the previous version of this plugin, the version using Weather’s data, you were required to register with Weather.com in order to obtain a key that would allow you to access the data, and I had to build that in to the plugin. This version will work fine without it. Yay! Simplification!

However, your site is limited in the number of requests that can be made in a given day. So if you have a high traffic site you’ll run into issues if you’re constantly requesting data from Yahoo. I had to build in data caching in order to keep those requests down, so now you’ll only access the API once or twice every hour to update data and that should take care of the problem. So, it’s not instant, but probably good enough.

At the moment this plugin is a little hit and miss. I don’t plan on doing much more with it, but feel free to fork this, modify it, whatever.

Download Current Weather 1.5 (current-weather.zip)

Download From the WordPress Repository

So, enjoy the fruits of my labor!

It’s actually fairly easy to get started using the class. This is the default implementation that the download provides for basic operation:

require_once('../class.phpmailer.php');

$mail             = new PHPMailer(); // defaults to using php "mail()"

$body             = file_get_contents('contents.html');
$body             = eregi_replace("[\]",'',$body);

$mail->AddReplyTo("name@yourdomain.com","First Last");
$mail->SetFrom('name@yourdomain.com', 'First Last');
$mail->AddReplyTo("name@yourdomain.com","First Last");

$address = "whoto@otherdomain.com";
$mail->AddAddress($address, "John Doe");

$mail->Subject    = "PHPMailer Test Subject via mail(), basic";

$mail->AltBody    = "This is for text based email"; // optional
$mail->MsgHTML($body);

$mail->AddAttachment("images/phpmailer.gif");      // attachment
$mail->AddAttachment("images/phpmailer_mini.gif"); // attachment

if(!$mail->Send()) {
  echo "Mailer Error: " . $mail->ErrorInfo;
} else {
  echo "Message sent!";
}

That is a very easy way to get up and running using the default mail() function. Most of the hard work has been done for you, all you’re left to do is to fill in the blanks. But hey, why go default when the thing provides you with some more advanced functionality? Like sending your email using SMTP.

The best way I found to handle my emails, and to send them using PHPMailer, was to create a component class, unoriginally named mmEmail, that would handle a few operations I needed in order to process the form and format the data.

class mmEmail {
        var $name          = null;
        var $email         = null;
        var $message       = null;
	var $time          = null;
	var $SMTP_host     = null;
	var $SMTP_username = null;
	var $SMTP_password = null;
	var $send_to       = null;
	var $send_name     = null;
        var $subject       = null;

	static $instance;

        public function __construct() {
		self::$instance = $this;
	}

        public function format($message) {
           //code that formats the message body
        }

        //this function handles the message template
        public function template($template) {

		$name    = $this->name;
		$email   = $this->email;
		$message = $this->message;
		$time    = $this->time;

	        switch( $template ) {
		    case 'html' :
			    $the_body = $this->format($message);
	                    $body = 'html only';
				break;

			case 'text' :
		            $body = 'text only';
				break;

			default :
			    break;

		}

		return stripslashes($body);
	}

        public function send() {
            //code to handle PHPMailer - I'll get to it.
        }
}

So this gets us set up to send our formatted email using the send() function above. That function uses PHPMailer to handle the heavy lifting.

function send() {
    $html_body  = $this->template('html'); //HTML Body
    $text_body  = $this->template('text'); //Text only body

    require("class.phpmailer.php");
    $mail   = new PHPMailer();

    $mail->IsSMTP(); //SMTP
    $mail->Host     = $this->SMTP_host;
    $mail->SMTPAuth = true;
    $mail->Username = $this->SMTP_username;
    $mail->Password = $this->SMTP_password;

    $mail->From     = $this->email;
    $mail->FromName = $this->name;
    $mail->AddReplyTo($this->email, $this->name);
    $mail->AddAddress($this->send_to, $this->send_name);
    $mail->Subject = $this->subject;

    $mail->IsHTML(true);
    $mail->Body    = $html_body;
    $mail->AltBody = $text_body;

    $result = $mail->Send();

    if($result)
    {
        echo 'Mail sent.';
    }
    else
    {
        $result = $mail->ErrorInfo;
        return $result;
    }
}

Using my class is then fairly straight forward. I’ll define a few constants for my settings to make things easier for me to read, and from there sending an email is as simple as:

require("class.mmemail.php");
$email = new mmEmail();

$email->name          = NAME;
$email->email         = EMAIL;
$email->message       = MESSAGE;
$email->time          = TIME;
$email->SMTP_host     = SMTP_HOST;
$email->SMTP_username = SMTP_USERNAME;
$email->SMTP_password = SMTP_PASSWORD;
$email->send_to       = SEND_TO;
$email->send_name     = SEND_NAME;
$email->subject       = SUBJECT;

$email->send();

Why do something this complicated, when the result looks so much like the original PHPMailer setup? Because this allows me to format, check, and sanitize my data and then send my emails using a template system. I encourage you to take a look at a solution like this the next time you need a better way to send form emails.

PHPMailer can be found at: https://code.google.com/a/apache-extras.org/p/phpmailer/

Because I needed to do this quickly, and I assumed this need was common, I was on the lookout for an already well written and developed plugin that would do the job. I ran across a widget plugin from New2WP that allowed you to display the most recent posts from a single custom post type. Unfortunately, it wasn’t a multi-widget and you could only select one post type, so the plugin wasn’t suitable.

My first thought was that I could easily turn the plugin into a multi-widget capable plugin, but when I started to work on it, I realized that any modifications I made could easily be overwritten on the next update. Additionally, when I began work on turning it into a multi-widget plugin, it became exceedingly obvious that I would probably need to start from scratch.

That’s when I decided to develop a plugin of my own, based on the structure of what I saw in the plugin from New2WP, that would fit my needs, and hopefully the needs of others.

Where to Begin

Once I figured out that I needed to turn the widget into one that could be used in multiple widgetized areas, I started to research like mad to find out what it would take to accomplish this. One trip over to the WordPress codex was enough to send me in the right direction.

It was basically as simple as this default usage code implies:

class My_Widget extends WP_Widget {
	function My_Widget() {
		// widget actual processes
	}

	function form($instance) {
		// outputs the options form on admin
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
	}

	function widget($args, $instance) {
		// outputs the content of the widget
	}

}
register_widget('My_Widget');

However, converting the existing plugin to this wasn’t as simple as the above code implies. The old plugin was built as a function, and its structure made it quite a bit more difficult to tie into the WordPress Widgets API.

Based on what I learned from New2WP’s plugin, and the WordPress Codex, I proceeded to build out my own plugin.

The Recent Custom Posts Plugin

I started by creating the directory /mm-recent-cpt/, the file mm-recent-cpt.php, and readme.txt file for future upload to the WordPress plugin directory.

In the php file I added the plugin header:

/**
 * Plugin Name: Recent Custom Posts
 * Plugin URI: http://mikemattner.com/custom-post-type-widget/
 * Description: Multi-widget for displaying recent posts of custom post types.
 * Version: 1.0
 * Author: Mike Mattner
 * Author URI: http://www.mikemattner.com/
 * Tags: custom post types, post types, latest posts, sidebar widget, plugin
 * License: GPL
 */

This allows WordPress to gather information about your plugin. If you just put that file into the plugins directory right now, you’ll have a plugin that does nothing, but it will show up in the list.

The structure of this widget is fairly simple because of the Widgets API. You’ll create a class that extends the WP_Widget class, essentially making it a breeze to create this plugin. I named my class mm_recent_posts. In order to get things moving, you need to initialize the plugin. In most cases you’ll use add_action to get your class or function working.

The function I’m calling with add_action returns register_widget, which takes the $widget_class argument. According to the Codex, $widget_class is the name of a class that extends WP_Widget.

So, this is my basic structure:

add_action( 'widgets_init', 'init_mm_recent_posts' );
function init_mm_recent_posts() { return register_widget('mm_recent_posts'); }

class mm_recent_posts extends WP_Widget {
    /** constructor */
    function mm_recent_posts() {
       parent::WP_Widget( 'widget_recent_cpt', $name = 'Recent Custom Posts' );
    }

    function widget($args, $instance) {
       // outputs the content of the widget
    }

    function update($new_instance, $old_instance) {
       // processes widget options to be saved
    }

    function form($instance) {
       // outputs the options form on admin
    }

}

The above is fairly self-explanatory as far as what each function’s purpose is. The constructor function mm_recent_posts() is designed to give a little information about the widget. You could use something along these lines to get it up and running: parent::WP_Widget('my_widget_base', 'My Widget title', array('description' => 'Very simple widget example', 'class' => 'my-widget-class'));.

Pretty easy, right?

The Plugin

The plugin I created is fairly straightforward. It is essentially just an extension of the original Recent Posts widget that comes with WordPress by default–except that this doesn’t overwrite that.

If this looks like something you could use, feel free to download, use, and modify till you’re blue in the face.

Download Recent Custom Posts Plugin 1.0.1 (recent-custom-posts.1.0.1.zip)

Download From WordPress Plugin Directory

I’m working on getting this added to the WordPress plugin repository The plugin can also be downloaded from the WordPress plugin repository. If you have any questions, comments, or modifications, let me know in the comments. I can’t guarantee that this will work with all plugins, particularly the Custom Post Type UI plugin, but I will say that I’ve used it, and it works for me. I apologize if my code isn’t up to snuff.

Also, welcome Stumblers! Thanks for stopping by. Hopefully you’ll find my little plugin to be useful.

If you scroll down to the bottom of the site on the home page, and on any entry page, you’ll notice a set of buttons that will help you navigate to the next and previous entries, or the next and previous pages of the home page. I needed a way to style these, and oddly enough WordPress did not provide a class name for either of those links. Too bad. So I needed to find out how to adjust that in order to target those links. In addition to that, I needed to also make a small change that classes wouldn’t have allowed for, which was to get the function to output code for the cases in which there were no other pages or posts in a given direction. My first thought was to find whatever core file these functions were located in and then make the change there; I proceeded to do this, got it working, and decided that I should go about this in a different way if I ever wanted to upgrade without having to change that file every time–if I even remembered in those instances.

The tags in question were: next_posts_link, previous_posts_link, next_post_link, and previous_post_link, as well as a few more functions that were related to them. Each of these provides the basic functionality I needed to modify; I tried to replicate these functions, using the same name, in an effort to essentially overwrite the original WordPress core functions. Well, I located them in the link-template.php file, copied and pasted them into my themes functions.php file, and proceeded to make the necessary changes. When I uploaded functions.php and refreshed my site, I had a big giant error; actually it was less an error and more a blank screen, which is worse in a lot of ways as you have no idea what went wrong. I should have known from my programming experience that I couldn’t duplicate these functions in this way.

I was stumped for the longest time, and search after search on Google was leading me towards something called, add_filter, which it turns out doesn’t quite overwrite the function so much as filter the function results through your new function; this was not what I wanted to do on any level. I couldn’t manipulate the data through a filter to achieve the needed results.

After some time, and a lot of searching, I landed on a WordPress MU forum (still not sure what MU is), that gave me my answer–the most obvious answer–which was to take the functions I needed and rename them. I could then use those new function names in place of the old ones wherever I needed them in my theme files.

That’s easy, ain’t it? Why don’t people explain this more often, or even need to to do this enough for it to be found on Google?

Update 1/19/2010: I wanted to clarify just in case some one stumbled upon this looking for an actual bit of code that might show them what I was up to. So here goes.

Instead of adding a filter to the function you want to change:

add_filter('next_posts_link', 'new_next_posts_link', 0);

Add a new function to functions.php and call it in your template wherever you were going to use the old one.

function new_get_next_posts_link( $label = 'Next Page »', $max_page = 0 ) {
    global $paged, $wp_query;

    if ( !$max_page ) {
        $max_page = $wp_query->max_num_pages;
    }

    if ( !$paged )
    $paged = 1;

    $nextpage = intval($paged) + 1;

    if ( !is_single() ) {
        if( empty($paged) || $nextpage <= $max_page) {
            $attr = apply_filters( 'next_posts_link_attributes', '' );
            return '<a href="' . next_posts( $max_page, false ) . "\" class=\"next\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';
        } else {
            $attr = apply_filters( 'next_posts_link_attributes', '' );
            return '<span '.$attr.'>'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</span>';
        }
    }
}
function new_next_posts_link( $label = 'Next Page &raquo;', $max_page = 0 ) {
    echo new_get_next_posts_link( $label, $max_page );
}

I’ve essentially adjusted this line:

if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) {
    $attr = apply_filters( 'next_posts_link_attributes', '' );
    return '<a href="' . next_posts( $max_page, false ) . "\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';
}

And changed it to this next bit in order to add a class to the link for styling purposes as well as to display a grayed out link if there was no next (or previous in the case of those set of functions) page.

if ( !is_single() ) {
    if( empty($paged) || $nextpage <= $max_page) {
        $attr = apply_filters( 'next_posts_link_attributes', '' );
        return '<a href="' . next_posts( $max_page, false ) . "\" class=\"next\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';
    } else {
        $attr = apply_filters( 'next_posts_link_attributes', '' );
        return '<span '.$attr.'>'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</span>';
    }
}

So, again. If you’ve got something to modify, do it this way. The functions.php template file is your best friend.

My gut reaction upon installing and settling on a theme for modification was that this was REALLY easy to work with and highly customizable. I had, in fact, gotten used to working with my own MovableType installation, its quirks, and its own templating system, but the php based WordPress on my server was a breeze to deal with compared to the former. It was faster, offered better plugins, easier templating, and I could even edit the hell out of those plugins to customize the installation even further for my needs.

I’m so convinced by my experience that WordPress is the superior publishing platform for anyone looking to get started beyond the free services and put up a site on their own domain, that I am absolutely going to develop the next iteration of this site with WordPress in mind.

MovableType has been good to me, and it truly is a very powerful platform, but my servers don’t deal with it, and it is SLOW as a result. Plus, all of the plugins I want to use aren’t offered for MT or don’t offer what I need. And that can be frustrating.

What I like about MT, though, is the publishing experience. I feel like I can easily add tags to any entry with little problem, and the interface (MT 4.0+ at least) is minimal and easy to use. Previous versions were a bear to work with, I’m afraid, but 4.0+ is quite fantastic.

Anyway, my conclusion: WordPress for the future iteration, but MT will suffice for now; WordPress is superior to MT for beginners and its ease of use; and MT is not likely to catch up.

Update: 5/15/09 I am currently in the process of converting to WordPress. Manually. Really frustrating, but worthwhile. I’ve also discovered that it is a superior publishing experience.

At any rate, this week I decided to tackle a bit of a problem that has been bothering me for as long as I’ve had the current design on my portfolio site.
The portfolio side of things exists as a single page site with work samples, a little information, and a contact form. The contact form would require that you reload the page upon submission in order to process and send the message, which always seemed like a jarring experience from a user interaction perspective.
In order to solve that problem, my solution was the ever popular: AJAX.

I’ve used some jQuery plugins in the past, so I was familiar with the framework; after doing some reading and thinking about compatibility with my current setup, I decided that jQuery’s built in AJAX implementation, and animation effects, would be just about perfect for my needs. Why? Because the jQuery framework is incredibly useful to me, as a designer, with little time for figuring out how to implement all of these fancy user interactions with JavaScript. Plus, it’s the framework I use for everything.

Let’s Get Programming

Where does my implementation begin? Well it begins by adding the jQuery files to the head of your page:

<script type="text/javascript" src="path/to/jquery.js"></script>

Then we’ll setup the function that will help us load up what we need. This is the function we will place all of our jQuery code in:

$(document).ready(function(){
   //some code
});

jQuery is nice for many reasons, one being the way in which events are initiated. [Karl Swedberg](http://www.learningjquery.com/2006/09/introducing-document-ready) says:

The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don’t have to put any “behavioral” markup in the HTML. You can separate all of your javascript/jQuery into a separate file where it’s easier to maintain and where it can stay out of the way of the content.

That’s useful for content/style/function separation, and is really, really handy. And perhaps one of the reasons I avoided JavaScript for so long was because it lacked something this simple to begin with.

Let’s start the AJAX

So first we need to setup what it is we’re going to be evaluating, which is basically the submit event of form #contactform. When we click submit, our function will run.

$("form#contactform").submit(function() {
   //some code
});

This function will have to do a number of things for us. First it needs to store our input values into variables in order to process them and POST them later. Then we’ll take those input variables and place them all in a variable (formData) formatted for ease of use for the POST process.

var name     = $('#name').attr('value');
var formData = "name="+ name + "&email=" + -->
email + "&message=" + message + "&color=" + color;

Following this bit of code it’s time to use jQuery.ajax in order to submit our form information asynchronously.

$.ajax({
   type: "POST",
   url: "send.php",
   data: formData,
   success: function(del){
      //success code placed here
   }
});

The options for jQuery.ajax in my code here are: type, the method that will be used when sending the form data, in this case POST; url, or the location where we will be sending our form data; data, the data to be sent; and success, what will we do when it has completed successfully. Check out jQuery.ajax for more information on options.

That’s pretty much it. I’ve setup the PHP file to deal with the posted data, and there are many ways to do this, so use your favorite and do it in the way you normally would.

My Code

Ok, so in my code, I’ve done a bit of rudimentary form field validation and bot protection. Additionally, I’ve added a little bit of effect animation and utilized the DOM to display confirmation or error messages, a loading graphic, and to fade out certain elements of the form. I discovered a bit of a problem when my inbox was full of spam messages from this form. In my PHP file, I’ve had to add a little bit of validation there as well, in case a user, or a bot, is attempting to the use the form without JavaScript enabled.

The JavaScript:

$(document).ready(function(){
$("form#contactform").submit(function() {
    var name     = $('#name').attr('value');
    var email    = $('#email').attr('value');
    var message  = $('#message').attr('value');
    var color    = $('#color').attr('value');
    var formData = "name="+ name + "&email=" + email + "&message=" + message + "&color=" + color;
    $('#contact_form > div#error').hide("fast");
    $('#contact_form > div#success').hide("fast");
    $('#contact_form > div#problem').hide("fast");
    //Test whether fields have been filled and rudimentary bot test has passed then send via jquery.ajax
    if (name != null && email != null && message != null) {
        if (color == "blue" || color == "Blue"){
            $("#contactform").before('<div id="loading" style="text-align:center;"><img src="images/loadingForm.gif" /></div>').slideDown("fast");
            $("#submitButton").hide();
            $("#contactform").fadeTo("fast", 0.33);
            $.ajax({
                 type: "POST",
                 url: "send.php",
                data: formData,
                success: function(del, text){
                      $("form#contactform").before('<div class="error" id="success">Thank you for your message!</div>').slideDown("slow");
                      $('#name').attr('value', '')
                      $('#email').attr('value', '')
                      $('#message').attr('value', '')
                      $('#color').attr('value', '')
                      $('#contact_form > div#loading').slideUp("slow");
                      $("#submitButton").show();
                      $("#contactform").fadeTo("slow", 1);
                }
            });
        }else{
            $("#contactform").before('<div class="error" id="error">You must fill in the color of the sky!</div>').slideDown("slow");
            $('#contact_form > div#loading').slideUp("fast");
            $("#submitButton").show();
            $("#contactform").fadeTo("fast", 1);
        }
    } else {
        $("#contactform").before('<div class="error" id="problem">You must fill in all of the fields!</div>').slideDown("slow");
        $('#contact_form > div#loading').slideUp("fast");
        $("#submitButton").show();
        $("#contactform").fadeTo("fast", 1);
    }
        return false;
    });
});

The form:

<form name="contact_form" id="contactform" method="post" action="send.php">
<div class="column span-4 first last">
<label for="name">Full Name:</label>
<input type="text" id="name" class="textfield" name="name" value="" />
</div>
<div class="column span-4 first last">
<label for="email">Email: </label>
<input type="text" id="email" class="textfield" name="email" value="" />
</div>
<div class="column span-4 first last">
<label for="color">What color is the sky? </label>
<input type="text" id="color" class="textfield" name="color" value="" />
</div>
<div class="column span-4 first last">
<label for="message">Message:</label>
<textarea class="textfield" id="message" name="message" cols="10" rows="8"></textarea>
</div>
<div class="clear"></div>
<div class="text-right" id="submitButton">
<input type="image" name="send" value="Send" src="images/submit.gif"/>
</div>
</form>

Conclusion

That’s all I’ve done. I’m no programmer, and I apologize for not knowing how to best explain what I’ve done, but hopefully getting a chance to look at some code will help you figure it out. If you have questions, I would be glad to help as much as I can.

Special thanks to Ryan Coughlin for helping me through this by offering up his code, which is what I based my AJAX form on.

I’ve had the thought running through my head for a few weeks now that it would probably be a good idea to adjust the layout; perhaps to spice it up, or make it a little more pleasing to my eye. Maybe this is perfectionism kicking in, but I really enjoy making these adjustments and experimenting in how I go about completing them.

What I initially decided to do was adjust the teaser image size by widening all of them to fill the entire 9 column width–which is the size of my primary content section (I have designed this site based on a 24 column, 936px wide grid). Because of that adjustment, I have had to change the way I display each project’s summary information. There are still many adjustments to be made, but so far so good.

What I’m most proud of in all of this change, however, has nothing to do with what is ultimately displayed. No, what is most impressive lies underneath it all. That’s right, I’ve gone and done something completely unnecessary–albeit, very cool–in the gallery display options I currently possess.

I initially didn’t want to commit to the larger size, so I created a bunch of backups of my CSS files and various source code files just in case I wanted to switch back, but why the hell was I doing that when I could write a bunch of functions that would do it for me?

On my workpage, in order to display the gallery, I include a file that possesses all of the appropriate php; in this way, if I need to make an adjustment, it’s pretty easy to go through and change whatever code I need. But there was one part in particular that became a bit of a hassle to adjust. Whenever I needed make a quick layout adjustment, I had to wade through three different files to do it–chalk it up to my inexperience I guess.

To alleviate the mess, I took that section and turned it into a function that would produce that section for me; now I could separate it from that file and consolidate everything, putting it all into one central location for quick adjustment action.

In the file that contains my primary functions and controls page numbers and gallery categories, I included the newly created function (small layout size) and created another (large layout size) that I would use based on a couple of different settings variables. I also set it up so my CSS file is created on the fly–that is the one that would determine which CSS files to @import.

Because of this simple little setup, I’m able to switch between those two different layouts in about five seconds, plus any adjustments in the future will be a matter of adjusting a couple of functions.

That’s just easy.

Moving forward on this design was pretty straightforward, but I stuck with the old way initially because I had built a pretty intricate system to handle my portfolio. Not that it was difficult to adjust, just that it would take me a little time to swap things out.

When it came down to it, though, my final design on the portfolio on this version required something a little more sophisticated than what I had set up. I needed to be able to adjust how everything functioned, and quickly. I also wanted it to be quickly and easily customizable.

A quick run down of what I wanted to do:

1. I wanted to be able to use the system I had already built to add, edit, and delete portfolio pieces quickly and easily.
2. I wanted to use the information in the database that I had never displayed before but had built into the system.
3. I wanted to be able to display all of the pieces by their project type.
4. Finally, I wanted to utilize pagination for the overall portfolio, and for each category of project.

All of this could be accomplished, but it was going to require a whole lot more than I was truly prepared for, because I’m not much of a programmer. I knew some things, in php, and I knew how to accomplish those things with some very basic straightforward programming. This time, though, I needed to make some custom functions. This was going to be the only way to make this work. It might not be necessary, or accurate, but I was going to try my hand at OOP (something that isn’t really needed for this application, but something I did anyway).
Prepare, programmers, to be unimpressed.

The Details

First things first I created an array to handle my various project types. This way I could add more or remove them easily if I needed to. Following that, I created a variable that would hold the final count of the items in the array (making it easier for me to run through them later when I’ll need them). Finally, I created the class DoIt{} in order to hold a couple of the functions I’ll need to use later.

I later added a function that a) checks to see if some variable exists and then b) counts that item. I use it to make sure that two particular array counts agree with each other; this is useful for checking errors in my gallery.

$cat = array('Illustration', 'Web', 'Email', 'Print', 'Advertisement');
$arr = count($cat)-1;
class DoIt {
    function countMe($t) {
        if(isset($t)){
            $ct = count($t);
        }
        return $ct;
    }
}

The first two functions I need are setup to test what category is displayed and what will be displayed as a result; these are pretty simple, because they just display a little menu of category options for me, wherever I happen to place them.

The most important function was one that I had actually created for the last version of my website. Because I had already built it and worked out the kinks, I was able to reuse the code–no tweaks necessary. This function was used to handle pagination and the display of page numbers. I wanted to use this function so that I could place the page numbers anywhere, multiple times within a document just by inserting $DoIt->paginateMe() anywhere.

After all of those functions were placed in the DoIt() class, I had to initiate a new object with: $DoIt = new DoIt;.
One thing I tend to do with all of the websites I build with php is to set a base directory variable; this way I can ensure that items are always linked properly, no matter where they reside in the site’s directory structure–just in case I screw up and put something somewhere other than where I expect. So in this case I insert $base = "http://www.mikemattner.com/"; next.

Now that I have all of that functionality ready to go, I need to connect to the database (in my case MySQL) in order to grab all of that portfolio information. I create an array that holds all of my connection information (hostname, username, password, and database). I can then use it to connect to MySQL and select the appropriate database.

$server = array(
        'host' => 'HOSTNAME',
        'username' => 'USERNAME',
        'password' => 'PASSWORD',
        'database' => 'DATABASE');
mysql_connect($server['host'], $server['username'], $server['password']);
@mysql_select_db($server['database']);

After I’ve connected to the database I run a couple of different queries. The first is to grab some information from a table I have setup that holds a few gallery settings like: how many items to display per page, the gallery thumbnail directory, and the gallery image directory. I put that information into an array to be used in various places throughout the rest of the script.

The second, and most important query I run is to grab all of my gallery information from the database. Information like: the various file names needed, the title, the description, technologies used on the project, etc. This one comes with a twist because I have to run the query based on what the user is browsing (i.e. what category have they selected if any). After I’ve run the query, the information is put into an array, safely tucked away for use in a little while.

Once I’m done with all of that, I close out the connection.

$query_set   = "SELECT * FROM table_settings WHERE id='1'";
$query_set_result  = mysql_query($query_set);
$the_settings = mysql_fetch_row($query_set_result);
$thumb_dir        = $the_settings[1];
$link_dir         = $the_settings[2];
$display_count    = $the_settings[3];
if(isset($_GET['category'])){
    $category= $_GET['category'];
    if ($category== "all") {
        unset($category);
        $query_dis  = "SELECT * FROM table_display";
    } else {
        $query_dis  = "SELECT * FROM table_display WHERE type = '" . $category. "'";
    }
} else {
    $query_dis  = "SELECT * FROM table_display";
}
$the_result = mysql_query($query_dis);
$row_count      = mysql_num_rows($the_result);
$r = 0;
while ($row = mysql_fetch_array($the_result, MYSQL_BOTH)) {
$info[table_column][$r]                = $row[0];
//I run through 11 items here
$r++;
}
mysql_close();

The next section determines what page number we’re on and how to display the various items (such as where to start or end) on each page. Basically, I evaluate the page number based on whether or not it has been sent via GET; if it has, I grab it and use that to run through the various settings.

if(isset($_GET['page'])){
$page = $_GET['page'];
}
if(empty($page)){
$page = 1;
}
if($page == 1){
$tot = $row_count-1;
$bar = $row_count - $display_count;
$g   = $display_count;
} else {
$tot = ($row_count-1) - (($page-1) * $display_count);
$bar = ($tot - ($display_count))+1;
if($bar < 0){
$bar = 0;
}
$g   = $row_count - $bar;
}

The rest is pretty straight forward. I use the countMe() function to count whether or not the items in the gallery item array match up. If they do then I display the items, if they don't then an error has occurred that I need to look into. I use a for loop to run through and display the gallery items. All in all, its pretty simple.

$a = $DoIt->countMe($gallery[thumbs]);
$b = $DoIt->countMe($gallery[links]);
if( $a == $b ){
if ($b < $display_count) {
$tot = $b-1;
$bar = 0;
}
$DoIt->catSet();
for ($i = $tot; $i >= $bar; $i -= 1) {
/*In this section I run through all of the items from the
gallery array and put them into handy variables then figure out
how I'm going to display them*/
}
$DoIt->paginateMe();
$DoIt->catDisplay();

Conclusion

While this may not seem very complicated, or may seem more complicated then it needs to be, I used it as a learning experience. I built this to make the update process easier for me to handle and it does that quite well.

What you don't see here is the other half, and most useful part, of this, which is a custom built administration tool that I use to do the actual updating. I can add, edit, and delete items to the gallery with ease with that tool. I can even upload the appropriate photos. Pretty simple.

That's how I do it. Does it seem easy?