Posted in:

How to Customize WordPress Theme

WordPress includes a flexible template system that allows users to beautify the website appearance by customizing themes. However, for customers who have little technical knowledge, they are not easy to change the default themes in the way they like. In below, we will share solutions to some of the comment needs on WordPress customization.

Customize Current WordPress Theme

To create a custom WordPress theme, you can make a change on your currently-use theme by following these steps.

  • Edit an theme that is existed.
  • Modify the existing theme.
  • Use a theme framework to create a new theme.
  • Build a custom theme with Scratch.

In below, we introduce each approach in detail.

1.Edit the theme.

This is the easiest and quickest approach to create a custom theme and achieve the effect you expect. By editing the theme which you have downloaded or used, you can see the styling of the theme and make some modifications. If you know some coding skill and html knowledge, this way can be quite easy and effective, and bring the following advantages:

  • Beautiful and stylish. After being customized, your theme is quite beautiful and stylish, with the amazing pictures or drawing of your own.
  • Unique & The Personality. Always, a theme from the third party companies is widely used by thousands of websites, which results your site be same with others. However, after customizing, your site is unique in the web.
  • Compatibility. After being created, your theme is designed with your actual needs. So all the functions are needed and suit your website content. Your theme is more compatible with the content, making the site more harmonious and more comfortable to visitors.

If you decide to go down this way, backup your theme at first. Because you may get yourself into a big mess, and even destroy your theme completely if the theme is not well coded or modified. To create theme, you just need to go to each theme file and modify them as you want.

2. Modify an existing theme.

This approach is widely used by people because it doesn’t need to write any code. The Theme Customizer provides a WYSIWYG interface to allow users customize a theme by clicks. With it, you can change images, colors, titles, and the layouts of your theme.

3. Use a theme framework.

Using a theme framework to create a custom WordPress theme is an efficient approach used by thousands of WordPress designers and developers. There are a large number of theme frameworks exist, such as Theme Hybrid, Wonderflux, Arrington, Thematic, etc that are free of charge and you can use as a kind of parent theme. Besides, with much more functionality, you can make fancy layout and style changes without writing a line of code.

4. Build a custom theme with Scratch.

Building a custom theme with Scratch is the most difficult method. However, if you are an experienced developer, it can be the best method and gives you the most control over the theme. If you are importing HTML from an existing static site which is upgrade to WordPress without any changes, it might be the most appropriate approach.

Customize Child Theme

The child theme for WordPress contains all of the features and functionality that the parent theme has, and allows you to modify your website appearance without the need to change the theme files directly.

Whether you use a free theme or a paid one, it might be updated by its designers or developers in the future. Once this happens, all the changes you have made on the parent theme will be lost. However, you can avoid this embarrassment with a child theme.

Use Chrome Developer Tools

The Chrome DevTools is a great tool for customizing the CSS of your theme. With it, you can change the style easily and preview the effect promptly and visually. It is divided into 8 groups for different tasks in the toolbar. Here, you only need to use the Elements part.

Firstly, open the theme that you want to manipulate in Chrome browser. Then, right click any part of the theme, and choose the Inspect Element. Thus, you can see the window of developer tools just like the image showed in below. The left side presents all the HTMLs, and the right side presents the CSS style of each part.

DevTools

To target the part you want to make some changes, you can click on the related HTML, or select the item visually on the page. Then, you can focus on the right-hand style part to modify the theme directly.

One of the most important features of this tool is that you can see the instant effect after you modify the code, without the need to save the change. If you are not satisfied of your customization, you simply need to refresh the page to get rid of what you have done.

Note that all the changes are made on your browser but not the style sheet. This means you’ll not affect your readers who are viewing your site right now.

Then, copy the code changed by you to the child theme stylesheet file.

change stylesheet

Change Template Files

Generally, if you have selected a right theme for your site, there is no need to change the building blocks like header, footer, and sidebar. However, if it is needed, then you have to make use of the template files.

The codes of the most basic template files are showed as following.

template files

If you want more detailed information, simply check this page in WordPress.org.

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.net/”] 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.

How to Display WordPress Posts Alphabetically

This is really simple, you need to hook one function of WordPress only. Find the functions.php file where you add the below code snippet to extend the functionality. The file can be accessed in the wp-content/themes folder. When you save your changes and reload your front page, your WordPress posts will be displayed alphabetically.

Add Code Snippet

How to Add Google Map to WordPress

This method is also very user-friendly. You can find your targeted location from Google Map, or directly type the addresses of places you’d like to show. Then, you can get the embed iframe code for this specific location by clicking the Link button in the left hand panel. After pasting the HTML to embed into your posts or pages, the map will show instantly on your website.

Besides, you can also click the option of “customize and preview embedded map”, with which you can preview and further customize the map for better display.

Leave a Reply

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