Posted in:

How to Customize WordPress Theme

How to Change the Font of Your WordPress Site

Generally, every WordPress theme comes with a default font featuring a wide variety of types, sizes, and styles. If you dislike it and want to make some changes, simply make use of your WordPress admin panel and do some configurations of the Appearance section.

Log into WordPress Dashboard

In the very beginning, you need to log into the WordPress dashboard using your account and password. Then, scroll down to the Appearance section that is located at the left sidebar, and click on the Editor button.

Now, hit the Stylesheet button at the right hand of the whole screen, which is under the Styles category like the image showed in below.

Stylesheet screen

After making sure that you are on the main stylesheet (style.css) screen, you can add some attributes to your CSS to change the size, color, font, and many more for your text using some codes listed in the following parts.

WordPress Appearance section

Font Family

The CSS of font-family property indicates a list of primary font names to display your contents. Different names are separated by a comma, indicating that they are alternative options. Generally, the browser chooses the first font on the list. If it is not installed on the computer, then browser will select from the fallback fonts.

As there is no guarantee that a certain font selected by you is installed on the computer of your readers, you’d better add some generic fonts, such as Arial, Calibri, Serif, Times New Roman, and Verdana.

To achieve this, you simply need to paste the following code at the top of the “style.css” sheet, and click Update File button. Note that we are taking the “Courier New, Courier, monospace” font type as an example.

Font Family

Font Size

You can also change the font size as you wish, making it suitable for the overall layout of your theme. In the following, we have listed a simple example of how to set a fixed font size of your navigation menu to 24 pixels (24px).

Font Size

In fact, setting your font with a fixed size has a disadvantage. After all, your readers use different browsers with different settings, so your content can not be guaranteed to display perfectly with a fixed size.

To resolve the drawback and ensure a high level of scalability, you can make use of the flexible relative unit of em to control the typography like size, margins and indents, leading. Thus, the word displayed on your readers’ screen can resize itself according to the computer settings. The code just looks like the following.

Font Size Example

Font Color

Generally, the default font color is black, which is best suited to a white background. However, if the background color of the theme is dark blue, then you’d better change your font with a light color. To do this, simply add the following code into your style.css page.

Font Color

How to Show Today’s Date in WordPress

It is a good way to show that you are still alive by having the current date on your WordPress site. Limited to knowledge, you may take it for granted that you do not have the ability to get the current date dynamically displayed on your website. In this tutorial, we will guide you how to show today’s date in WordPress.

There are two easy routes available for you: One is via a plugin, and the other is via a shortcode. If you are beginners, we advise you to use the former one which is easier for you to get the job done. Certainly, you are free to deal with a shortcode if you have some coding skills. The main difference between the two methods is that you can only display today’s date on sidebar and footer areas with the former one while you are free to choose the location for today’s date with the latter one.

Show Today’s Date with a Plugin

On the market are many exclusive plugins among which we would like to recommend Date and Time Widget. The reason is that this plugin distinguishes itself from others due to the ease of use. It will create a Date and Time widget for you to stylize the local date and insert it to your widget area. To begin with, it is necessary for you to install and activate the plugin at first.

Upon the activation, you need to drag the Date and Time widget to your sidebar or foot area on the Appearance > Widgets page. Then you have the freedom to decide the background color, time format, date format, text color, font size, and font family. If you just want to show the current date, you should select the Time Format as “None” from the dropdown.

Show Today's Date

And there is no need for you to change the font family which has inherited from your theme’s font. Here a suggestion is that some other settings need to be consistent with your web design. When you save your changes, Date and Time Widget will show today’s date according to your settings.

Custom Design

Show Today’s Date with a Shortcode

There are some instances when you want to find a clean solution. It is possible for you to reach the goal with a shortcode. If you are worried to mess up your website, you’d better create a child theme where you need to add the below code into your functions.php file.

Show Today's Date - PHP Code

At this moment, you have successfully created a shortcode for the current date. With the [datetoday] shortcode, you are able to show today’s date on any WordPress post or page. Note: The date format can be changed on the Settings > General menu.

Show Today's Date - General Settings

Show Today’s Date with a Code

The previous two methods are more perfect for total beginners who have no idea adding code. But developers who are familiar with code may be more willing to use another method. With the consideration of that, we also give a detailed guidance on how to show today’s date with a code.

Two different code snippets are available for you to display the current date. The former one works like the shortcode on the basis of your WordPress settings. And the latter one enables you to specify a unique date format.

  1. <?php echo date(get_option(‘date_format’)); ?>
  2. <?php echo date(‘l jS F Y’); ?>

The example is to position the current date in the header of the theme, which can be seen from the below image.

Show Today's Date - Example

As a result, on your front-end website will be the current date below your header.

Final Verdict

For your convenience, we stick to the idea that you’d better show the current date with a plugin because it is more time-consuming for you to create a shortcode. On one hand,you will spend some time learning how to create a child theme. On the other hand, you have to create a shortcode every time your theme is changed.

How to Add a Countdown Widget in WordPress

In general, to add a countdown widget in WordPress is the same as to install other plugins, which is simple and easy-to-operate. To get it started, you only need to install and activate it. Now, let’s see more details in below.

First of all, log in the dashboard of WordPress and enter the “Plugins” section to “Add New” plugins. Once done, you can notice that there are tens of WordPress plugins you all need to succeed online. Back to the topic, you need to search the “Uji Countdown” plugin in the right blank bar.

Countdown Widget - Add New Plugin

Next, click “Install Now” and wait a moment until the whole installation is complete.

Countdown Widget - Install Now

If everything goes right, you can go back to the “Installed Plugins” to check and activate the Uji Countdown plugin by clicking “Activate” button.

Countdown Widget - Activate Plugin

Next, make a hit on “Settings” option and enter the editing page of this countdown plugin. By the way, if you happen to dislike the current one, you can choose the “Deactivate” option to uninstall it. Enter the “Add/Edit Countdown” section, you need to fill in the “Timer Title”, “Google Font” and the main format of your countdown timer as follows.

Countdown Widget - Add & Edit Countdown

Scroll down and choose the favourite colours for both countdown box and post text. In the meantime, you are allowed to decide the size of label and preview your countdown style in the bottom of this editing page. Having done those mentioned steps, you need to click the “Save Style” button to save changes.

Countdown Widget - Countdown Style

And then, you will be notified that your countdown timer has been successfully created. And in the “My Countdowns” area, you can take an overall look at the created countdown style. Till this step, you have successfully added a countdown widget already.

Countdown Widget - Countdowns

How to Use a Countdown Widget

To use or run a countdown widget, you firstly need to add a new post in the “Add New” section of “Posts”. As is displayed in the following screenshot, you can add a countdown timer by clicking the “Clock” icon in the “Visual” section.

Countdown Widget - Countdown Timer

Then, there comes a pop-up window where you are required to choose the countdown style, the expiry date and time. And you should fill in the redirecting URL after the defined expiry date. At length, you shall click the “Insert Shortcode” option to customize this functionality.

Countdown Widget - Insert Countdown

At last, you will get a string of automatically-generated code like [ujicountdown id=”Happy New Year” expire=”2015/01/01 00:00″ hide=”” url=”http://blog.besthostingsearch.org/”] in the post body. Click the “Preview” button and you will get one clock timer like the following one.

Countdown Widget - Sample Countdown Timer

The Top WordPress Countdown Plugins

As is noted above, you are allowed to change the current countdown timer and replace it with tens of available ones on the official site of wordpress.org. For simplicity and convenience, let’s have a quick and brief look at the top WordPress countdown plugins in below.

  • WordPress Countdown Timer – a widely-acknowledged countdown plugin which displays a countdown timer to any time, day or event.
  • WordPress Countdown Widget – an easy-to-control and fully customizable countdown timer for WP site. It is jQuery powered and supports multiple instances and colour customizations.
  • KB Countdown Widget – is a multi-functional WP countdown plugin which can be used as a widget in your post and template. It is easy to localize and uses standard tags which includes PERCENT-DONE, TIME-UNTIL, TIME-SINCE, etc.

Leave a Reply

Your email address will not be published. Required fields are marked *