Message blocks shortcodes

From Graphene Theme Documentation
Jump to: navigation, search

To make it easy to mark your content for visitors, a number of shortcodes have been included in the Graphene theme.

These are called "message blocks", and at present, there are four of them:

  • Notice block
  • Important block
  • Warning block
  • Error block
The shortcodes buttons added by theme into the WordPress Editor

These shortcodes are all accessible from the WordPress Editor.

To markup any text with any of the message blocks shortcodes, simply highlight the text and click on the corresponding buttons on the Editor. The Editor should then automatically wraps the text you highlighted within the opening and closing tags of your shortcodes.

The following example shows how the text to be marked up with the notice block appears on your Editor:

[notice]Text to be wrapped within the notice blocks should go here.[/notice]

Similar formatting follows for the other three message blocks. Note that you can either use the buttons on the WordPress Editor, or simply manually enter the shortcode's opening and closing tag yourself.

When the post or page is viewed on the front-end of your website, they will appear with the preformatted styles as depicted below:

Message-blocks.png

Caveats

Since these shortcodes and corresponding style declarations as well as the icons used for them are all defined and located in the Graphene theme, switching to another theme will retain the shortcodes inside your content, but they will no longer be applied any styling on the front-end. That is, they will appear in the front-end exactly as they do in the Editor, which is text wrapped inside the opening and closing shortcode tags.

If you would like to retain the formatting on the front end as well after you have switched themes, follow through the following guide.

  1. Copy these files from the Graphene theme's folder into your new theme's folder, retaining the folder structure.
/includes/theme-shortcodes.php
/js/mce-l10n.php
/js/mce-shortcodes.js
/js/buttons/warning.png
/js/buttons/important.png
/js/buttons/notice.png
/js/buttons/error.png
  1. Copy the following PHP code into your new theme's functions.php file. Ensure that they are wrapped within the PHP's opening <?php and closing ?> tags.
require( get_template_directory() . '/includes/theme-shortcodes.php' );
  1. Copy the following CSS styles into your new theme's style.css file
/* =Shortcode blocks
-------------------------------------------------------------- */

.message-block {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
        padding: 5px 10px 5px 50px;
    background: #eee;
    margin: 10px 0 0;
        min-height: 35px;
}
.message-block p:first-child {
        margin-top: 0;
}

.warning_block,
.error_block {
    background: #FCC url(js/buttons/warning.png) no-repeat scroll 10px 7px;
    border: 1px solid #F99;
    color: #C31B00;
}
.error_block {
    background-image: url(js/buttons/error.png);
}
.notice_block {
    background: #FDEBAE url(js/buttons/notice.png) no-repeat scroll 10px 7px;
    border: 1px solid #E6C555;
    color: #9E660D;
}
.important_block {
    background: #DEE3AB url(js/buttons/important.png) no-repeat scroll 10px 7px;
    border: 1px solid #A3C159;
    color: #5E6F33;
}

Note: you can also place all the files and codes described above inside your child theme instead of the parent theme. If you decide to do so, replace all instances of get_template_directory() and get_template_directory_uri() with get_stylesheet_directory() and get_stylesheet_directory_uri() respectively. Do this for the codes above and for the codes inside the two PHP files listed in Step 1.