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?