WordPress Typography & Shortcodes

No Comments » Written on October 21st, 2010 by
Categories: Wordpress

Are you running a blog on WordPress platform and you have been wondering how to add a little style to your articles? Maks some content stand out, outline the important facts, well this page will show you the common shortcodes you can use on your WordPress blog. Make something stand out of the text with any of following typography and shortcodes available. Please not that some of these codes might not work on your blog. They are also dependent of WordPress theme used.

The typography included with the our theme is carefully sculpted for the best possible search engine optimization (SEO) and also includes support for numerous bonus styles. Using the included shortcode functions, you can easily add character to your content without ever having to look at the code. See below for the complete list and usage.

This is an H1 Headline

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H2 Heading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H3 Subheading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H4 Subheading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H5 Subheading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

List Style Examples:

Unordered List Example:

  • List Item One
    • Sublevel List Item A
    • Sublevel List Item B
    • Sublevel List Item C
  • List Item Two
  • List Item Three
  • List Item Four

Ordered List Example:

  1. List Item One
    1. Sublevel List Item A
    2. Sublevel List Item B
    3. Sublevel List Item C
  2. List Item Two
  3. List Item Three
  4. List Item Four

Check List Example:(<ul class= “check”>)

  • Checklist Item 1
  • Checklist Item 2
  • Checklist Item 3

Caption List Example:(<ul class= “captionlist”>)

  • Caption list Item 1
    • this is a sub-level list item in an unordered list with a class of ul.captionlist.
  • Caption list Item 2
    • this is a sub-level list item in an unordered list with a class of ul.captionlist.
  • Caption list Item 3
    • this is a sub-level list item in an unordered list with a class of ul.captionlist.

 

Caption Styles

Example Usage of “blocknote” shortcodes

[ blocknote class="red" title="Your Caption Title"]This is a blocknote caption style using the red style attribute.[ /blocknote]

Caption TitleThis is a “blocknote” caption style using the default style. This style is achieved using the shortcode class=”none”.
Caption TitleThis is a “blocknote” caption style using the default style. This style is achieved using the shortcode class=”green”.
Caption TitleThis is a “blocknote” caption style using the default style. This style is achieved using the shortcode class=”red”.
Caption TitleThis is a “blocknote” caption style using the default style. This style is achieved using the shortcode class=”blue”.

Icon Classes

The icons used below were generously created and donated to SimpleThemes by wefunction.com

Example Usage of “note” shortcodes

[ note class="alert"]Your text to be displayed.[ /note]

This is an alert style that can easily be displayed within your content by inserting the code demonstrated above. This may help to serve your users with system error messages.- link color test

This style is shown by using the “note” shortcode described above: class=”alert“

This is a informational style that can easily be displayed within your content by inserting the code demonstrated above. This may help to accent additional information within an article.- link color test

This style is shown by using the “note” shortcode described above: class=”info“

This is a warning style that can easily be displayed within your content by inserting the code demonstrated above. This may help to serve warnings before proceeding with specified steps. – link color test

This style is shown by using the “note” shortcode described above: class=”warn“

This is an acceptance style that can easily be displayed within your content by inserting the code demonstrated above. You may wish to display this style when outlining success messages.- link color test

This style is shown by using the “note” shortcode described above: class=”accept“

This is a CD/DVD style that can easily be displayed within your content by inserting the code demonstrated above. You might use this style if outlining a band member or video credits. – link color test

This style is shown by using the “note” shortcode described above: class=”cd“

This is a coffee style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to offer your readers the chance to donate or buy you a cup of coffee :) – link color test

This style is shown by using the “note” shortcode described above: class=”coffee“

This style is shown by using the “note” shortcode described above: class=”email“

This is a download style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to dispay file download links. Sample Download A | Sample Download B

This style is shown by using the “note” shortcode described above: class=”download“

This is an idea style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to outline additonal tips in instructional articles. – link color test

This style is shown by using the “note” shortcode described above: class=”idea“

This is an photo style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to give proper photo credits where credit is due- link color test

This style is shown by using the “note” shortcode described above: class=”photo“

This is an secure style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to tell your readers that something is protected or secured. – link color test

This style is shown by using the “note” shortcode described above: class=”secure“

This is an author style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to give author/book review credit. – link color test

This style is shown by using the “note” shortcode described above: class=”author“

This is an search style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to remind your readers to search the forums before asking questions. – link color test

This style is shown by using the “note” shortcode described above: class=”search“

This is an comment style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to highlight a comment made or to notify your users that comments are available. – link color test

This style is shown by using the “note” shortcode described above: class=”mycomment“

This is an comment style that can easily be displayed within your content by inserting the code demonstrated above. You might use this to notify your readers that time is running out!. – link color test

This style is shown by using the “note” shortcode described above: class=”time“

This is an tools style that can easily be displayed within your content by inserting the code demonstrated above. You might use this style to alert your readers of technical specifications. – link color test

This style is shown by using the “note” shortcode described above: class=”tools“

This style is shown by using the “note” shortcode described above: class=”twitter“

This is a blockquote. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

The blockquote dialog above is shown by entering:

< blockquote>Your blockquote text here< /blockquote>

This entry was posted on Thursday, October 21st, 2010 at 1:40 pm and is filed under Wordpress. You can subscribe to any comments to this entry via RSS 2.0. You can leave a response, or trackback from your own site.

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image