DobsonDev Shortcodes

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.

Read the full description on the official page →