TablePress Query: Unleash the Power of Your Table Data in WordPress

Transform how you use TablePress with the TablePress Query plugin. Go beyond simple table displays and tap into advanced querying capabilities, seamless data integration, and even dynamic contact forms, all powered by familiar shortcodes.

From Data Silos to Dynamic Content: The Inspiration

My journey into data management on the web began extensively with MediaWiki and its powerful Semantic MediaWiki (SMW) extension. The core idea was elegant: store structured data in small, manageable tables across various wiki pages, and then dynamically pull that information together elsewhere using “SMW queries.” This created an incredibly flexible way to blend rich data with user-friendly content, all within a familiar CMS environment. It made me realize the power of treating content and data not as separate entities, but as interconnected pieces of a larger puzzle.

When I transitioned to working more with WordPress, I sought a similar mechanism. While WordPress excels in content management, a direct SMW equivalent wasn’t readily available. However, TablePress stood out as an excellent tool for quickly defining and managing structured data in tables – a fantastic starting point. The only missing piece for me was a more robust way to present and reuse that data beyond the standard TablePress display.

That’s why I developed the TablePress Query plugin. I wanted to bring that dynamic, query-based approach to WordPress, building on the solid foundation of TablePress. My goal was to empower users to not just display tables, but to truly interact with their data, creating customized views and integrating specific data points seamlessly into their content, all through the simple and intuitive WordPress shortcode system. This approach significantly enhances consistency and maintainability, allowing you to update data in one central TablePress table and have those changes automatically reflect everywhere that data is used.

I’ve put this plugin through its paces on koorkerk.nl, a community site I maintain. The applications are diverse: from generating dynamic lists of volunteers with their contact details to managing the entire church service roster. Imagine updating a single TablePress table with service schedules, and having the “next upcoming service” details automatically appear correctly on multiple pages – that’s the kind of efficiency TablePress Query brings.

Beyond Simple Tables: Integrating Data Your Way

The core philosophy of TablePress Query is to give you control over how your data integrates with your content. It’s not just about plopping a table onto a page; it’s about weaving specific pieces of information into the narrative, or presenting collections of data in a more visually engaging and digestible format. You might want to subtly embed a single, crucial fact from a large dataset directly into a paragraph, or you might want to showcase multiple records as distinct, organized units.

Think about common ways information is presented online. Sometimes, a straightforward table is perfect. But often, especially when dealing with lists of items like products, team members, events, or resources, a more “card-based” layout can be much more effective. Each “card” represents a single record or row from your table, presenting its information in a self-contained block. This allows for richer formatting within each item and a cleaner visual separation between items, especially on mobile devices.

You’ve likely seen this card concept in action on many websites:

• E-commerce sites: Product listings often use cards, where each product has its image, title, price, and a short description in its own block.
• Team or staff pages: Each team member might have a card with their photo, name, title, and a brief bio.
• Blog post archives: Many themes display posts in a grid or list of cards, each showing the featured image, title, excerpt, and author.
• Portfolio sites: Projects are frequently showcased as individual cards with a preview image and project title.

TablePress Query embraces this flexibility by allowing you to choose how your queried data is presented, with the format="card" option being a key feature for these kinds of engaging layouts. Let’s delve into the specific tools the plugin offers.

Real-World Examples: TablePress Query in Action

To give you a better idea of how TablePress Query can streamline your workflow and enhance your site, here are a few practical use cases:

1. Displaying Specific Contact Information with Direct Email

Imagine you have a TablePress table named “Staff Directory” with columns like `EmployeeID`, `FullName`, `Role`, `Department`, and `WorkEmail`. You want to mention a specific staff member in a blog post and provide an easy way for readers to contact them.

Use Case: In a post about a new project led by Jane Doe, you want to display her name based on her role, and offer a contact link.

Shortcode:

[tablepress-generic-contact table_id="staff-directory" name_expression="FullName +'('+Role+')'" email_column="WorkEmail" filter_expression="Role:Project Lead"]

Result: This would output “Mail:Jane Doe (Project Lead)”. Clicking the link opens the contact form, pre-addressed to Jane.

2. Showcasing the Next Upcoming Event

Let’s say you maintain a TablePress table called “Church Services” with columns `ServiceDate` (in YYYY-MM-DD format), `Time`, `Pastor`, and `Theme`. You want to display details of the very next upcoming service on your homepage.

Use Case: Automatically feature the next service.

Shortcode (Conceptual – filter syntax for dates needs finalization in your plugin):

[tablepress-query tablename="Church Services" columns="{ServiceDate}, {Time}, {Pastor}, {Theme}" filter="days_plus(-1) < ServiceDate" sort="ServiceDate asc" limit="1" title="Next Upcoming Service" format="card"]

Result: This would query the “Church Services” table, find the first service where the `ServiceDate` is on or after today’s date, sort by date to ensure it’s the absolute next one, limit the result to just that single service, and display it with a title, perhaps in a card format.

3. Listing Team Members by Department

Your “Staff Directory” TablePress table also includes a `Department` column. On your “About Us” page, you want to list all members of the “Marketing” department.

Use Case: Display a list of marketing team members, showing their name, role, and a contact link for each.

Shortcode (using nested shortcodes or a more advanced query if your plugin supports it directly for display):

One way is to first get the list and then iterate (though shortcodes don’t loop). A more practical display might come from tablepress-query formatted as cards or a simple table:

[tablepress-query tablename="Staff Directory" columns="{FullName}, {Role}, WorkEmail, FullName}" column_names="{Name,Position,Contact}" filter="Department:Marketing" sort="FullName asc" format="table" cssclass="team-list"]

Result: This would display a table (or list of cards if `format=”card”`) of all staff in the “Marketing” department, sorted by name.

What Can TablePress Query Do For You?

TablePress Query extends the capabilities of TablePress by introducing powerful tools to filter, customize, and present your table data exactly how you need it, where you need it.

1. Advanced Data Display with

[tablepress-query] Shortcode Help

This shortcode displays data from a TablePress table.

Syntax

[tablepress-query
    tablename="table-name"
    columns="{column1, column2, function(column3), 'constant text', ...}"
    column_names="{Column Name 1, Column Name 2, ...}"
    filter="filter condition"
    cssclass="css-class"
    format="card"
    sort="column-name [asc|desc]"
    title="text"
]

Parameters

• tablename: (Required) The name (title) of the TablePress table.
• columns: A comma-separated list of column names or expressions to display. If no columns are specified, use all columns from the table
• column_names: (Optional) A comma-separated list of custom column headers. If not provided, the Tablepress table headers will be used.
• filter: (Optional) A filter condition (TBD).
• cssclass: (Optional) A custom CSS class for styling.
• format: (Optional) The display format (e.g., 'card', 'table', etc.). Default is TBD.
• sort: (Optional) Sorts the data. E.g. 'name asc' or 'date desc'.
• title: (Optional) A custom title for the query-result.

Available Functions

• bulleted_list(column_name): Converts a string with newlines or <br/> tags into a bulleted list.
• date_description(column_name): Converts a date-id into a readable date.
• bold(column_name): Converts the value to bold.
• days_plus(column_name): Adds a number of days to the current date and returns the new date in yymmdd format.
• italics(column_name): Converts the value to italics.
• h3(column_name): Converts the value to h3.
• uppercase(column_name): Converts text to uppercase.
• lowercase(column_name): Converts text to lowercase.
• trim(column_name): Trim a string. Usage: trim(column_name, length)
• comma(column_name): Returns a comma (,).

Examples

[tablepress-query columns="{naam,bijzonderheden,bold(adres),telefoon,email,webpage}" column_names="{,,Adres,Telefoon,Email,}" tablename="contacten" cssclass="contacten-css-class" format="card"]

[tablepress-query columns="{h3(naam),frequentie,verantwoordelijke,bold(beschrijving),bulleted_list(procedure)}" column_names="{,frequentie,verantwoordelijke,,}" tablename="procedures-webmeester" cssclass="procedures-css-class" format="card"]

Tired of displaying entire TablePress tables when you only need a snippet of information? The

[tablepress-query
    tablename="table-name"
    columns="{column1, column2, function(column3), 'constant text', ...}"
    column_names="{Column Name 1, Column Name 2, ...}"
    filter="filter condition"
    cssclass="css-class"
    format="card"
    sort="column-name [asc|desc]"
    title="text"
]

• Selectively Display Columns: Choose exactly which columns from your TablePress table appear in the output.
• Filter Rows Dynamically: Show only the rows that match your specific criteria, without needing to create separate, filtered tables in TablePress itself.
• Sort Your Data: Order the results by any column, in ascending or descending order.
• Customize Headers: Define your own column headers for the queried output.
• Transform Data on the Fly: Use built-in functions to format data directly within your shortcode – turn text into bulleted lists, make content bold or italic, format dates, and more.
• Flexible Output Formats: Display your results in different styles, such as a traditional table or a “card” layout, with options to add custom CSS classes for precise styling.

Imagine displaying a “Featured Products” section by querying your main products table, or showing “Upcoming Events” by filtering a master event schedule. The possibilities are vast. (Consider linking to a more detailed “Shortcode Reference” page or section for all parameters of

[tablepress-query
    tablename="table-name"
    columns="{column1, column2, function(column3), 'constant text', ...}"
    column_names="{Column Name 1, Column Name 2, ...}"
    filter="filter condition"
    cssclass="css-class"
    format="card"
    sort="column-name [asc|desc]"
    title="text"
]

2. Dynamic Contact Integration with [tablepress-generic-contact]

Need to display contact information from a TablePress table and make it easy for visitors to get in touch? The

• Extract Contact Details: Pull names, email addresses, and even phone numbers from specified columns in your TablePress table based on your filter criteria.
• Display Contact Information: Neatly present the contact’s name and optionally their phone number.
• One-Click Contact Form: Generate a link or button (e.g., “Contact [Name]”) that, when clicked, opens a sleek AJAX-powered contact form. This form is pre-configured to send an email directly to the selected contact person, without exposing their email address on the page.

This is perfect for staff directories, team member listings, or any scenario where you want to provide a direct line of communication based on data stored in TablePress. The contact form itself is protected by WordPress nonces for security. For optimal email deliverability, we recommend using an SMTP plugin. (Consider linking to a more detailed “Shortcode Reference” or a section on the contact form here.)

Getting Started

Integrating TablePress Query into your WordPress site is straightforward:

1. Install TablePress: First and foremost, ensure you have the core TablePress plugin installed and activated. Our plugin builds upon its foundation.
2. Install TablePress Query: Download the plugin (You might want to add a direct link to your GitHub release or plugin page here, e.g., from GitHub) and upload it via your WordPress admin dashboard (Plugins > Add New > Upload Plugin), or upload the plugin folder directly to your /wp-content/plugins/ directory via FTP.
3. Activate: Activate “TablePress Query” from your Plugins page in WordPress.
4. Start Querying! You can now use the

   [tablepress-query] Shortcode Help

   This shortcode displays data from a TablePress table.

   Syntax

   [tablepress-query
       tablename="table-name"
       columns="{column1, column2, function(column3), 'constant text', ...}"
       column_names="{Column Name 1, Column Name 2, ...}"
       filter="filter condition"
       cssclass="css-class"
       format="card"
       sort="column-name [asc|desc]"
       title="text"
   ]

   Parameters

   • tablename: (Required) The name (title) of the TablePress table.
   • columns: A comma-separated list of column names or expressions to display. If no columns are specified, use all columns from the table
   • column_names: (Optional) A comma-separated list of custom column headers. If not provided, the Tablepress table headers will be used.
   • filter: (Optional) A filter condition (TBD).
   • cssclass: (Optional) A custom CSS class for styling.
   • format: (Optional) The display format (e.g., 'card', 'table', etc.). Default is TBD.
   • sort: (Optional) Sorts the data. E.g. 'name asc' or 'date desc'.
   • title: (Optional) A custom title for the query-result.

   Available Functions

   • bulleted_list(column_name): Converts a string with newlines or <br/> tags into a bulleted list.
   • date_description(column_name): Converts a date-id into a readable date.
   • bold(column_name): Converts the value to bold.
   • days_plus(column_name): Adds a number of days to the current date and returns the new date in yymmdd format.
   • italics(column_name): Converts the value to italics.
   • h3(column_name): Converts the value to h3.
   • uppercase(column_name): Converts text to uppercase.
   • lowercase(column_name): Converts text to lowercase.
   • trim(column_name): Trim a string. Usage: trim(column_name, length)
   • comma(column_name): Returns a comma (,).

   Examples

   [tablepress-query columns="{naam,bijzonderheden,bold(adres),telefoon,email,webpage}" column_names="{,,Adres,Telefoon,Email,}" tablename="contacten" cssclass="contacten-css-class" format="card"]

   [tablepress-query columns="{h3(naam),frequentie,verantwoordelijke,bold(beschrijving),bulleted_list(procedure)}" column_names="{,frequentie,verantwoordelijke,,}" tablename="procedures-webmeester" cssclass="procedures-css-class" format="card"]

   and
   Error: The "table_id" attribute is required for the [tablepress-generic-contact] shortcode.
   shortcodes in your posts and pages. For detailed syntax and all available parameters, please refer to our documentation (Again, a good place to link to a more detailed “Usage” or “Shortcode Reference” section/page if you create one, or directly to relevant parts of the README on GitHub).

Key Technical Details & Customization

This plugin is built with flexibility in mind. While it works out-of-the-box, here are a few technical points:

• Styling: The output from both shortcodes can be styled using CSS. The

  [tablepress-query] Shortcode Help

  This shortcode displays data from a TablePress table.

  Syntax

  [tablepress-query
      tablename="table-name"
      columns="{column1, column2, function(column3), 'constant text', ...}"
      column_names="{Column Name 1, Column Name 2, ...}"
      filter="filter condition"
      cssclass="css-class"
      format="card"
      sort="column-name [asc|desc]"
      title="text"
  ]

  Parameters

  • tablename: (Required) The name (title) of the TablePress table.
  • columns: A comma-separated list of column names or expressions to display. If no columns are specified, use all columns from the table
  • column_names: (Optional) A comma-separated list of custom column headers. If not provided, the Tablepress table headers will be used.
  • filter: (Optional) A filter condition (TBD).
  • cssclass: (Optional) A custom CSS class for styling.
  • format: (Optional) The display format (e.g., 'card', 'table', etc.). Default is TBD.
  • sort: (Optional) Sorts the data. E.g. 'name asc' or 'date desc'.
  • title: (Optional) A custom title for the query-result.

  Available Functions

  • bulleted_list(column_name): Converts a string with newlines or <br/> tags into a bulleted list.
  • date_description(column_name): Converts a date-id into a readable date.
  • bold(column_name): Converts the value to bold.
  • days_plus(column_name): Adds a number of days to the current date and returns the new date in yymmdd format.
  • italics(column_name): Converts the value to italics.
  • h3(column_name): Converts the value to h3.
  • uppercase(column_name): Converts text to uppercase.
  • lowercase(column_name): Converts text to lowercase.
  • trim(column_name): Trim a string. Usage: trim(column_name, length)
  • comma(column_name): Returns a comma (,).

  Examples

  [tablepress-query columns="{naam,bijzonderheden,bold(adres),telefoon,email,webpage}" column_names="{,,Adres,Telefoon,Email,}" tablename="contacten" cssclass="contacten-css-class" format="card"]

  [tablepress-query columns="{h3(naam),frequentie,verantwoordelijke,bold(beschrijving),bulleted_list(procedure)}" column_names="{,frequentie,verantwoordelijke,,}" tablename="procedures-webmeester" cssclass="procedures-css-class" format="card"]

  shortcode offers a cssclass attribute to easily add your own custom classes to the output wrapper for specific targeting. The AJAX contact form also uses distinct CSS classes for its elements (e.g., kcm-contact-form).
• Query Engine: The magic behind the queries is a custom engine (internally, something like a TablePressSurvey class) that intelligently processes your shortcode attributes and fetches the precise data from your TablePress tables stored in the WordPress database.
• Localization: TablePress Query is translation-ready and includes a .pot file in its /languages/ folder, so you can easily translate it into other languages.

Support & Contributing

As an open-source project, your feedback and contributions are highly valued. If you encounter any issues, have suggestions for new features, or would like to contribute to the development, please head over to the TablePress Query GitHub repository (Adjust link if your repository name is different). You can open an issue or even submit a pull request.

For more about my work and other projects, you can visit my personal site at familiebil.nl/anton.

Disclaimer: The TablePress Query plugin interacts directly with data stored by the TablePress plugin. It’s always a best practice to ensure you have recent backups of your WordPress site and database before installing or updating any plugins.