{"id":94,"date":"2018-08-21T16:57:18","date_gmt":"2018-08-21T16:57:18","guid":{"rendered":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/use-shortcodes\/"},"modified":"2024-09-19T04:19:25","modified_gmt":"2024-09-19T04:19:25","slug":"use-shortcodes","status":"publish","type":"chapter","link":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/use-shortcodes\/","title":{"raw":"Use Shortcodes","rendered":"Use Shortcodes"},"content":{"raw":"Shortcodes are small blocks of square-bracketed code which Pressbooks recognizes and handles in special ways in the webbook and export files. Shortcodes can be used both in the Visual Editor and in the Text editor. For most users, inserting content via the Visual Editor will be the easiest option. Shortcodes also provide a convenient way to include Pressbooks-specific elements in an external document which is intended for import into Pressbooks<\/a>.\n
Note: <\/strong>Shortcode examples on this page are wrapped in a <code><\/code> element which forces the shortcodes to be displayed as text instead of being properly rendered. If you paste them from this chapter into your book, they will not work correctly. You can, however, retype the text displayed in the shortcode into your chapter.<\/div>\n

Headings and subheadings<\/h1>\n
[[heading]<\/strong>Top-level heading inside chapter (H1)[\/heading]]<\/strong>\n[[subheading]<\/strong>Second-level heading inside chapter (H2)[\/subheading]]<\/strong>\n<\/code><\/div>\nDescription<\/strong>: Formats the text as a heading (h1) or subheading (h2). Note that the \"heading\" is not the chapter title, but the next level of headings. Custom classes can be applied to this shortcode.\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Code<\/h1>\n
[[code]<\/strong>Text to be rendered in fixed-width font.[\/code]]<\/strong>\n<\/code><\/div>\nDescription<\/strong>: Formats the text with fixed-width font. HTML tags can be displayed if they are entered in the visual editor (Pressbooks will automatically convert them to HTML character entities). Custom classes can be applied to this shortcode.\n\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"Example<\/td>\n\"Example<\/td>\n<\/tr>\n
\"[code]<pThe code can also be a block.<\/p> 4 spaces before the line here\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0and here more code<\/b> [\/code]\" width=\"370\" height=\"108\"><\/td>\n\"Example<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nNote<\/strong>: for the second example above, the text needs to be entered in the Text Editor with no extra blank lines between lines of text or it will not display correctly.\n

Email<\/h1>\n
[[email]<\/strong>email@yourdomain.com[\/email]]<\/strong>\nOR\n[[email address=<\/strong>email@yourdomain.com \/]]\n<\/strong>OR\n[[email address=<\/strong>hugh@pressbooks.com]<\/strong>Link to be displayed[\/email]]<\/strong><\/code><\/div>\nDescription<\/strong>: Formats the email address into a proper email link. This shortcode has multiple variants. Custom classes can be applied to this shortcode.\n\n\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
[[email]<\/strong>example@pressbooks.com[\/email]]<\/strong><\/code><\/td>\nexample@pressbooks.com<\/a><\/td>\n<\/tr>\n
[[email address=<\/code><\/strong>example@pressbooks.com\u00a0<\/code>\/]]<\/code><\/strong><\/td>\nexample@pressbooks.com<\/a><\/td>\n<\/tr>\n
[[email address=<\/code><\/strong>example@pressbooks.com<\/code>]<\/code><\/strong>Email us<\/code>[\/email]]<\/code><\/strong><\/td>\nEmail us<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Equation\/Latex<\/h1>\n
[[equation]<\/strong>latex code here[\/equation]]\n<\/strong>OR\n[la\u200btex]<\/strong>latex code here[\/lat\u200bex]<\/strong>\n<\/code><\/div>\n
Description<\/strong>: Renders the expression using the book's preferred LaTeX rendering solution.<\/div>\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
[[equation]e^{\\i \\pi} + 1 = 0[\/equation]]<\/td>\n\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Blockquote<\/h1>\n
[[blockquote]<\/strong>Text to be formatted as a blockquote[\/blockquote]]<\/strong><\/code><\/div>\nDescription<\/strong>: formats the content as a block quote. Custom classes can be applied to this shortcode.\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Footnote<\/h1>\n
[[footnote]<\/strong>Your footnote text here [\/footnote]]<\/strong>\n<\/code><\/div>\n
\n\nDescription<\/strong>:\u00a0Formats text into a footnote.\n\nIn the visual editor, the footnote text, wrapped in the shortcode, should be placed where the footnote reference number should be located, and not at the end of the chapter or page.\n\n<\/div>\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
This leads to a footnote[[footnote]This is the footnote content. [\/footnote]].<\/td>\n\"Visual\n\n\"Visual<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Anchor<\/h1>\n
[[anchor id=<\/strong>anchorname \/]]<\/strong>\n<\/code><\/div>\n
\n\nDescription<\/strong>:\u00a0Creates an anchor which can then be linked to via href=\u201d#anchorname\u201d.\n\nThe id parameter is required and should include only letters, numbers, hyphens (-) or underscores (_). When linking to the anchor, note that the id value is case-sensitive. Custom classes can be applied to this element.\n\n<\/div>\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"Example<\/td>\n\"When<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Textbox<\/h1>\n
[[textbox]<\/strong>Your text here[\/textbox]]\nOR\n[[textbox class=<\/strong>shaded]<\/strong>Your text here[\/textbox]]<\/strong>\n<\/code><\/div>\nDescription<\/strong>:\u00a0Wraps the text inside a box with an outline. Depending on the selected theme, the box may have a background color.\n\nThe \"shaded\" class or custom classes may be applied to the textbox shortcode in order to change the appearance upon display.\n\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"Shortcode<\/td>\n\"Rendered<\/td>\n<\/tr>\n
\"Usage<\/td>\n\"Rendered<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Columns<\/h1>\n
[[columns]<\/strong>Your text here[\/columns]]\n<\/strong>OR\n[[columns count=2]<\/strong>Your text will be displayed in 2 columns[\/columns]]\n<\/strong>OR\n[[columns count=3]<\/strong>Your text will be displayed in 3 columns[\/columns]]<\/strong>\n<\/code><\/div>\n
\n\nDescription<\/strong>: Formats text in 2 or 3 columns. If the number of columns is not specified, or is a number other than 2 or 3, the text defaults to 2 columns. Custom classes may be applied to this element.\n\n<\/div>\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"Example<\/td>\n\"Example<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Media<\/h1>\n
[[media src=\"<\/strong>URL_of_the_video\" \/]]\n<\/strong>OR\n[[media src=\"<\/strong>URL_of_the_video\" caption=\"<\/strong>Your caption text goes here\" \/]]\n<\/strong><\/code><\/div>\n
\n\nDescription<\/strong>: Embeds media content in an iframe, with an optional caption parameter. Non-image media must be oEmbed-compatible<\/strong>.\n\n<\/div>\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"Example<\/td>\n\"Rendered<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Captions<\/h1>\n
[ca\u200bption width=\"400\"]<\/strong><image> Caption text here[\/ca\u200bption]<\/strong>\n<\/code><\/div>\n
\n\nDescription<\/strong>: formats text as a caption. This is used usually with an image.\n\nThis is a default WordPress shortcode<\/a>. The width parameter (a number) is required.\n\n<\/div>\n\n\n\n\n
Example Code<\/strong><\/td>\nExample Output<\/strong><\/td>\n<\/tr>\n
\"Example<\/td>\n\"Rendered<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Apply Custom Classes<\/h1>\nIf you are familiar with CSS, you may apply custom classes and use custom CSS<\/a> to modify the appearance of some shortcodes . For those shortcodes which support custom classes, they can be added as parameters as in the following example, which adds the class custom_class<\/code> to a textbox:\n
[[textbox class=<\/strong>custom_class]<\/strong>Your text here[\/textbox]]<\/strong><\/code><\/div>\n

<\/a>Nesting Shortcodes<\/h1>\nThe following shortcodes can be nested within other shortcodes:\n