in ,

Make Drop Caps ShortCode In WordPress

The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. Unlike their historic counterparts, drop caps on the Web don’t add value in terms of usability or readability—and they are hard for Web developers to control, often rendering differently across browsers.

source: smashingmagazine

To use drop caps is look more attractive to the paragraph and also dedicate entire pages to a single article. In this post will show you how make your own shortcode Drop caps. Follow the tutorial step by step.

Open your theme’s function.php and add the follow code below:

[php]
function bigletter( $atts, $content = null ) {
return ‘<span class="dropcap">’.do_shortcode($content).'</span>’;
}
add_shortcode(‘dropcap’, ‘bigletter’);
[/php]

add the CSS the your theme’s css file

[css]
span.dropcap{
float: left;
font-size: 168px;
margin-top: 20px;
margin-bottom: 43px;
margin-right: 5px;
color: #8C8273;
line-height: 37px;
}
[/css]

After you done all that, go to your post or page and add the shortcode [dropcap] your text [/dropcap]

What do you think?

Written by Sopheap

The goal of me is sharing new ideas, inspiration art, fresh and useful resource, covering web design and development, graphic design, advertising, mobile development and life style.

Comments

Leave a Reply

Your email address will not be published.

Aitasi

Best WordPress Maintenance Plugin Free

disable right click on wordpress

Disable Right Click On Your WordPress Site