So You Want To Use Customized Codes For Your WordPress Theme


I have an extreme fascination for codes and people who can write codes, but fascination is where it ends. I tried hard to learn how to write codes like the people who fascinates me, but have never succeeded. The moment I turn my head, I will forget what I have just learned. So I took the easy way out. “Forget it!” I told myself, “You are never going to write your own codes” But then hey, there are hundreds or perhaps even thousands who are writing codes which I can’t or even dare imagine writing, and they let everybody use their codes for free.

That relieves me more for the need to learn. All I have to do is to Google for it.

If You Find The Codes, Do You Know How To Use It

There another problem though. Finding the codes I want is easy. Wanting to implement them into my WordPress Theme is a different story to be told.

Though I have learned and understand better now, for you guys who are new and like me who has no prior and proper training in writing or using codes, just simply trying to figure out which goes where will be a monstrous brain wrecker. Especially when you want them in something so sophisticated like WordPress and your WordPress Theme.

You see, coders live in a world of their own. The “live by their codes” so to say. In their world, only codes and the toilet exist. Okay, maybe the occasional McBurger, but that’s about it. Even the oxygen they breathe in consist of codes.

The terrifying thing is, to them, everyone lives in the same world. Their world, the one and only world they know. Never ask them what the codes they have written are for and how can you use them to your benefit. All you get will be a mystified frown and from way he looks at your face, you will know he is wondering if you are an alien from outer space. How can a normal person ask such a stupid question in this world.

You are thus left to rot, trying to figure for yourself how you can put those codes to good use. Most of the time, like all sensible people living in a real world, we will let it pass.

It’s a pity though. From the demo shown, you could have created such a fanciful Theme for your WordPress Blog with those codes. If only you knew how and where to insert them.

Understanding Your WordPress Theme Structure.

So being a noob, how can you use all those codes that could do fancy things for you and your site or your WordPress Theme? Fortunately, there is an easy solution of sorts. However, even for an easy solution, no matter how much you hate it, there will not be any short-cuts and there are still some things you have to learn and understand .

You at least have to understand how your WordPress Theme is basically structured. You do not need to learn how to write the raw codes that goes into a WordPress Theme, you just need to know where the codes are placed.

Codes Used In A WordPress Theme

Basically, WordPress Themes are written with 2 kinds of codes. Or to be more specific, there are actually 3 kinds of codes. There CSS codes and HTML, a web markup language. Along with HTML, are php codes that makes HTML as versatile as it can be.

Not to confuse you, and along the way myself, as I am not proficient in either, I will not go into detail about these codes. Just remember there are CSS codes and HTML in a WordPress Theme. The HTML files are grouped under Templates and whatever stylesheets are grouped under Styles.

The Stylesheet codes decides how your Theme looks like. All the elements colors, placing, alignments and whatnots are decided by the Stylesheet CSS Codes. For example you use CSS to make your image float right or left, make your background color black or white and so on.

The Templates decides what appears in your Theme. So if you want an image appearing, you will have to write the HTML codes in a template to make the image appear. So in basic essense, HTML Templates makes it appear and CSS decides the appearance.

With that understanding, you can now open your Theme’s files. You will see a folder named Stylesheet CSS and a bunch of other files with the php extention. These are the HTML Template files. They are given the php extention because it depends on php codes to render. Again, don’t bother with this.

All the elements that appears in your Theme are placed in the HTML Templates or the php files. They are then styled accordingly in the Stylesheet CSS file. Sounds confusing doesn’t it?

Customized Codes For Your WordPress Theme

So now you know you need two kinds of codes to create what you want. The HTML kind and the CSS kind.

Let us take a look at one of the examples in one of my favorite Code Hunting Ground. Take a look at this demo.

Now if you can create something like this in your WordPress Theme, would it not make you look super cool?

Well our friendly code writer has so generously made the codes available for free! He even created a big download button so you do not have to copy and paste the codes in event that you miss out something when you are selecting those codes manually.

With great excitement and enthusiasm, you read the post word by word, hoping to find some hint on how you can use those valuable codes. Horrors of horrors, after reading the article from the first word to the last for the fifteenth time, you cannot find a single clue as to where and how you can use those codes in your WordPress Theme.

Fret not, let me, the big noob, help you, the even bigger noob.

How To Use The Customized Codes

Remember the 2 kinds of codes used in your WordPress Theme?

The first portion of the codes titled “The Markup” are the HTML codes. And where are all the HTML codes in your WordPress Theme? In the Templates of course. Now all you have to do is to create a new template to house the MarkUp you have downloaded.

Here is how to create a new template for your WordPress Theme.

Now comes the easy part. The CSS.

As the title suggest, these codes will decide what you have placed in your Template files appear when the page goes live. Naturally, these codes gets inserted into the Stylesheet or Style CSS file.

It is just a matter of copy and paste the codes in an empty area of the CSS file. Just after all your existing codes will be a perfect location.


I stick to one very simple rule of thumb when I play around with customized codes like these. I sincerely hope you follow my rule too, lest you go mad.

The Rule: If It Does Not Work, DUMP IT!

Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.

Divi WordPress Theme

728x90 V3