1K challenge – update #2

This is the second update on my 1K challenge that I started last month. You can read about it here. In my previous update, I listed out the tasks that I had completed so far. My site has been up and running for 2 weeks now(went live on 18th March 2016). So far I have 8 pages on my site and Google has so far indexed 7 pages as seen in the below image.

site google index

Google started indexing my site late, it started on 22nd even though my site was up on 18th. I have read earlier posts by different bloggers on how they got their site indexed as soon as they got live but it didn’t work for me.

Bing was better in indexing my site, it had already indexed my site the very next day itself but for some reason Bing has de-indexed my pages now. Only 2 pages has been indexed by Bing now. Even though I do not consider Bing as a great source of organic traffic(sorry Microsoft), but I still want to have it index all my pages. I will submit by sitemap once again to it.

Key highlights

  • I have been able to post frequently, in 2 weeks I have 8 posts on my site which is not bad. Out of these 8, 5 have been product review articles and 3 have been informative articles.
  • Made an infographic all by myself using Microsoft PowerPoint and used that as part of an informative article. The idea was to reach out to sites so that they can link to my infographic and get some backlinks.
  • Made $3 in Amazon affiliate sales. This is not something to get excited about as it was a one off random sales that just happened.

Key failures

  • Did not build any good backlinks. So far my backlinking effort has been by blog commenting in my niche. I haven’t seen any value do this. Google webmaster  or any other backlink checker doesn’t show any backlinks from any of the websites I left a comment on. Maybe those sites have not been indexed yet.
  • My infographic was a big failure. I reached out to 5 websites in my niche and requested them to link to my infographic. Only one responded back and they said that although the infographic was good, it didn’t match the content on their site and hence they cant link to it.
  • None of my keywords are ranking at this moment. My best ranks are 88, 39 and 128 at this time. All my other keywords are 250+ which means they are beyond the horizon. But knowing the fact that I do not have any good backlinks, this is expected.

What’s next?

Since my site is just  2 weeks old, I am going to give it some more time. In the meantime, I am going to be a little serious on my link building efforts.

To be honest, I am very lazy and hate any sort of tedious work and that is one of the reason I have not reached anywhere. For the moment, this is what I plan to do in this specific order,

  • Leave at least 100 comments on CommentLuv enabled blogs in my niche. I’m not sure if CommentLuv comments count as 2 or 1 link, for time being I’ll assume they are 1 link. So for the 100 comments that I leave, I expect 10% to be approved.
  • Add 2 more product review posts.
  • Keep tracking my links count and my ranking to see if there is any jump based on the links.
  • Do at least 2 guest posts on some relevant sites. The problem is, my selected niche doesn’t have very authoritative sites and average DA is 30. But I’ll try to reach out a couple of them and check if they allow guest posts.
  • Check my competitor’s backlinks and see if I can get some of their links.

Final thoughts

Well, my current status doesn’t look very encouraging but like I said it has just been 2 weeks and nothing to lose sleep over. I’m going to continue with my efforts and hope if I see an upward trend going forward.

I would like to hear if you have been doing something similiar and what has been your progress?

1K challenge – Update #1

This is the official update #1 for the 1K challenge which I started recently. If you do not know what the 1K challenge is, you can read about it here. I will try to do these updates every quarter but if I have achieved any significant I may post earlier as well. Without wasting any time, let us look into the progress

What have I done so far

I have completed the following points so far,

  • Picked a niche
  • Made a list of keywords for posts. I have only 10 keywords for now as I dont want to waste too much time looking out for keywords.
  • Registered a domain on 17th March 2016. The site was up and running on 18th March 2016.
  • Setup WordPress
  • Installed a free theme Awaken
  • Started posting content. I have 4 posts on the site now. All of these are review posts of Amazon products
  • Monetized links with the Amazon Affiliate program
  • Created a logo myself. It is not great but will do for the moment.
  • Customized the theme a little to improve the colour style
  • Installed plugins – WordPress SEO and JetPack
  • Installed Google analytics and setup site in Webmaster tools
  • Submitted a sitemap

Status of my site

I checked if my site was indexed by issuing site:<mysitename> So far Google has indexed only two pages and the Webmaster tools doesn’t show any indexed information. By the looks of it, maybe the Google bot didnt find my site very interesting as it hasn’t indexed all my pages yet.

I also set my categories to not get indexed as I believe this to be better for organic search results.

Link building for my site

I then started building some links for my site. I am just focussing on building links through blog commenting in my niche for the time being. The way I did this was to make a list of sites and blogs I can comment on. I went to Google and entered “my niche”+”add/post a comment” and that gave me a list of sites. I selected some 20 sites and started commenting on them. Now this doesnt guarantee that the comments will be accepted as they are awaiting moderation. I have posted on 8 blogs and hope that they get approved. I have been reading an excellent post on anchor text by Nathan Gotch and will highly recommend you read it too to learn how to use anchor texts.

It will take some for these comments(if they are approved) to get indexed and show as my link profile. Until then I will keep building some more backlinks using blog commenting. One strategy I followed here is that I gave a link to the post instead of the actual blog so that the page authority of the page can improve. Let see how this works.

What next?

I plan to make some kind of a useful post or an infographic which can be shareable. I will then try to reach out to people to request them to link to the asset. This should provide some good backlinks as well. But that is not my immediate target.

Currently my site is ranking at 7th position for one of my keyword in Bing and at 72nd position in Google. This ranking without any backlink so I only expect this to grow. What is surprising how bad is Bing’s search results compared to Google’s.

I plan to track my site’s position after about two weeks using Long Tail Pro’s rank checker feature, but it is very slow. If you know of a better tool, let me know in the comments section.

I need to improve my site’s theme & design as I want to seperate the reviews and general posts from each other as how it is on Tung’s site. I understand Tung is using a premium theme but I dont have that option yet so I will need to figure out a way to do that on my own.

I have 4 posts on my site as of now, I need to make it 10 by end of next week. I have multiple things on hand and with my regular 9 to 6 day job, it becomes difficult to keep the content coming but I plan to post at least one article per week.

Final words

So far my progress has been good and I plan to stick. It has been less than a week that I have started this project and I need to sick to my targets and deadlines. I would like to hear if you guys have started something similar and how has been your progress.

1K challenge – Building an authority site from scratch

A couple of months back, I accidentally landed on Spencer Haw’s blog and read about his niche site projects. The posts were very detailed and gave a very good idea on how we can build a niche site from scratch and he welcomed others to join him. These posts were from around January 2013. A lot has changed from then to now. Even thought the base idea sounded quite easy, I know how much work Spencer had put in to get his site up and start making profit.

My online journey to earn a passive income has been a complete failure so far. As you can read here, I have earned next to nothing in all these years. When I look around, I see bloggers as young as 12 years making money without breaking a sweat. Truly there is something that they are doing right which I’m failing to understand or maybe I’m not that smart.

So what is the 1K challenge and why start now?

After reading through Spencer’s posts and reading about a challenge at Tung Tran’s blog, I thought why not give it one more try? If not success, at least I will have the satisfaction that I tried. So I set about starting my own little authority site challenge for myself to achieve. My challenge pale’s in comparison to what Tung or Robin have set up for themselves. You see, neither do I have their experience, any prior experience or any online success to boost my morale. The only thing going for me is that I have nothing to lose by trying one more time. I have set myself some goal, and I’m going to monitor my progress against these goals and assess how I have been performing.

My plan of action for the 1K challenge

While my other colleagues mentioned above have set themselves some budget here to help them build these authority sites, I will not be spending any money apart from what I will need to buy a domain. To be honest, I do not want to start with a negative balance sheet and feel bad about the money lost if this project doesn’t turn out to be profitable. I will not be outsourcing any of the work and will be doing all of the work 100% myself. That will include setting up the site, customizing it, writing content, build links and anything in between.

This project will be an informational study for me as I have zero experience in anything related to SEO, social outreach and content creation. I will be doing all of these for the first time seriously and learning them along the way. The biggest road block faced by bloggers is that over time they lose momentum and quit unless they are passionate only about blogging. I on the other hand am here for earning a passive income.

Here is how I’m planning to start building my authority site,

  • Pick a niche
  • Make a list of keywords for posts
  • Register a domain
  • Setup WordPress
  • Setup a theme and necessary plugins
  • Start posting content
  • Monetize with Amazon Affiliate program
  • Create a logo
  • Link building (ongoing process)


My goal for this project

My long term goal for this project is to build a site which can earn 1K per month but my short time goal is to make a site which can earn me at least $100 per month. Now for some that may sound meagre, but to me that is going to be a big achievement. If you do not already know, I have been able to accumulate just a little over $50 in my AdSense account so getting a site up which can earn $100 every month is going to be a big deal. If I can hit that target, I am sure I will be a lot more motivated and set new targets for myself and stay focused.

So by end of September 2016, I expect to have my site making me $100 per month.

What can go wrong with this project?

A lot if you ask me. For starters,

  • I may lose interest like I have done countless time before.
  • The niche I have picked may not prove to be a profitable one.
  • I may not be able to build quality links, rank well for my keywords and drive any traffic to my site.

In any case, I will not be feeling bad about it even if I do not succeed, I will still learn something out of it.

Final words

If you are someone like me who have never had any real success making money online, I would ask you to join me along. There is nothing comforting that having someone on the journey. If you have had decent success building profitable niche sites, I would still request you to join me to help me focus on my site as well. Let the journey begin.

5 types of blog posts that you should be writing

Blogging is all about delivering fresh and good content. Your blogging routine may be daily, weekly or bi-weekly. Also, your post may always be of the same type. Whatever be your type or routine, you may soon run out of post ideas. This post is not about how to get ideas for your posts but more specifically on what are the different types of blog posts you can write.

Types of blog posts that you can write.

In this post, I will tell you about 5 types of blog posts that you can write. This helps you in diversifying the content on your blog and at the same time makes you think in different ways so that you are never out of ideas. For example, if you always write tips about blogging, how about writing a tutorial on something? Keep on reading to learn more.

Write a list

types of blog posts
Image courtesy of Stuart Miles / FreeDigitalPhotos.net
This type of post basically lists out information about a particular topic. A list can easily provide information which your readers can remember or absorb easily. Some readers may just look at the list topics and read the content only for those topics they find interesting. A list has to be on a particular theme or topic, like

5 ways to improve your blog
5 simple CSS tricks for Twenty Thirteen theme

As you can see from the above examples, the list type of posts are my favorite and I frequently post a list of 5 things.

Tutorials and How to

This type of post is highly sought after. A post which can teach your readers how to do something or provide information on a particular topic is always helpful. Most people on the internet look out for ways to solve problems that they are facing. By creating a post on how to exactly do that and helping them, you are establishing yourself as an authority and source of knowledge. Your readers will keep coming back to your blog provided you keep posting these types of blog posts. For example,

How to add a logo to the WordPress Twenty Thirteen theme?
How to add the Google +1 button to WordPress blog?

I love doing How to kind of posts on my blog. I get to share on how I solved a problem or implemented a feature on my blog.


Reviews are honest opinion about anything. Reviews need not be always paid. Often, you maybe using a particular service or tool for your blog and are very happy with its features. Why not write a review about it and share it with your readers. These reviews can help some of your readers decide whether to use a particular plugin or service for their blog as well. For example, I’m using HostGator(my affiliate link)for my hosting and NameCheap(my affiliate link) for my domain registration and am happy with their services.
types of blog posts
Image courtesy of Stuart Miles / FreeDigitalPhotos.net
Some blogs write paid reviews. These are reviews for which you can get paid. This is a source of earning income for the work that you do but if you want to do a paid review, remember to be honest or risk losing your reader’s trust.

Case studies

These types of posts are difficult to write but they can turn out to be very informative and epic in size as well. So what is this post type? In short and simple terms, a case study is an analysis of something. In other terms, you can publish a result of some experiment that you did, mentioning the issues you faced, the actions you took and the outcome you saw. For example, a post on How you increased your readers can make for an interesting and informative post. Readers would like to see what were the problems you were facing and how you solved them. Some of these can be applicable to them as well and they can learn from your experiences.

Milestones and goals

These types of blog posts are of personal nature, spcifically about you. They can be created when you have reached a particular milestone or achieved a goal in your personal or professional life. You can expand this type of post to highlight on what were the highlights in achieving this milestone, the time it took to reach it and what are your future plans. For example, a post on how you got your 100th subscriber. This is a significant milestone(atleast for me) and you can also add on what all did you do to get them. These types of blog posts also are motivational in nature and help your readers set goals and try to achieve them.

Your turn?

So what types of blog posts are you writing?
What is your favorite post type?

Please do share your comments with me in the comments section below.

If you liked what you read and want to stay up to date, please subscribe to my blog, either by RSS or the newsletter

5 ways to improve your blog

Managing a blog is a continuous effort. It is not only about content creation but other aspects like the design of the blog, accessibility, presentation

In this post, I will list out 5 ways to improve your blog. These are things I want to improve upon myself as well. I would like to hear from you if you have implemented them yourselves or if you think any of these are not as important as I think they are. Do leave me a comment below with your thoughts.

5 ways to improve your blog

Make use of images

An image is worth a thousand words. Now how many times have you heard this. I’ve heard and read this countless times but I still have failed to put this into action. My posts rarely have images. Partial reason for this is that I find it extremely difficult to find an appropriate image for my posts. But I’m trying to improve upon that? What about you? How do you source images for your posts?

Improve your blog load time

blog load time
Image courtesy of Stuart Miles / FreeDigitalPhotos.net

According to a New York Times post and Google engineers, impatient web users flee slow loading sites. Well, you do not necessarily have to be impatient to navigate away from a slow site. No one likes to wait for anything and your blog is no different. Your readers come to your blog to read your content. And you should ensure that they get it as soon as they arrive on your blog. For this, you should ensure that your blog loads quick enough. Now there is no fixed benchmark for an average load speed of a blog but as a user, you be the best judge and see if you have to wait long enough for your blog to load.

There are various tools for this but I like Google’s PageSpeed Insights. The desktop score of my blog is 76 which is not very bad. But I can still improve upon it. What is the PageSpeed score of your blog?

Add options to subscribe

Your readers may not have the time to check your blog daily. They may turn up at random occasions to find that there is no new content to read. This may deter them from coming back. This is where an option to subscribe comes in handy. You should provide a RSS subscription option to your readers. Even better is an email subscription to your newsletter.

Image courtesy of Salvatore Vuono / FreeDigitalPhotos.net

An RSS subscription gives you an update when a post is added or updated but an email subscription gives you more flexibility with respect to the time and content of the newsletter.

Do you have an email subscription offer on your blog?

Customize your blog design

Your blog is your personal asset in the blogosphere. It should have your unique mark on it. You may be using a premium theme on your blog but so could be the next blogger. The only way to make your blog’s design unique is to customize it. Many bloggers spend that extra effort to make their blog design stand out. If you are not comfortable with coding and do not want to tinker around with your theme’s code, you can hire a professional web designer who can customize your theme for you. If you are on a tight budget though, you can always look out for simple customizations that you can apply to your blog.

I have been customizing my blog step by step and sharing these techniques here. For those of you who may be wondering, I am using a customized child theme of the default WordPress Twenty Thirteen theme.

Don’t quit yet!

dont quit
Image courtesy of Stuart Miles / FreeDigitalPhotos.net

This is the last but one of the most important ways to improve your blog. Yes, by not giving upon it yet. Your blog will grow only when you give it your undivided attention and your effort to better it step by step. Every blogger goes through a phase where nothing works and quitting becomes that much more easier.That is when you should start your efforts afresh. Remember, success at blogging does not have a set benchmark. Some achieve it in months, some take years and some simply keep trying but success comes only to those who never stop trying.

Your turn

So what have been your ways to improve your blog? What has worked for you? Please do share your comments with me in the comments section below.

If you liked what you read and want to stay up to date, please subscribe to my blog, either by RSS or the newsletter.

How to add a line between posts in Twenty Thirteen theme?

Most blog designs show summary content on the home page. This is a good way of giving readers an option to browse through various posts. Most themes have a way of clearly outlining a post – either enclosing it in a box or having a line between the post. The WordPress default themes do not have such a feature. I am using the Twenty Thirteen theme and I wanted that effect on my blog. In this post, I will show you how to add a line between posts in Twenty Thirteen theme. Even though this technique applies to the Twenty Thirteen theme, it can very well be used for the other default WordPress themes like Twenty Ten, Twenty Eleven, Twenty Twelve and other WordPress themes as well.

Add a line between posts in Twenty Thirteen theme

The basic idea to implement this is to have a horizontal line between posts. The posts in the Twenty Thirteen theme as well as any other theme is enclosed within a <div> tag which has class as post. There are three ways in which we can add a line between posts,

  1. Add a <hr> tag after the post class <div>
  2. Add a bottom border to the post <div>
  3. Add a :after pseudo element

I do not encourage using the <hr> tag in this case even though it will simply suffice. It is better and advisable to use CSS border property instead.

Adding a bottom border to the post class will work but there will be one issue, the border will span the entire width of the page which is not desirable. This is because the post class does span the entire page but its content area is managed by padding it suitably but we cannot add padding to the border.

The most reliable solution here is to add another <div> and style it with a bottom border. For this, we will use a :after pseudo element. This ensures that we do not have to modify the content.php file, instead adding a style in your style.css file will suffice. As always, use a child theme instead of the parent theme to customize files.

Add the following lines in your style.css file,

.sidebar .post:after{
content : "";
padding: 5px 0;
border-bottom:1px dotted #00ff00;

That is it. You should now have a green dotted line between posts. Change the size, color and placement of the line to suit your blog design.

I hope you found this post useful. Please share it with others using the social media share buttons above.

5 simple CSS tricks for Twenty Thirteen theme

The default WordPress themes like Twenty Twelve, Twenty Thirteen and Twenty Fourteen are great to use out of the box but they can be further customized to improve their look and feel. In this post, I will show 5 simple CSS tricks for Twenty Thirteen theme that you can apply. Even though these themes are for the Twenty Thirteen theme, these can also be applied to other WordPress default themes without any modifications.

As suggested in my earlier posts, do not customize the parent theme files, instead use a child theme for your customizations.

Change background color or background image of your blog

White is the new white, yes that statement is correct. More and more blogs and sites on the internet have white as their background. Twenty Thirteen is no exception, but for those who need to add a dash of color or a background, you can do it very easily.

To specify a background image for your blog, first copy the image to the images folder in your child theme folder.

Then add the following lines in your style.css file.



Or if you want to specify a background color, add the following lines in your style.css fie



Remember this just changes the color or background of the content area. This includes post area and sidebar.

If you want to apply these changes to the footer as well, add the following lines to your footer.php file,


Change font of your blog

If you are not too impressed by the default font of Twenty Thirteen, then you can easily change it. Just add the following lines to your style.css file,

color: #000;
font-family: Impact, sans-serif;
font-weight: 300;
line-height: 1.625;

Specify your own color, font, size and line-height that suits your taste.

Change font and size of post titles

If you want to set a custom font and size for your post titles, you can do that easily. Just add the following line to your style.css file,

font-family: 'Arial', sans-serif;
font-weight: 500;
line-height: 1.2;
letter-spacing: 2px;
letter-spacing: 0.2rem;

Justifying blog posts

If you prefer having your blog content neatly justified instead of left aligned, you can easily do it. Just add the following lines to your styles.css file,

.entry-summary, .entry-content{

Add your copyright information in footer

By default, the Twenty Thirteen theme displays only the Proudly powered by WordPress declaration. Yes, our blogs are indeed powered by WordPress but we can definitely do without it :)

You can easily add your own copyright information and the year of your initiation. To add your own text, do the following,

Find and remove the following lines from the footer.php file,

<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>

Now add your own text, I added Copyright © 2014 1UpBlogger.com

Copy and paste the below text in footer.php and modify it accordingly to display your text.

Copyright &copy; <?php echo date('Y'); ?><a href="<?php echo esc_url( __( 'http://1upblogger.com/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( '1UpBlogger.com - Learning to blog for profit.', 'twentythirteen' ); ?>">&nbsp;1UpBlogger.com</a>

Your turn?

How many of these CSS tricks have you used?
What other tricks have you used on your blog?

Do let me know your inputs through the comments section.

Further reading

How to add a logo to the WordPress Twenty Thirteen theme?

How to add Google Custom Search Engine in WordPress Twenty Thirteen theme?

Out of the box, WordPress is a great CMS solution. It has a ton of features which are awesome but one of the feature that I really found lacking was the default search capability of WordPress. Not that it is non-functional, but it is not very accurate. It gave me results which were less relevant to my search query. There are plugins available which can provide great search capabilities. But like me if you do not want to use a plugin, there is the option of using Google search capability. We can easily replace the default WordPress search capability and instead add Google Custom Search Engine on your blog.

Add Google Custom Search Engine on WordPress blog

The easiest way to place Google Custom Search Engine on your blog is by creating a search engine unit in AdSense. If you do not have an AdSense account, you can use Google Custom Search Engine to create a search engine unit. In this tutorial, I will use an AdSense for Search unit and show how you can customize it to replace the default WordPress search box. I am modifying the Twenty Thirteen theme that is applied to my blog but you can as easily adapt it and customize the theme that you are using.

Copy the Google Custom Search Engine code and paste it in a file named searchform.php . If this file does not exist in your theme folder, create it. Do not modify or create the file in your main theme, use a child theme instead. Enclose the code inside a <div> tag. Save the file.

The code should look like below,

<form action="http://www.google.com" id="cse-search-box" target="_blank">
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxx:xxxxxxxxx" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Search" />

Note: Ensure that you have removed the JavaScript line at the end of the snippet. This line is used to add the Google watermark background to the search box. We do not want to use this. Instead, we will add our blog name as the watermark.

At this point, if you navigate to your site, the Google Custom Search Engine bar will be visible but it is not properly aligned to the right. Instead, it is floating just below the navigation menu like shown below,

Google Custom Search Engine bar

To align it to the right like the default WordPress search bar, add the class search-form to the outer div. This will style the search bar to align to the right nicely.

If you notice, the search box does not have a watermark text. To implement it, we need to add couple of JavaScript lines to the search text box. These lines will basically set the value of the box to Search 1UpBlogger… when it is blank else to the value that a user has entered. We also set the default value of the textbox to Search 1UpBlogger… when our blog loads. You can set it to the name of your blog. The code to add is in the

At this point, the final code should look like below,

 <div class="search-form">
<form action="http://www.google.com" id="cse-search-box" target="_blank">
    <input type="hidden" name="cx" value="partner-pub-5421783536796087:4691424035" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" value="Search 1UpBlogger&hellip;" onblur="if ('' === this.value) {this.value = 'Search 1UpBlogger&hellip;';}" onfocus="if ('Search 1UpBlogger&hellip;' === this.value) {this.value = '';}"/>
    <input type="submit" name="sa" value="Search" />

You can directly copy the entire code shown above and paste it in the searchform.php file and get it working.

If you navigate to your blog now, the search bar is nicely aligned to the right and the search box also has your watermark text in it.

I hope you found this post helpful. Please feel free to get in touch with me if you face any challenge in implementing the approach here, I will be more than happy to help you out.

Your turn?

  • Have you implement Google Custom Search Engine on your blog or are you still using the default WordPress search functionality?

Do share your inputs with me using the comments section below.

If you liked this post, please share it using the social media share buttons above.

How to display code in posts in WordPress?

If you have been following my posts, some of them are do it yourself tutorials on theme customizations. For these, I often paste code snippets to show how the code looks. This is also helpful for readers to directly copy the code and use it or compare it with their modifications. So far, I have been just using a <pre> tag block to display code in posts. I am averse to using a plugin to display code in posts even though there are some really nice plugins for these purpose. I then discovered Prism – a simple lightweight JavaScript based syntax highlighter to display code in posts. In this post, I will show how you can use Prism to display code in posts.

Display code in posts using Prism

Prism basically consists of two parts – a JavaScript file and a .css file. The .css file means that you can change the style if you are not happy with the style but I barely see the need for it. Prism comes with 6 styles out of the box, you can select the style that you want and the package will include that css file. Personally, I prefer the OKAIDIA theme. The core and the theme file are just around 9KB in size.

    • To get the Prism files, head over to the Prism download page. Select the Minified version if you want to save some more on file size. Select the theme you want and the languages you want to support. I just chose CSS and PHP.
    • Download both the CSS and the JavaScript file.
    • Upload the CSS and the JavaScript files to your child theme.
    • Create a new folder named CSS in your child theme folder and upload the .css file to this folder.
    • Similarly create a new folder named JS in your child theme folder and copy the .js file to this folder.Using a child theme and creating separate folders is the preferred way of isolating all your customizations from the parent theme.
    • Click on Appearance –> Editor.
    • Open the Header.php file.
    • Add the following two lines down in the header section after the <head> tag.

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/prism.js"></script>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/prism.css" rel="stylesheet" type="text/css">
  • Save the file.

Your modifications should look like as shown in the image below,

Display code in posts - Prism

Now in your posts, wrap your code snippets within <code></code> tags. Use a class specifier like language-css or language-php to highlight the code.

Your code should look like the following,

<code class="language-php">
... /* Your code here */ ...

See how the above code snippet has been nicely highlighted. If you want to add line numbers to the above code, you can achieve that by enclosing the tags inside <pre></pre> tags. Use the class specifier line-numbers which will add line numbers. Your code should look like the following,

<pre class="line-numbers">
<code class="language-php">
... /* Your code here */ ...

See how the code now has line numbers added to them. Though I personally do not prefer to have line numbers because the line numbers is also copied when the code is copied. The user has then to manually remove the line numbers which is cumbersome for large code snippets.

Your turn?

  • How do you display code in posts?
  • Do you use a plugin for this purpose? How is your experience?


Do share your inputs with me using the comments section below.

If you liked this post as much as I loved creating it, please do share it using the above social media share buttons.