Using WordPress Shortcodes To Make Complex Things Easy

I’ve been digging deeply into WordPress over the past few years, learning how to integrate custom programming and database functions into the WordPress framework. The biggest challenge for me was figuring out how to do complex things like allowing visitors to search the MLS database of real estate for sale. This involves first displaying a search form, then having that form submission result in a search of the MLS database for properties matching the criteria in the form, then displaying the search results (with pagination), with each listing containing a link to a details page for that listing. And then the details page has to pull the listing’s details from the MLS database and display all the details. And all the photos.

And to make it more complicated, my real estate clients also need to be able to display MLS listings on pages based on pre-defined searches — for example, all the single-family homes for sale in Punta Gorda that are on the water and have a pool, or all the condos in Port Charlotte under $200,000. My real estate clients are Realtors, not website programmers, so that part had to be easy for them. I’ve learned that making complex things easy can sometimes be harder than doing the complex thing in the first place.

It turned out that once I got my head around how WordPress’s shortcodes work, it wasn’t that hard. Tedious, yes, but not that difficult.

Here’s what a Realtor might put on a page to show single-family waterfront homes in Punta Gorda with a pool:

[showlistings city="Punta Gorda" proptype="SFH" waterfront="y" pool="y"]

Simple enough for almost anyone. Behind the scenes, it’s a bit more complex. When WordPress sees that shortcode in a page or post, it triggers a whole pile of code that searches the MLS database for properties meeting those search criteria and displays them on the page. And triggering that code isn’t particularly difficult.

First, I register the shortcode with WordPress in the functions.php file — identifying the name of the shortcode (in this case, “showlistings”) and the php function that will be triggered by that shortcode. It looks like this:

add_shortcode( 'showlistings', 'getMLSListings' );

Then I add the php function that finds out what search criteria were used in the shortcode, searches the database for properties matching those critera, and displays matching listings on the page. That function looks like this:
function getMLSListings($atts) {
(Hundreds of lines of code here to read the attributes of the shortcode, search the database, and display the listings)
}

First the function checks the attributes ($atts) of the shortcode to find out that the shortcode says “Punta Gorda” for city, “SFH” (which stands for single-family homes) for property type, “y” for waterfront, and “y” for pool. Then using those criteria, it builds the database query, connects to the database, runs the query, gets the links for the photos, and outputs the whole shebang to the WordPress page.

From my pre-WordPress days, I already had code written to search the MLS database and display the listings. It needed changes to make it display nicely within WordPress and to bring it up to date by making it mobile-responsive, but that wasn’t too terribly difficult.

Also, since I keep the MLS listings in a whole separate database from the WordPress site’s database, I had to learn how to access a different database from within WordPress. Prior to that project, I had never previously had to access two different databases within one site. But I have found over the years that I can learn just about anything from Google University. I love the internet, I love Google, and I love all the people out there who write all those helpful tutorials and informational articles that help me find out what I need to know.

I’ve recently had to set my sights on javascript and learning to integrate custom javascript and jQuery within WordPress. That’s a whole ‘nother kettle of fish. I’ve never been a javascript master, and it’s taken me a lot of effort to figure out how to do various things with javascript & jQuery. But that’s a topic for another day.

This is the result of a [showlistings] shortcode: