Formatting Tricks That Make Your WordPress Site Unique

This tutorial will help you learn more formatting options that will help make your blog your own. Make your blog interesting and unique instead of being forced to deal with the same standard WordPress default settings everyone else uses.

Formatting Date and Time by Altering the_time Function

WordPress normally shows the date at the bottom of each post in the meta data and it looks like this: February 14th, 2012. We had a client recently that wanted the date formatted like: 14.02.2012, so we had to modify the the_time function in the meta.php file which is in a subfolder of your current active theme. Here is how you can change the time format in your own WordPress installation:

First, navigate to your theme’s meta.php file. It is located in the wp-content/themes/your-theme/_/inc folder. Open it in your favorite text editor and find the time tag which will look something like this:

Posted on:

In the above line of code there are a few opportunities to make changes to the way the time and/or date is displayed. For example by default, the text that reads “Posted On” has italics. You can change it to normal text by removing the italics tags. You can also add your own formatting HTML tags as needed. For example you could change the italics tag to a bold tag to make it bold. We are going to show you how to change the actual date format though. That is done by altering the PHP code where it reads: “the_time(‘F js, Y’)”. The part of that code that controls the way the date is displayed is what is in the parenthesis. “F” is for the month, like: “February”,. “js” causes the day of the month to show . “Y” is for the full year. You can change each as you please.

Below are the correct abbreviations to use to create several different date formats:

Day
d = two digit day of month like 01 or 31
j = two digit day of month with no leading zeros like 3 or 29
l = Lower case L is full spelling of the day of the month like Monday or Tuesday
D = three letter abbreviated day of the month like Mon or Tue

Month
F = the month spelled out in full like January or February
M = three letter abbreviated month name like Jan or Feb
m = two digit month like 01 for January or 12 for December
n = number representing the month with no leading zeros like 01 through 12

Year
Y = four digit year like 1999 or 2012
y = two digit year like 99 or 02

AM/PM
a = lower case am or pm
A = upper case AM or PM

Hour
g = 12 hour format without leading zero like 1-12
h = 12 hour format with leading zero like 01-12
G = 24 hour format without leading zero like 1-24
H = 24 hour format with leading zero like 01-24

Minute
i = minutes with leading zero like 00 to 59

Second
s = lower case s is seconds with leading zeros like 00 to 59

Time Zone
e = time zone identifier such as GMT or UTC
O = difference in GMT time like +0200
P = difference in GMT time with a colon added like: +02:00

Preformatted Time/Date
c = lower case C is the date in ISO 8601 format such as 2012-02-12T15:19:21+00:00
r = ยป RFC 2822 formatted date/time like Thu, 21 Dec 2012 16:01:07 +02

Change the function parameters from the_time(‘F jS, Y’) to the_time(‘d.m.Y’) to change from February 13th, 2012 to 13.02.2012 or use any of the other letter combinations from step 2 to make your own date format. Be careful though because the parameters are case sensitive. For example d is the day of the month as a number from 1-31 and D is the abbreviated day’s name such as Monday. If you use any other letters or characters in between the single quotes of the_time function, they will show up as is, so if you want to use a dash, period, comma or something similar as a separator, go ahead.

That is all there is to changing the time and date format of a WordPress post’s meta data. Continue reading to learn other formatting tricks to spice up your WordPress blog.

Reformatting Post Titles

We often run into situations where we need to change the way post titles are displayed. Lets do an exercise where we change the post titles of the multiple post page of WordPress. Our current project wants a special style for the post titles along with no hyperlinks.

Here is how to go about removing the hyperlinks:
Find the index.php file of your WordPress theme. It will be in wp-content/themes/your-theme/.

Locate the line of text that reads something like:

Remove the link tags and the PHP function, the_permalink from the above line of code so it looks like:

Save your file and you are done!

That was easy, but we still need to add some special styles to the post titles to make them look like our client wants. If we wanted all titles throughout the site to be different we could just alter the style for the h2 tag. In this case we just want to change the styles for post titles on the multiple post page. Therefore, we need to add a class name to the h2 tags that surround the post title. Take the same code from above and alter it to look like this:

Then locate the style sheet for your theme. It will be located in wp-content/themes/your-theme/style.css. Add the post_title class anywhere in the style sheet and style it using CSS code as you wish. Here is how we did ours:

.post_title{  font-family: arial;  font-weight: 100;  font-size: 48pt;  margin-top: 76px;  margin-bottom: 28px;  color: #939597;  letter-spacing: .48pt;  }

Notice how we added several CSS style declarations. You can add any styles you wish to your special class. Alternatively, you could of also decided to get rid of the h2 tags and use something else such as a h1 tag or whatever you desire.

Altering the Home Page Footer

It’s nice to have a customized footer on the home page of a WordPress page, but it can be a little confusing when it comes to finding the function and page to edit. To make a custom footer on the home page, first you need to alter the get_footer function in the index.php file of your current theme.

Here is how to add a new footer to your home page:

Locate your theme’s index.php file which will be in the wp-content/themes/your-theme directory. Open the file in your favorite text editor or in In the WordPress editor from your WP dashboard.

Find the get_footer function in index.php. Do a simple search and find it if you don’t see it easily. Pay attention to what, if anything, is in the parenthesis following the function’s name. For example, depending on your currently selected theme, your get_footer function will either look like: get_footer() or like: get_footer(‘home’). If it has some text in the parenthesis as in the second example, then whatever is in the parenthesis will be included in the file name that the get_footer function includes in your home page. If there is nothing in the parenthesis, then the get_footer function is including the footer.php file. If, for example, it has “home” in the parenthesis, then the get_footer function includes the file named: “footer-home.php“. The format is footer-[name].php. The footer file in question will be in the same directory as your index.php file was. Find it and open it in your favorite text editor.

get_footer versus wp_footer

We want to bring the wp_footer template tag to your attention as it can easily be confused with the get_footer function. Another reason it is relative to this tutorial is that the wp_footer template tag is required to be called directly before the end body tag of all themes. Almost every theme has the tag in either the index.php, footer.php or footer-[name].php file. The get_footer function is the function that causes the inclusion of the footer file while the wp_footer template tag has its own functionalities. The wp_footer template tag is used in most themes to call important JavaScript functionalities into the theme. It is important because many themes will be broken or incomplete without it. It is required because of the fact that many themes will not work without it.

Getting Rid of Encrypted Footer Code

If you open your footer.php or footer-[name].php file and find encrypted code in it, remove it! Some not-so-nice theme developers will use encrypted code to force you to show links to their sites and possibly even hide more malicious code. They think if they encrypt it, that you cannot change it. Well we will show you how you can change it without destroying the footer itself in the process. Simply deleting the encrypted code will probably cause the destruction of some content you need, so don’t do that. Follow these simple steps to transform the encrypted code into regular code. Then you can delete only the parts you don’t want.

Find a file that calls the get_footer function. For example, it is often called in files such as index.php or single.php. open that file in your favorite text editor. Start with index.php. You should find the get_footer function there towards the bottom of the page. If not, try single.php then page.php.

Enter comment lines before and after the get_footer function call so that section of the file looks like this:

      

In the above code example, we used a series of #s in between the HTML comment tags, but you can use anything that you can easily search for later. This is because in the next steps you will be using your text editor’s search and find features to locate these comments. Use something you can search for easily.

Save the file and be sure it is uploaded to your WordPress site.

Open the page in a browser. If you used index.php to add the comments to, then go to your WordPress home page. If you changed your default home page, then go to the page that displays multiple posts. Otherwise go to the proper page according to the one you added the comments to and open it in a web browser.

Right click on the page in your browser and select “View Source” to see the actual HTML the page produces. Use your browser’s search feature to find the text in the comment tags such as ######…. Copy everything in between the comment tags and paste it in place of the encrypted code in your footer file.

Go through the code you pasted an remove anything that you don’t want such as links to other sites and anything that looks malicious or that you just don’t want on your pages.

That is all you need to do to make your footer.php file safe if it has encrypted code in it. It is a smart thing to do for security reasons as well as to get rid of unwanted links and text.

This article was authored by:

A serial entrepreneur in projects large and small across multiple industries. Mike is the CEO of Terran Marketing which specializes in WordPress based websites.

Michael Jackness has authored 169 posts.Visit Website

Be The First to Comment

Add Your Voice: