WordPress Site Title and Tagline

WordPress Site Title is the Title given to the website.

The tagline is something like a slogan, subtitle which tells the visitor what is on the website or article. It simply gives a better idea of what the visitor will see on that.

So be careful while giving a tagline as it reflects the SEO too.

Here’s how to echo or print a title or tagline in the template using PHP:

For the website name:

<?php echo get_bloginfo('name'); ?>

For the tagline:

<?php echo get_bloginfo('description'); ?>

How to embed font in CSS (from web server OR google fonts)

Replace FontName with font’s name. The FontName is what you will be calling throughout the CSS classes.

@font-face {
     font-family: FontName;
     src: url(FontName.woff);
}

That’s how you embed a font in your web server. Now let’s learn how to embed fonts from google fonts API.

Go to fonts.google.com and make a collection of your favorite fonts (or simply the fonts you want to be embedded in the website).

You can do so by clicking the sign near each font.

Now that you have selected some fonts, “Families Selected” box will appear in the bottom of the page. Click that box and you will find a code similar to the one below:

<link href="https://fonts.googleapis.com/css?family=Baloo|Love+Ya+Like+A+Sister|Oswald|Roboto|Roboto+Condensed|Slabo+27px" rel="stylesheet">

Copy that into the <head> of your HTML file.

Now there will be relative CSS rules given in the same window. Find something like this:

font-family: 'Roboto', sans-serif;

font-family: 'Baloo', cursive;

font-family: 'Love Ya Like A Sister', cursive;

font-family: 'Slabo 27px', serif;

font-family: 'Roboto Condensed', sans-serif;

font-family: 'Oswald', sans-serif;

Use the font-families to call specific font.

Translate month name in WordPress

In WordPress, you might want to rename posts’ month name from English to Dhivehi or whatever language. This is a very simple function which will help you change the posts’ month name.

Put this into your function.php

function mas($month) {
switch ($month) {
case 1:
    $mas = "ޖަނަވަރީ";
    break;
case 2:
    $mas = "ފެބުރުވަރީ";
    break;
case 3:
    $mas = "މާރިޗު";
    break;
case 4:
    $mas = "އެޕްރީލް";
    break;
case 5:
    $mas = "މެއި";
    break;
case 6:
    $mas = "ޖޫން";
    break;
case 7:
    $mas = "ޖުލައި";
    break;
case 8:
    $mas = "އޯގަސްޓު";
    break;
case 9:
    $mas = "ސެޕްޓެންބަރު";
    break;
case 10:
    $mas = "އޮކްޓޯބަރު";
    break;
case 11:
    $mas = "ނޮވެންބަރު";
    break;
case 12:
    $mas = "ޑިސެންބަރު";
    break;
}
return($mas); }

 

And use this wherever you want to view the date in Dhivehi.

<?php echo mas(get_the_date('n')); ?>

Truncate Text using CSS

Truncate text if it exceeds the parent’s (div’s) width.

 

HTML

<div class="wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

 

CSS

.wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}