Categories

  • Access & Security 95
  • Administration 171
  • Advertisement 92
  • Audio & Video 66
  • Author & Content 99
  • Comments 96
  • Communication 110
  • Communities & Forums 84
  • Development 47
  • E-Commerce 76
  • Email Management 53
  • Events & Calendars 80
  • Language 25
  • Map & Weather 44
  • Migration & Conversion 28
  • Miscellaneous 254
  • Mobile 15
  • Photos 143
  • Plugins 260
  • SEO & Site Speed 118
  • Social 186
  • Theme Enhancement 169



  • Add this plugin to a List

    You need to be logged in to add this plugin to your list.

    DobsonDev Shortcodes

    Add to List

    A collection of helpful shortcodes that I use in my own work that I wanted to share with the WordPress Community. If you want to suggest any shortcodes please email me at alex@dobsondev.com. Please download from the Offical WordPress Repository for easiest installation. If you would like to donate please click here.

    As of version 2.0.0 DobsonDev Shortcodes includes a TinyMCE Plugin that provides a button and user interface for adding the shortcodes. The button is the DobsonDev Shortcodes logo and if you click on it you will see a dropdown menu with all of the different shortcodes available to you. Click on the shortcode you want and a popup will appear (for the most part – three of the shortcodes just appear in the editor and you can fill their content in) containing the different attributes for that shortcode. The required attributes are marked with stars and you must fill them in. The other optional attributes can either be filled in to include them or left blank to leave them out.

    Shortcodes Included

    • Embed PDFs – Embeds PDFs into pages rather than separate links.
    • Embed GitHub Gists – Easily add GitHub gists to your site or blog.
    • Embed GitHub Repo Readme – Easily add the content from your GitHub repository README.md file.
    • Embed GitHub Repo File Contents – Easily add the content from a file from any GitHub repository.
    • Embed Twitch Stream – Embeds a Twitch Stream into the page.
    • Embed Twitch Stream Chat – Embeds the chat from a Twitch Stream into the page.
    • Embed YouTube Video – Embeds a YouTube Video into the page.
    • Embed Vimeo Video – Embeds a Vimeo Video into the page.
    • Inline Code – Displays inline code snippets that are visually different than the body text.
    • Code Block – Displays a simple code block for simple, small pieces of code.
    • Button – Displays a purely CSS button with choice of color, text and link.
    • User Interaction Messages – Displays a message with appropriate color that you can use to notify users of how their interaction is working.
    • Related Posts – Displays manually entered related posts on your post’s page that cycle through in a little slideshow. Only for use with posts, NOT pages!
    • Social Share – Displays a section for sharing your page on social media, shows links for Twitter, Facebook, Google Plus and Linkedin.

    Embed PDF

    [embedPDF source=”http://yoursite.com/path-to-the-pdf.pdf” width=”###” height=”###”]

    This Shortcode will embed a PDF into the page rather than making it a seperate link that must be clicked to be viewed. It is displayed in the browsers default PDF reader since it is embedded as an application. The source attribute is the URL of the PDF and is required. The width and height attribute will set the size of the embedded application, and are both optional. If they are not entered then the width is set to 100% and the height to 600.

    Please note that setting the width to “auto” will not work. Rather, please set the width to “100%” to get the same effect. If you are looking to add your own custom CSS to the container around the PDF embed, the class is “div.dobdev-pdf-container”. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Embed GitHub Gists

    [embedGist source=”http://gist.github.com/your-account/gist-id”]

    This Shortcode will embed a GitHub Gist into the page. The Gist will be embedded in a little box that makes it easy to share code samples with other developers (or whoever you want to share them with). The source attribute is the URL to the Gist and is required.

    If you are looking to add some custom CSS to the Gists, they are automatically put into “div.gist” by GitHub. Use that class when doing any CSS changes. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Embed GitHub Repo Readme

    [embedGitHubReadme owner=”Owner_of_Repo” repo=”Repo_Name” cache_id=”id”]

    This shortcode will display the contents of any GitHub repository’s README file. The markdown will displayed as HTML output onto the page. This shortcode uses GitHub API calls to ensure that as you update you README file the output from this shortcode will also update.

    The style will match that of your default page style, but if you want to change the style just wrap the shortcode inside of a div and then edit as much as the style as you want.

    If you want to take advantage of WordPress’ transient API for caching, simply enter an ID for the cache_id argument. Note that this ID can be anything other than “NULL”, it doesn’t necessarily have to be a number. Once entered this will cause the shortcode to cache the results of the API call for 24 hours. This means the shortcode will use those cached results and speed up the load times for 24 hours, at which point it will then call the API again to get any updates and use those cached results for another 24 hours.

    If you’re receiving an error similar to “SSL certificate : unable to get local issuer certificate” then please add the attribute insecure=”true” to your shortcode. This stops cURL from verifying the peer’s certificate which may be required in some cases depending on your server. If you would rather you can instead sdd the root CA (the CA signing the server certificate) to etc/ssl/certs/ca-certificates.crt which will allow secure connections to work. By default the shortcode will use secure connections.

    Embed GitHub Repo File Contents

    [embedGitHubContent owner=”Owner_of_Repo” repo=”Repo_Name” path=”Path_to_File” markdown=”Yes/No” cache_id=”id”]

    This shortcode will display the contents of a file from any GitHub repository. You must include the Owner of the repository, the repository name and the path to the file. Optionally, if the file is a markdown file you can put markdown=”yes” and the plugin will output the markdown as HTML onto the page. If you give the shortcode a path to a folder rather than to a file it will output an array of the folders contents.

    If you want to take advantage of WordPress’ transient API for caching, simply enter an ID for the cache_id argument. Note that this ID can be anything other than “NULL”, it doesn’t necessarily have to be a number. Once entered this will cause the shortcode to cache the results of the API call for 24 hours. This means the shortcode will use those cached results and speed up the load times for 24 hours, at which point it will then call the API again to get any updates and use those cached results for another 24 hours.

    If you’re receiving an error similar to “SSL certificate : unable to get local issuer certificate” then please add the attribute insecure=”true” to your shortcode. This stops cURL from verifying the peer’s certificate which may be required in some cases depending on your server. If you would rather you can instead sdd the root CA (the CA signing the server certificate) to etc/ssl/certs/ca-certificates.crt which will allow secure connections to work. By default the shortcode will use secure connections.

    Embed Twitch Stream

    [embedTwitch username=”your-username” width=”###” height=”###”]

    This Shortcode will embed a Twitch stream into the page. The username attribute is the Twitch Stream’s username, which can be found at the end of the URL of the stream. An example would be http://twitch.tv/day9tv. The username for this stream is “day9tv”, so that would be entered. The username is a required attribute. The width and height attributes will set the size of the embedded stream, and both are optional attributes. If they are not entered the width will default to 100% and the height will default to 378.

    Please note that setting the width to “auto” will not work. Rather, please set the width to “100%” to get the same effect. If you are looking to add your own custom CSS to the container around the Twitch Stream embed, the class is “div.dobdev-twitch-container”. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Embed Twitch Stream Chat

    [embedTwitchChat username=”your-username” width=”###” height=”###”]

    This Shortcode will embed a Twitch stream’s chat into the page. The username attribute is the Twitch Stream’s username, which can be found at the end of the URL of the stream. An example would be http://twitch.tv/day9tv. The username for this stream is “day9tv”, so that would be entered. The username is a required attribute. The width and height attributes will set the size of the embedded chat, and both are optional attributes. If they are not entered the width will default to 350 and the height will default to 500.

    If you are looking to add your own custom CSS to the container around the Twitch Chat embed, the class is “div.dobdev-twitch-chat-container”. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Embed YouTube Video

    [embedYouTube video=”video-id” width=”###” height=”###”]

    This Shortcode will embed a YouTube video into the page. The video attribute is the YouTube video ID of the video you want to embed into the page. It can be found at the end of the URL on YouTube. For example, the video located at https://www.youtube.com/watch?v=uCdfze1etec has the video ID “uCdfze1etec”. You will always find the video ID after the “watch?v=”. The video attribute is required. The width and height attributes will set the size of the embedded video, and both are optional attributes. If they are not entered the width will default to 560 and the height will default to 315.

    Please note that setting the width to “auto” will not work. Rather, please set the width to “100%” to get the same effect. If you are looking to add your own custom CSS to the container around the YouTube video embed, the class is “div.dobdev-youtube-container”. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Embed Vimeo Video

    [embedVimeo video=”video-id” width=”###” height=”###”]

    This Shortcode will embed a Vimeo video into the page. The video attribute is the Vimeo video ID of the video you want to embed into the page. It can be found at the end of the URL on Vimeo. For example, the video located at https://vimeo.com/14651522 has the video ID “14651522”. You will always find the video ID after the “/” in the Vimeo URL. The video attribute is required. The width and height attributes will set the size of the embedded video, and both are optional attributes. If they are not entered the width will default to 560 and the height will default to 315.

    Please note that setting the width to “auto” will not work. Rather, please set the width to “100%” to get the same effect. If you are looking to add your own custom CSS to the container around the Vimeo video embed, the class is “div.dobdev-vimeo-container”. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Inline Code Snippets

    [startCode]

    This shortcode will create the start tags for an inline code snippet which will then be ended using the [endCode] shortcode. If you use these two together you can create small inline code samples that look great, are easy to copy, and distinguish themselves from the rest of your text content in appearance. These make it easy to include code snippets without having to switch to the HTML editor in WordPress.

    [endCode]

    This shortcode will create the end tags for the inline code snippet started by [startCode]. If you use these two together you can create small inline code samples that look great, are esay to copy, and distinguish themselves from the rest of your text content in appearance. These make it easy to include code snippets without having to switch to the HTML editor in WordPress.

    If you want to change any of the styling for the inline code snippets, please use the CSS class “code.dobdev-code-inline”. From here you can change font size, font family, and even colour using your theme’s (hopefully child theme’s) stylesheet. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Code Blocks

    [startCodeBlock]

    This shortcode will create the start tags for a code block which will then be ended using the [endCodeBlock] shortcode. If you use these two together you can create small, simple code blocks that have a black background with white text, which is the common convention for code blocks. This is great for showing Terminal commands or very small code snippets (I recommend using the embed GitHub Gists shortcode for longer code samples).

    [endCodeBlock]

    This shortcode will create the end tags for the code snippet started by [startCode]. If you use these two together you can create small, simple code blocks that have a black background with white text, which is the common convention. This is great for showing Terminal commands or very small code snippets (I recommend using the embed GitHub Gists shortcode for longer code samples).

    If you want to change any of the styling for the code blocks, please use the CSS class “pre.dobdev-code-block”. From here you can change font size, font family, background color, padding and even the actual text color using your theme’s (hopefully child theme’s) stylesheet. This should only be done by someone experienced using CSS, otherwise the results could cause harm to the layout of your site.

    Buttons

    [button text=”buttonText” color=”color” link=”#”]

    This shortcode will create a purely CSS button where ever you place it. The text attribute is the text that will appear within the button. The color atrribute defines what color will show – the choices for color are red, blue, green, orange, purple, and turquoise. The link attribute is what link the user wants to redirect to when the button is clicked. If you do not want a redirect on the button click, just use a “#” and the button will do nothing when clicked.

    User Interaction Messages

    [infoMessage text=”your-message”]
    [successMessage text=”your-message”]
    [warningMessage text=”your-message”]
    [errorMessage text=”your-message”]

    These shortcodes will display a message with an appropriate color that will notify users of how their interaction is working. The color scheme follows that of many other websites – blue is for information, green is for success, yellow is a warning and red signifies an error.

    Related Posts

    [relatedPosts posts=”1stPostID; 2ndPostID; 3rdPostID”]
    eg. [relatedPosts post=”1; 2; 3; 4″]

    This shortcode will create a small slideshow of related posts wherever you put it. Note that you must enter the post ID’s yourself, as this shortcode will not automatically index and display related posts for you. Although this is more work it has a significantly smaller load time than plugins which do automatically index them for you. I would recommend this to people who run their own personal blogs with fewer articles. The slideshow is made using only CSS and jQuery.

    Please note that this shortcode should only be used on posts, NOT pages. It will cause pages to hang.

    Social Share

    [socialShare]

    This shortcode will create a section with links for sharing your page or post to Twitter, Facebook, Google Plus and Linkedin. The links are color coded to match the colors of each of their respective websites. You can use this like a normal shortcode in your page/post’s content or you can add it to your template files by using “echo do_shortcode(‘[socialShare]’);”.

    Rate This Plugin

    Please Login to Rate this Plugin!

    Function

    Feature

    Support

    0 Votes
    Not Rated Yet

    Wordpress.org Stats

    Ratings5
    Votes4
    Downloads14,874
    Last Updated503 Days ago
    Published8 years ago

    Report Wrong Category!

    Do you think this Plugin belongs to another Category?

    What Category Should this Plugin belong to? *

    Reason *

    Create a Plugin List

    You need to be Logged in to Create a Plugin List.

    Submit A plugin

    You need to be logged in to submit a plugin.

    Help

    WPD is the unofficial online plugin directory of WordPress.

    An attempt has been made to list Only functional, active,efficient and up-to-date plugins.

    Categorized : Plugin are listed by category and subcategory based on functionality and uses. Here you can browse wordpress plugin from our neatly categorized plugin directory and sort the plugins by rating, votes, last updated and published and search plugins using tags.

    Search : Plugins can be searched by their functionality using multi-tag search and you can search plugins using their exact name although we are not ensuring Google like search accuracy.

    Create Plugin Lists : You will be able to create list of plugins and share them with Wordpress Community or you can keep them private and use them as a bookmarks.
    e.g. Plugins That I’ve Used on My Site, Best Event Management Plugins, Christmas Plugins etc.

    If you think certain awesome plugin is not in the directory then notify us through our Submit a Plugin page.

    Browsing the Plugin Directory

    Browse by Category

    In WPD, Plugins are categorized carefully. You can browse all the categories from the homepage or you can access the category lists from any page by clicking the button from the left of the website.


    Browse by Tags

    Each plugin listed in WPD is marked with useful tags. You can browse plugins by Tags from the All Tags page


    Searching in WPD

    Multi Tag Search

    You can search plugins using multiple tags. To perform a multi-tag search. Go to Homepage and then in the search field type any keywords or tags(comma separated) and then click on the search button. To search plugins from a selected category just select the category from the dropdown and type your tags.


    Searching a specific Plugin in WPD

    If you want to find a specific plugin in our directory, Go to Homepage and then select the "Search in Title" option. Then write the name of the plugin and click the search button to find the Plugin.


    Plugin Lists

    Whats a Plugin List

    Plugin Lists are user created lists of plugins. Any registered users can create Plugin Lists and share it with anyone or make it private.


    Why Create a plugin List?
    • Easy to keep track of your favourite and useful plugin.

    • Share list of plugins on blogs, social media or to a client.

    • Keep a track of what plugins you installed in which of your blogs by creating a list for each blog



    Creating a Plugin List

    To create a Plugin List, click the button from the left of the page; a popup box will appear. In the "List Name" field, put the name of the List. eg: Best Seo plugins for your site.
    In the Description field, put a few words describing the List.
    By default, lists are automatically published as public, which is visible to everyone. If you do not want others to see the List, select "Private" from the dropdown list. Then click the "Create List" button to create the list.


    Adding Plugins to your List

    To add a plugin to your List, go to a plugin page and click the "Add to List" button. A popup box will appear where you can select in which of your list you want to add this plugin. You can add a note if you want, this note will appear below the plugin in your list.
    P.S: You can only add plugins that are in our directory.

    Your Lists will appear in our "Plugin Lists" page when you set the list as "Public" and your list contains atleast 2 plugins.


    Editing your Lists

    When you are on your list page, notice there is a button on the top right corner of the page. Click it to edit the List Name and the List Description.


    Accessing All your Lists

    You can access all your Plugin lists by going to your profile and clicking the "Lists" tab.


    Removing your Lists

    You can remove your Plugin lists by going to your profile and clicking the "Lists" tab. on top right of each list click the button to remove the list completely.

    While tremendous effort has been put to keep this directory precise and complete, still errors and omissions are unavoidable and possible. We welcome any suggestions for corrections, deletions, and idea that might improve the overall experience.

    To submit a Feedback click the from the bottom right corner of the site.

    Brave Popup Builder
    Our Latest WordPress Plugin
    Create Awesome WordPress Popups with Intuitive visual Editor. Choose from hundreds of Presets. Create Beautiful Popups and convert more visitors to subscribers, clients and customers.
    This Popup was Built with this plugin.
    Marketing knowledge
    Upgrade your
    Leverage agile frameworks to provide a robust synopsis for high overviews.
    Register or log in to assess the record