How to Make First Letter in First Paragraph Big in Wordpress (CSS) articles?

If you have noticed, now this page, the first letter is made big for all articles. To enable this, you can use the CSS tricks first-letter and first-child selector:

You would need the following style inserted into your wordpress template (e.g. Single.php):

<style>
.wp_content p:first-child:first-letter { 
  float: left; 
  color: #903; 
  font-size: 75px; 
  line-height: 60px; 
  padding-top: 4px; 
  padding-right: 8px; 
  padding-left: 3px; 
  font-family: Georgia; 
}
</style>

<style>
.wp_content p:first-child:first-letter { 
  float: left; 
  color: #903; 
  font-size: 75px; 
  line-height: 60px; 
  padding-top: 4px; 
  padding-right: 8px; 
  padding-left: 3px; 
  font-family: Georgia; 
}
</style>

Then, you would need to wrap the content using the following code (edit functions.php template file).

// https://helloacm.com
add_filter( 'the_content', 'prefix_big_letter' );
 
function prefix_big_letter($content) {
  return "<div class='wp_content'>$content</div>";
}

// https://helloacm.com
add_filter( 'the_content', 'prefix_big_letter' );

function prefix_big_letter($content) {
  return "<div class='wp_content'>$content</div>";
}

That is it! Simple and effective. You can easily change the CSS style for the first letter as much as you want!

–EOF (The Ultimate Computing & Technology Blog) —

GD Star Rating
loading...

190 words
Last Post: Simple Version Number Updating in Batch File for Build Scripts
Next Post: How To Remove All Blank Lines using Sed or VIM

The Permanent URL is: How to Make First Letter in First Paragraph Big in WordPress (CSS) articles?