Wordpress

How to Enlarge First Character of First Paragraph in WordPress

December 5, 2013

After a long time, I was requested from one of my loyal readers to write an article about how to enlarge the first character of first paragraph in WordPress. So, today I’m just going to show you about how to enlarge first character of first paragraph in WordPress. So, if you are looking for it then follow this article. Because by doing this your readers will more likely and excitingly read your blog stuff. It’s also called typography trick.

People search for how to enlarge the initial letter of first paragraph in WordPress. Hope you will like and share this article on your favorite social media websites.

Enlarge First Character of First Paragraph in WordPress

Enlarge First Character of First Paragraph in WordPress

Follow the steps below:

Step #1: Placing the PHP codes in Functions.php file

In this step all you need to do is to place the following PHP code in functions.php file which is located in your (directory: /themes/your-theme/functions.php):

function post_first_letter($content = '') {
 $pattern = '/<p( .*)?( class="(.*)")??( .*)?>((<[^>]*>|\s)*)(("|“|‘|‘|“|\')?[A-Z])/U';
 $replacement = '<p><span title="$7" class="post-first-letter">$7</span>';
 $content = preg_replace($pattern, $replacement, $content, 1 );
return $content;
}
add_filter('the_content', 'post_first_letter');

Step #2: Place the CSS codes in Style.css file

Now, all you need is that place the following CSS codes in style.css file:

.post-first-letter {
font-size: 50px;
float: left;
margin-top: 14px; 
margin-right: 5px;
color: red;
}

That’s all.

All credits goes to Drop Caps.

Muhammad Dilawar
Muhammad Dilawar
Muhammad Dilawar founded Softstribe and has spent 12+ years building and speeding up WordPress sites, from WooCommerce stores to Cloudflare and server setups. A Top Rated freelancer on Upwork with a 100% recommendation rate, his client work has generated over $500K in revenue.
More from Muhammad Dilawar →