WordPress Shortcode Generator
The {CODICTS} Shortcode Generator plugin provides a visual shortcode builder for creating richly styled, reusable elements — buttons, icons, images, galleries, category lists, contact forms, and plain text — from an intuitive admin interface with live preview. The generated shortcodes can be placed anywhere WordPress shortcodes are supported, including MyListing preview cards, post content, widgets, and page builders. When the MyListing theme is active, all shortcode attributes support dynamic field syntax to pull data from listings at render time.
Requirements
| Requirement | Details |
|---|---|
| MyListing Theme | Optional — required for dynamic field bracket syntax. The plugin works on any WordPress site, but dynamic field resolution is only available with MyListing. |
No child theme required. This plugin does not override any template files. It operates through a registered shortcode and an admin settings page.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
After activation, a new “Shortcodes” menu item appears in the WordPress admin sidebar. Click it to open the visual shortcode generator.
Key Features
| Feature | Description |
|---|---|
| 7 Shortcode Types | Button, Categories, Image, Gallery, Icon, Contact Form, and Text. |
| Visual Admin Builder | Configure shortcodes with an intuitive settings panel and see a live preview instantly. Copy the generated shortcode with one click. |
| MyListing Dynamic Fields | Use {{field_key}} bracket syntax in any attribute to pull data from the current listing (e.g., {{email}}, {{website}}, {{logo}}). |
| Autocomplete | Type @ or [[ in any input field to see a dropdown of available MyListing field tags for the selected listing type. |
| Icon Picker | Built-in Font Awesome 6 icon selector with search (1,600+ icons). |
| Image Gallery Slider | Multi-image carousel powered by Slick.js with infinite scroll and dot navigation. |
| Contact Form Builder | Drag-and-drop form builder with text, textarea, select, radio, and checkbox inputs — sends submissions via email. |
| Works Anywhere | Use shortcodes in posts, pages, widgets, Elementor widgets, MyListing preview cards, and any context that supports WordPress shortcodes. |
The Shortcode Generator Page
Navigate to “Shortcodes” in the WordPress admin sidebar (or click “Settings” on the Plugins page).
The page is divided into three columns:
| Column | Content |
|---|---|
| Left — Menu | Listing type selector (if MyListing is active) and the list of 7 shortcode types to choose from. |
| Center — Settings | Configuration form for the selected shortcode type. All changes update the preview instantly. |
| Right — Preview | Live visual preview of the shortcode element, plus the generated shortcode string ready to copy and paste. |
How to Use
1. If using MyListing, select a listing type from the dropdown at the top of the menu panel. This loads that type’s fields for autocomplete.
2. Click a shortcode type from the menu (e.g., Button, Icon, Gallery).
3. Configure the settings in the center panel. The live preview updates instantly as you make changes.
4. Copy the generated shortcode string from the preview panel.
5. Paste it wherever you need — in a post, page, widget, Elementor shortcode widget, or MyListing preview card template.
MyListing Dynamic Field Syntax
When the MyListing theme is active, all shortcode attributes support dynamic field bracket syntax. This allows shortcodes to pull data from the current listing’s fields at render time.
Syntax
Wrap any MyListing field key in double curly braces:
{{field_key}}Examples:
[codicts-shortcode type="text" text="{{job-title}}"][codicts-shortcode type=”button” text=”Visit {{company-name}}” link=”{{website}}”]
[codicts-shortcode type=”image” src=”{{logo}}” link=”{{website}}”] [codicts-shortcode type=”form” email=”{{email}}” …]
Autocomplete in the Admin Page
1. Select a listing type from the dropdown at the top of the menu panel.
2. In any input field, type @ or [[ to trigger the autocomplete dropdown.
3. A list appears showing all available fields for that listing type — including regular fields, field modifiers (sub-properties), and special system keys.
4. Select a field to insert {{field_key}} into the input.
Note: For the
textattribute, you can mix static text with multiple dynamic fields (e.g.,text="Hello {{name}}, welcome to {{city}}!"). For all other attributes, the entire value should be a single{{field}}tag to be resolved.
Shortcode Types
All shortcodes use the unified [codicts-shortcode] tag with a type attribute. Below is each type with its settings and usage.
Button
Creates a styled, clickable button with configurable colors and alignment.
| Setting | Default | Description |
|---|---|---|
| Text | Click Here | Button label text. Supports {{field}} syntax. |
| Link | # | URL the button links to. Supports {{field}} syntax. |
| Alignment | Left | Left, Center, Right, or Justify (full-width). |
| Background Color | #222222 | Button background color (color picker). |
| Text Color | #ffffff | Button text color (color picker). |
Example:
[codicts-shortcode type="button" text="Visit Website" link="{{website}}" align="center" bg-color="#0073aa" txt-color="#ffffff"]Categories
Displays a list of taxonomy categories for any post type, with links to each category’s archive page.
| Setting | Default | Description |
|---|---|---|
| Post Type | post | WordPress post type slug. Dropdown includes all public custom post types. |
| Display | List | “List” for a vertical list with separators, or “Grid” for a responsive grid layout. |
| Show Post Count | Yes | Appends the number of posts in parentheses after each category name. |
Example:
[codicts-shortcode type="categories" posttype="job_listing" display="grid" count="1"]Image
Displays a single image with optional link and rounded corners.
| Setting | Default | Description |
|---|---|---|
| Image URL | (placeholder) | Click to open the WordPress Media Library selector. Supports {{field}} syntax for dynamic images. |
| Alignment | Left | Left, Center, Right, or Justify (full-width). |
| Link | # | URL to wrap the image in. Leave empty for no link. Supports {{field}} syntax. |
| Rounded Corners | On (8px) | Toggle rounded corners on or off. |
Example:
[codicts-shortcode type="image" src="{{logo}}" align="center" link="{{website}}" rounded="8px"]Gallery
Displays multiple images in a carousel slider with infinite scroll and dot navigation.
| Setting | Default | Description |
|---|---|---|
| Gallery URLs | (empty) | Comma-separated list of image URLs. Supports {{field}} syntax for dynamic gallery fields. |
| Alignment | Left | Left, Center, Right, or Justify (full-width). |
| Rounded Corners | On (8px) | Toggle rounded corners on or off. |
Example:
[codicts-shortcode type="gallery" src="{{gallery}}" align="center" rounded="8px"]Icon
Displays a Font Awesome icon with text and a link.
| Setting | Default | Description |
|---|---|---|
| Icon | fab fa-facebook | Click to open the icon picker with 1,600+ Font Awesome icons and search. |
| Text | Text displayed beside the icon. Supports {{field}} syntax. | |
| Link | # | URL the icon links to. Supports {{field}} syntax. |
Example:
[codicts-shortcode type="icon" icon="fas fa-phone" text="{{phone}}" link="tel:{{phone}}"]Contact Form
Creates a contact form that sends submissions via email. Build the form visually with the drag-and-drop field builder.
| Setting | Default | Description |
|---|---|---|
| Form Name | Contact Form | Title displayed above the form. Supports {{field}} syntax. |
| Email To | (admin email) | Email address that receives form submissions. Supports {{field}} syntax (e.g., {{email}} to send to the listing owner). |
| Submit Button Text | Submit Now | Text on the submit button. Supports {{field}} syntax. |
| Form Fields | (none) | Add fields using the input type dropdown (see supported types below). |
Supported input types:
| Type | Description |
|---|---|
| Text | Single-line text input (required). |
| Textarea | Multi-line text area (required). |
| Select | Dropdown menu. Click “More” to add options. |
| Radio | Radio button group. Click “More” to add options. |
| Checkbox | Single checkbox (e.g., for terms agreement). |
Add fields, reorder them by dragging, and remove them with the delete button. For select and radio fields, click “More” to add additional options.
Note: The form uses WordPress’s built-in
wp_mail()function. Ensure your site has a working email configuration. Consider using an SMTP plugin (e.g., WP Mail SMTP) for reliable delivery.
Text
Outputs plain text — no wrapper elements. Ideal for inserting dynamic field values as plain text in preview cards.
| Setting | Default | Description |
|---|---|---|
| Text | Example text | The text to display. Supports {{field}} syntax and multiple dynamic fields mixed with static text. |
Example:
[codicts-shortcode type="text" text="Located in {{city}}, {{country}}"]Example — MyListing Preview Card with Dynamic Fields
1. Activate the plugin. Navigate to “Shortcodes” in the admin sidebar.
2. Select your listing type (e.g., “Restaurants”) from the dropdown at the top.
3. Click “Button” from the shortcode type list. Set the text to “Visit Website” and the link to {{website}} (type @ to see available fields). Set your preferred colors. Copy the generated shortcode.
4. Click “Icon”. Select the phone icon from the icon picker. Set the text to {{phone}} and the link to tel:{{phone}}. Copy the shortcode.
5. Edit your MyListing preview card template and paste the shortcodes where you want them to appear.
6. On the frontend, each listing’s preview card dynamically displays the “Visit Website” button linking to that listing’s website field, and a phone icon showing that listing’s phone number.
Example — Listing Contact Form
1. In the Shortcode Generator, click “Form”.
2. Set the Form Name to “Contact {{company-name}}” and the Email To to {{email}} — this sends form submissions directly to the listing owner’s email address.
3. Add form fields: a “Name” text input, an “Email” text input, and a “Message” textarea.
4. Set the submit button text to “Send Message.” Copy the shortcode.
5. Add the shortcode to a content block on your listing type’s single page.
6. Visitors see a personalized contact form on each listing page (e.g., “Contact Mario’s Pizza”) that sends submissions to the listing owner’s email.
Example — Dynamic Image Gallery
1. In the Shortcode Generator, click “Gallery”.
2. In the Gallery URLs field, type @ and select your listing’s gallery field (e.g., {{gallery}}).
3. Set alignment to “Justify” for full-width and enable rounded corners. Copy the shortcode.
4. Paste it into a MyListing content block or preview card. Each listing dynamically displays its own gallery images in a carousel slider.
Frequently Asked Questions
Does this require the MyListing theme?
No. The plugin works on any WordPress site. However, the dynamic field bracket syntax ({{field_key}}) and the autocomplete feature require MyListing to be active. Without MyListing, you can still use all 7 shortcode types with static values.
Does this require a child theme?
No. The plugin does not override any template files. It operates through a registered shortcode and an admin settings page.
Where can I use the shortcodes?
Anywhere WordPress shortcodes are supported: posts, pages, widgets, Elementor Text Editor or Shortcode widgets, MyListing preview cards, MyListing content blocks, and page builder modules.
Can I use multiple dynamic fields in one shortcode?
For the text attribute, yes — you can mix static text with multiple {{field}} placeholders (e.g., text="Hello {{name}}, welcome to {{city}}!"). For other attributes like link, src, and email, the entire value should be a single {{field}} tag.
How does the contact form send emails?
The form uses WordPress’s built-in wp_mail() function. Submissions are sent as HTML emails with a table of all field values. If emails aren’t being delivered, install an SMTP plugin like WP Mail SMTP for reliable delivery.
Can I send form submissions to the listing owner’s email?
Yes. Set the “Email To” field to {{email}} (or whatever field key stores the listing owner’s email). The form dynamically resolves this when rendered on each listing page.
What icon library is included?
Font Awesome 6 with 1,600+ icons across solid (fas), regular (far), light (fal), and brands (fab) families. The icon picker includes a search input to quickly find icons.
How does the gallery slider work?
The gallery shortcode uses Slick.js (loaded from CDN) to create a carousel with infinite scroll, single-slide display, and dot navigation. Provide a comma-separated list of image URLs, or use a dynamic field like {{gallery}} that returns image URLs.
Is there a settings page?
Yes. The shortcode generator itself is the settings page — navigate to “Shortcodes” in the admin sidebar. There’s no separate configuration page; the visual builder is where you create and copy shortcodes.
Does the plugin create any database tables?
No. The plugin does not store any data in the database. Shortcodes are generated on the admin page and pasted by you into your content. The plugin only registers the shortcode handler and the admin page.
What happens when the plugin is deactivated?
The shortcode handler is unregistered, so any [codicts-shortcode] tags in your content will appear as raw text instead of rendering. Reactivating the plugin restores rendering immediately. No data is lost since no data is stored.
Troubleshooting
Dynamic Fields Not Resolving (Shows Raw {{field}} Text)
| Cause | Solution |
|---|---|
| MyListing not active | Dynamic fields require the MyListing theme. The plugin works without MyListing, but bracket syntax won’t resolve. |
| No listing context | The shortcode must be rendered within a context where a listing exists (e.g., inside a listing loop, preview card, or single listing page). It won’t resolve dynamic fields on a regular WordPress page. |
| Wrong field key | Verify the field key matches the actual key in your listing type’s field configuration. Use the autocomplete (@) on the admin page to see available fields. |
Categories Shortcode Shows “No Taxonomy Found”
| Cause | Solution |
|---|---|
| Invalid post type slug | The posttype attribute must match an existing WordPress post type slug. Verify it in the admin page dropdown. |
| No taxonomy registered | The specified post type has no taxonomies associated with it. Register a taxonomy for the post type or use a different post type. |
Contact Form Not Sending Emails
| Cause | Solution |
|---|---|
| wp_mail() not configured | The form uses WordPress’s wp_mail(). Install an SMTP plugin (e.g., WP Mail SMTP) for reliable email delivery. |
| Email blocked by hosting | Some hosts block outgoing email from PHP. Check with your hosting provider or use a transactional email service. |
Gallery Slider Not Working
| Cause | Solution |
|---|---|
| CDN not reachable | The gallery uses Slick.js loaded from cdnjs.cloudflare.com. Ensure your site can reach this CDN. Check for firewall or content security policy restrictions. |
| JavaScript error | Check the browser console (F12 → Console) for errors. Other plugins or themes may conflict with jQuery or Slick.js. |
Autocomplete Not Showing Field Tags
| Cause | Solution |
|---|---|
| MyListing not active | The autocomplete feature requires MyListing. It is not available on non-MyListing installations. |
| CDN resources blocked | The autocomplete uses At.js loaded from a CDN. Ensure the CDN is not blocked by your browser, ad blocker, or firewall. |
| No listing types | Ensure at least one listing type exists in your MyListing setup. Select it from the dropdown to load its fields. |
Icon Picker Empty
| Cause | Solution |
|---|---|
| Font Awesome CDN blocked | The icon picker requires Font Awesome CSS from cdnjs.cloudflare.com. Ensure the CDN is accessible from your admin page. |
For further support, visit codicts.com or contact us at support@codicts.com.