WordPress Pods: Food For Thought

The data-presentation link is vital. To get the best out of WordPress Pods, it pays to study the sample that is packaged with the Pods CMS plugin, and the more advanced examples in the Pods Packages directory.

It is also vital to have a clear plan of the presentation outcomes that you need.

When describing the data aspect of my first plugin, I wrote of the importance of thoroughly analyzing the relationship between the presentation of content required, and the structure of data needed to support it. Recently, I saw a question on the Pods Support Forum that seemed to relate to this area. I was particularly interested in it because the issues seemed to be similar to matters I had encountered with my shrewdBar WordPress menu bar plugin.

The difficulty with forum discussions is fully understanding what the issues are. If one is sat with a client, or even on a video link, it is easy to mock up a quick display and discuss what the presentation should actually look like. Difficulties are compounded with cultural and time-zone differences. But, “All is one in their own way,” and the power of the Internet allows the following attempt at understanding the problem and suggesting a solution.

I hope it solves the problem it tries to address, but even if it doesn’t, I’ve learned a neat CSS trick that I’ll be using again.

Basic Pods Data Display

First, create the Pod (Pods – Setup – Pods – Add new pod) using the data supplied.WordPress Pods Table
Second, add some test data (Pods – Add {name_of_pod}). We could have used the Pod menu settings to make this title more meaningful, or even used a separate menu out of the Pods hierarchy.
Third, create the Template (Pods – Setup – Templates – Add new template)
WordPress Pods Template

Happiness Today screenshot note

Fourth, test the output without any styling using

<ul>[pods name="shrewdies_cafe_menu"  template="shrewdies_cafe_menu"]</ul>

WordPress Pods Simple OutputFifth, go back to the template, change the list (li) tag to anchor (a – because we need to hover), and add the labels for the prices. Then apply some styling.

The span tags in the template seem redundant up to now, but they are there for a very good reason. The popup display in the “client brief” didn’t seem relevant for the small amount of information to display. Given it’s complexity, I searched for something simpler, and found Eric’s pure css popups. So, adding some CSS styling, our list is transformed into:

span {display: none;}
div#links a:hover span {display: block;
position: relative; top: 0px; left: 100; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}

–>

WordPress Style Notes

The transforming CSS is called by wrapping our Pods call in an appropriate div:

<div id="links">[pods name="shrewdies_cafe_menu"  template="shrewdies_cafe_menu"]</div>

I’ve taken Eric’s CSS style and included it in this post, though in practice, you would probably paste it into your theme’s style sheet. Eric uses his for a menu positioned absolutely near the top left, so I have removed the container styling, and changed the span positioning to relative. I also added the bold line below – a duplicate of the preceding span line, with a greater than to signify anchor text that is a child selector of a span. Without both versions, the span element refuses to hide – I assume this is a conflict with the styling from my theme.

<style type="text/css">
<!--
div#links {width: 166px; height: 300px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a span {display: none;}
div#links a > span {display: none;}
div#links a:hover span {display: block;
   position: relative; top: 0px; left: 100; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

-->
</style>

Happiness Today Screenshot Note

Though the two screenshots show the same lyrics from Think Of Happiness Today, do not think that the program has stuck, or in some way does not work. Those lines are the chorus, and I have repeated them in line with the original lyrics. This means that this particular couplet will display more regularly in the display area. If you adapt the plugin for your own promotional purposes, repeat your most important messages, and they will display more frequently.