May 282012
 

Creating Tabs on Listing Pages in DirectoryPress Ain’t Easy

Tabs are standard fare in most software. From browser to calendar to finances to video to social media apps . . . Not only have we become used to them, we’re actually grateful for how they let us group more, click less, saving us precious space and time.

Wherever, however we access the apps we use, we’re looking for and reaching towards The Tabs.

And when they are not there, or there aren’t enough of them, we want to know the reason why.

First, The Results

Another Tech Mini-War: Custom Tabs and Custom Fields

Whether hellish or heavenly, I love tech stuff! Whether these moments (hours, days) elicit a few choice words or a resounding whoop of joy, I wouldn’t trade them for anything. VT

Those words are from 5 Tech Escapades, a light-hearted glimpse into some of the challenges encountered over a year ago. My latest technology challenge has been getting the DirectoryPress software to do what they said it would do and otherwise bending it to my will. I’m using it to build a geo-targeted small business directory for my local area. When it comes to battling this pretty beast, I’ve won some and I’ve lost some.

One of the battles I was determined to win was the Tabs War.

The design of the directory allows a small business owner to enter a wide range of pertinent information about their business. But who wants to scroll through a long list of end-to-end details? That’s why we love tabs! The second part of this process involves using custom fields because that’s where all the “extra” information is contained (like Facebook Page, Twitter username). Thus, the challenge was to create new tabs, pull in custom fields data, then display it all nicely in groups on the new tabs.

After some false starts and a few exclamations of “By George, I think I’ve got it!” I stumbled upon a tutorial that made sense, that provided the necessary code, and was written by a responsive individual.

Why doesn’t DirectoryPress make it easier to add custom fields and additional tabs to directory listing pages?

Well, maybe they will in the next major version. In the meantime, thanks to SimonSwiss and his DirectoryPress Custom Tabs tutorial, I now have tabs that show up as part of the Listing page at the coming-real-soon local business directory. Most of you won’t be interested in the rest of the discussion on this page as it is more-or-less a holding place for screenshots and related code that can be shared with anyone else trying to resolve this issue in the WordPress-based DirectoryPress software, but just in case you’re ever struggling with tabs in DirectoryPress, read on.

You’ve Got . . . TABS!

Add Tabs and Custom Fields to the Listing Page in DirectoryPress

Look Ma! . . . I've Got Tabs! (in DirectoryPress, no less) Thanks to SimonSwiss ... Yippeeeee!


New Tabs Using Custom Fields on Listing Page

The new tabs added are Contact and +. Why the plus sign? Because an actual word was too long and messed up the format! The + stands for Extra!. Here you can see partial contents of the Contact Tab with a group of custom fields.

New Tabs Using Custom Fields on Listing Page in DirectoryPress

New tabs in action shown here with custom fields grouped on the Contact Tab

Getting to this point involved adding PHP Code to the “_single.php” file and adding a couple of plain-English lines to the “language.php” file. SimonSwiss provides the necessary code in his tutorial.

After getting the hang of what went where, I took a little liberty and added some headings. Big stuff!

Now, A Few Things to Watch Out For

Weird things happen when you’re trying to make software perform to your satisfaction. Sometimes you don’t have all the information you need; at other times circumstances beyond your control can bork your process or have you chasing after issues that arise even after you’ve done everything right.

Database Issues Caused By Your Host

Hopefully you won’t encounter this, but do be aware that database issues at the server level can cause you problems. This happened to me after I had the DirectoryPress tabs set up and working. Within the past few weeks, my host upgraded MySQL.

  • On this site, it slowly killed CommentLuv Premium plugin and finally brought the site down altogether. (To their credit, Site5 tech support gurus fixed those issues within a few hours.)
  • On another site, anything I did within WordPress took hours to be reflected in the database. When my tabs suddenly quit working, I spent time troubleshooting the issue only to discover that slow database updates on Site5 were causing this grief. However, once the updates finished, everything was back in order, including my Packages displaying on the Submission Page

The moral? If there is no apparent reason for your tabs to not be working, check with your host to make sure they’re not the reason for your problems. Or if you are handy with databases, look around a bit to make sure nothing is amiss.

Naming Custom Fields and Key Values

Aside from random weirdness of the database kind, watch out for this database-related glitch: renaming your custom fields from the default “Key_x” which is automatically assigned when you create a new one.

Custom Fields Names appear to be hardcoded into DirectoryPress which could affect whether or not they show up on custom tabs or on listing submissions page

Custom Fields Name for LinkedIn in DirectoryPress

To my understanding, DirectoryPress allows you to replace the default name value with one more to your liking. For example, I initially named the custom field I created for a LinkedIn Profile “linkedin.”

At that time, I hadn’t attempted to use these custom fields for anything other than displaying them on the directory’s Listing Submission Page so customers could easily fill in related info when they created their listing. One oddity I’d noticed was that this particular field (“linkedin”) never showed up on the form. But I had no idea why and hadn’t taken time to figure it out.

In a completely unrelated matter, I was using phpMyAdmin database management tool to kick some stray info out of the database. (Stray comments left behind by WooCommerce that couldn’t be removed in the normal way. They really ought to fix that!) While carefully looking in the database for anything else left behind by WooCommerce or any other plugin, I noticed the Key_0, Key_1, etc. values and recognized them as those custom field values from DirectoryPress. Passing on by those, I did a double-take when I thought about the custom names …

Hadn’t I renamed those generic values to something more reflective of the custom fields I’d created? Yes, indeed!

Fast-forward to why the LinkedIn Profile custom field wasn’t showing on the Listing Submission Page.

When it didn’t show up in my newly created custom tabs area, I recalled the anomaly in the database, and pulled up the DirectoryPress custom fields admin function. There was a custom name but the backend database didn’t reflect this custom name. Using phpMyAdmin I could see that DirectoryPress had kept the generic name initially assigned (Key_x) and was proceeding as if I’d never made any change in that regard.

DirectoryPress Custom Field Displayed on Listing Submission Page where it can be filled in by customer

LinkedIn Custom Field now displaying properly on Listing Submission Page

Thus, it appears that while in theory we should be able to name our custom fields whatever we want, in practice DirectoryPress does not process the custom fields unless they are named according to the “Key_x” convention. I guess this is somehow hard-coded into DirectoryPress; a tech support question for another day. Of course, I might be off-base here and the truth will reveal itself further down the line. In the meantime, I’ve got a launch coming up.

Some battles are won by surrender. :)

DirectoryPress Custom Field Displayed as part of the Social Media group on a custom tab on the directory listing page

Clickable LinkedIn Profile link displaying properly as part of the Social Media group on a custom tab on the directory listing page

The resolution: I renamed the LinkedIn custom field according the the “Key_x” convention. (I gave it a really high random number because I didn’t want to conflict with some other Key_x value that might have already been created.) Now this field shows up on the custom tab AND it shows up on the submission form.

Dealing With The Code and _single.php

If/Then Text Showing Above Custom Fields on Listing Page Tabs

Remember, I’m working with the code samples provided by SimonSwiss in his tutorial.

Once I got the custom fields to actually show up on the Listing Page, I encountered a little problem with bits of conditional code showing up right above the custom fields. The image above (which you just viewed) is how the custom fields should display; the image below is how they appeared with the if/then code bleeding through.

If/Then Text Showing Above Custom Fields on Listing Page Tabs

Conditional If/Then Text Showing Above Custom Fields on Listing Page Tabs

I resolved this by removing the IF/Then statements in Simon’s code for generating the tabs.

Of course, I still have the issue Simon was trying to head off: if no value has been entered for a custom field (i.e., no LinkedIn Profile URL), ideally the field will not even show up on the page. Since I’ve removed the bit of code that should handle this, ALL the fields show up, and if no value exists, it puts in the current page URL.

I hope to get this worked out. In order to avoid a surprising user experience, I’ve added a brief note to the tab so a user will know what to expect. Not the most graceful solution, but it will do until this can be resolved more satisfactorily.

Here’s a snippet of my modified custom tabs code without the If/Then statements.

<!-- LINKEDIN PROFILE URL -->
<div class="full clearfix border_t box">
<p class="f_half left"><strong>LinkedIn Profile URL</strong></p>
<p class="f_half left">&raquo; &nbsp;<a href="<?php echo get_post_meta($post->ID, 'Key_5932', true)  ?>" target="_blank" rel="nofollow">See what we share on G+</a></p>


UPDATE: Conditional Display Fixed
Upon informing SimonSwiss that this portion of the code wasn’t working for me, he tweaked it and now it works wonderfully.

Conditional Display Fixed

Now that the code works as intended, I can share the results with you. In case you need a more graphical representation of how this code works the conditional display magic, look further down for an explanation.

The two images below show a segment of the Listing Pages from two different small businesses. The one on the left top has more social profiles showing than the one on the right bottom. This is the essence of conditional display; it only shows the custom fields and their information if the field has been filled in.

Conditional Statement allows to display info from custom fields on custom tabs in listing page only if info is available - More

More info is shown on Listing Page
because more fields were completed




Conditional Statement allows to display info from custom fields on custom tabs in listing page only if info is available - Less

Less info is shown on Listing Page
because some fields have not been completed


Here’s another example of conditionals at work. The directory Submission Page has an area where small businesses can fill in information about local write-ups and featured articles where they’ve been profiled. They can also indicate whether they have listed their business in other local or national directories (so customers can hop over and write reviews in them).

See how the “Other Directories” area is blank on this listing? Once the business adds information about Yelp or Google Local, that information will appear.


directorypress-conditional-custom-fields-display-on-tabs


It’s A Wrap!

There are three things to pay close attention to in order to make sure the conditional portion of your code yields the correct results. The idea is that your statement is wrapped in this code.

  1. The number 1 indicates the start of the wrapper. It is the complete line of code beginning with < ? php if and ending with ? >.
  2. The number 2 indicates the end of the wrapper. It is the short chunk of code pointed to by the arrow.
  3. The third item of importance is to change the KEY VALUE in number 1 to match the KEY VALUE in the “echo get_post_meta” line. (Key Value is whatever name you have given your custom field. It might not begin with “key;” it could be “facebook” or “number_of_employees.”

directorypress-conditional-code-custom-fields-display-on-tabs-2

DirectoryPress users: Let me know if it would be useful to have a copy of the file where this code goes (_single.php).

Brackets vs. HTML Entities

One other caveat to take into consideration about the code is something I mentioned in my comment on Simon’s tutorial.

… for some reason, some places in your code use the actual brackets “<" or ">” while other places use the html entities “&lt ;” or “&gt ; ” … Maybe it’s just my WP installations but I’ve run into this before where I have to switch out the entities and use the actual brackets, otherwise the code doesn’t work. I noted this here in case someone else runs into a similar problem.

Update: Simon indicated that a little code corruption had crept in. Fixed!

He weeded out the corruption. :) Take note that if your code somehow gets corrupted between copying and usage, you can easily fix that yourself by using the actual angle brackets

  • wherever you see “&lt ;” substitute a left angle bracket (<)
  • wherever you see “&gt ; substitute a right angle bracket (>)


All in all, SimonSwiss’s DirectoryPress tutorial on creating custom tabs was very straightforward, explained the steps adequately, and provided exact code snippets necessary for making changes. He’s a fellow after my own (teaching) heart!



                 

Find Out More About These Resources from Amazon.com



Link to this page:



About Vernessa Taylor

Hi, I'm Vernessa Taylor. I write most of the articles, tutorials and reviews around here. Join in the discussions, share your thoughts, ask questions and lend a hand when you can. Need something? Ask! Check out my About page to learn more about me and my work as a technology consultant and internet coach. Don't forget to connect with me on Google+ and Twitter @CoachNotesBlog.

How Would You Like To Comment Today?

  17 Responses to “Tech Challenge: Space-Saving Custom Tabs on Directory Listing Pages”

Comments (17)
  1. Hey, thanks for the kind words in your article!

    I have fixed a few snippets of the code in my tutorial and everything should work properly now regarding the IF statement.

    Thanks for mentioning my tutorial and i am happy it can be useful to some fellow DirectoryPress users!

    Cheers!

    Simon

    • Hey SimonSwiss, welcome!

      Happy to mention your tutorial. I’ve seen numerous posts in the DP forums asking about how to create custom tabs but many of the answers seemed overly convoluted, had left out this-or-that bit, and so forth. So, while I wanted this functionality, I didn’t bother.

      Do you know what gave me confidence to move forward and follow YOUR tutorial? The fact that even though the DirectoryPress forum mangled your code, you put the code over in Paste Bin . . . And when Paste Bin didn’t seem to be the optimal (can’t remember the issue), you wrote a blog post and put the code within it in a concise step-by-step.

      I saw you’d posted up some revised code that might solve my conditionals problem. Heading over there to grab it. And many thanks.
      Vernessa Taylor recently posted..Customer Referral Systems: Automation is Your Secret KeyMy Profile
      Twitter:

  2. That is an awesome post. You have really layed out your points in great detail. Very easy to follow with good content. thanks for the information

  3. Of course, people have to deal with a lot of complications without tabs, bravo who created it.

  4. SimonSwiss’s DirectoryPress tutorial on creating custom tabs is very helpful and straightforward. Thankyou Vernessa to share this tutorial with us. The guide is very simple and easy to follow.
    Syeda Mehwish recently posted..My Live Superfoods Review And Coupon CodesMy Profile

  5. I totally agree. Tabs are so helpful I am so grateful to whoever created it. Thanks for sharing this post to your readers!

  6. I’ve had problems with conditional displays myself; I found your entire article convenient in solving my troubles. Your layout was easy to follow while providing effective solutions.

  7. This guide is incredible! thanks for the code snapshots and step-by-step instructions for implementation!

  8. Tabs simplify the work and it is of great use. I like things to be organized and having tabs gives a neat look. The database issues is common and as mentioned if the host is responsible they need to clear it.

  9. Vernessa, excellent description, with screenshots all at once intelligible.
    This is all very well, but a little too much hassle over the handling of the product for 79 dollars, is not it?

    • Hi Alex, welcome to CoachNotes Blog and thanks for the kudos.

      Yep, I agree it would be much nicer (and less labor intensive) to have certain features built into this $79 product. The actual customizations took far less time to do than they took to learn how to do.

      Mark Fail actually provides a fair amount of documentation through videos on many features (I’m not really a video person, I like written docs better) but there is a lot more documentation to be had.

      The good thing about putting in the time to learn this stuff is that because the plugin itself is very inexpensive many will buy it; because they won’t be inclined to crawl under the hood, they will pay for modifications. And, of course, do-it-yourselfers aren’t going to pay someone to do any of this — they’ll be looking for tutorials (like this one) to help them along. :)
      Vernessa Taylor recently posted..All Sales Are Final. (Your Refund Policy Sucks!)My Profile
      Twitter:

  10. Good tutorial!
    Сan you have experience using a DirectoryPress in conjunction with a variety of useful plugins that are appropriate to the DirectoryPress? can give advice?

    • Hi Jeff,

      Yes DirectoryPress does work with a variety of useful plugins. The DirectoryPress members forum lists a few that Mark Fail (or someone) considers useful. Just do a search in the forum. Otherwise, it depends on what functiionality you need for your own directory.

      Rather than list all the plugins I’m using, why not give me an idea of what you need?
      Twitter:

Loading Disqus Comments ...
Loading Facebook Comments ...

No Trackbacks.

© 2009-2013 CoachNotes Blog & Vernessa Taylor, Boone, NC 28607
[ Login ]
Gratitude and heartfelt thanks to WordPress Developers, Plugin Authors, Graphic Artists, and Theme Creators. And did I say WordPress? Suffusion theme by Sayontan Sinha