Author: Aky

  • Create 404 Error page to decrease bounce rate on WordPress

    As we all know about 404 error page which is a error message from the server over a HTTP response from client side. I have seen many theme developers ignore 404 error page on wordpress, which I believe is a big mistake, as it increases bounce rate of website and reflects bad impression on visitor who landed in a deadlock situation.

    404-error-page
    404 Error Page Illustration

    Default 404 Error Page

    Many visitors type wrong URL and end up landing to default error page from server. You can see the default 404 error page design below in screenshot.

    default 404 error page from server
    Default Error Page Design

    How Bounce Rate Increases ?

    The above page is a dead end page where there is no navigation or any message to redirect to different link. In such a situation, visitor will either use Back button on browser or will type another URL in address bar. As mentioned above, default error page is displayed when there is no 404 error page code in wordpress theme, and now you can assume how you lost a visitor. Hence it increases the bounce rate, as a visitor just landed on your website and went away.

    Add 404.php in WordPress

    As we are familiar with wordpress themes, and most of them has 404.php page. But if somehow your theme folder doesn’t have 404 error page then you don’t have to worry. Follow the simple steps below to add 404 error page in wordpress:

    • Open any text editor, for instance Notepad.
    • Add below code snippet in the file.

    [php]

    <?php get_header(); ?>

    <div id="content">
    <h2>Sorry…</h2>
    <p>The page you are trying to reach is unavailable or does not exist.</p>
    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    [/php]

    • Save the file as “404.php” and move it, into the theme folder.

    Enhance 404 error page

    Now, we have added custom design error page in wordpress blog. Since it is a PHP file, we have extended capabilities to innovate and enhance 404 error code. We can add google adsense code in 404 page, so that you get paid atleast when visitor leaves your site. You can play with the custom error code in 404.php file by adding images and eye catchy quotes.

    In the end, I will just conclude that, every website should have custom 404 error page, so that visitor shouldn’t feel deprived. I hope this tutorial was easy, but if you have any query or any further assistance required then you post comment as your feedback.

  • Interesting Fact about SiteStats JetPack Plugin WordPress

    Almost every WordPress user is familiar with the JetPack Plugin by Automatic. JetPack WordPress plugin has been really innovative and has made things much easy for the bloggers.

    jetpack-new-update-thecreatology
    Install JetPack Plugin

    If you haven’t installed JetPack plugin up till now, then you are really missing the show. You can refer to my article on how to install jetpack plugin on WordPress blog and experience the power of WordPress jetpack plugin. On analyzing WordPress site stats, I found an interesting fact about Site Stats JetPack plugin, so I am sharing it with you.

    As we know about WordPress Site Stats plugin error and the problem was resolved by the JetPack plugin. New Site Stats plugin, has two types of representation for Site Stats. One is Bar Graph type and the other is Humanize Type. Bar Graph is a graphical representation of the site visits. Bar graph type can be tricky for users, who don’t even know what bar graph is. Respecting the fact, WordPress developed the Humanize type, as it explains the site stats value in a very humanly manner. Below is a screenshot of a WordPress site showing stats in Humanize Type. (Click to Zoom)

    interesting fact about site stats jetpack plugin wordpress
    Humanize Type Site Stats Presentation

    As you can see in above picture, how it says that “Today you have had 2 visits” and then how it explains the fact about number two (2) it says

    Two and three are the only two consecutive prime numbers. 2 is the first Sophie Germain prime, the first factorial prime, the first Lucas prime, …

    And WordPress jetpack plugin explains the facts for every number, like for number zero (0) it says

    The number 0 is the smallest non-negative integer. The natural number following 0 is 1 and no natural number precedes 0.”

    It though looks easy, but the concept behind is very innovative and thoughtful. I really appreciate WordPress Team behind the JetPack Humanize concept.

    Did you think over it ? Let us know, if you came across any more interesting facts about WordPress, and share with us. Don’t forget to share your views about this concept, by posting a comment below. I will be waiting. 🙂

  • Advertising Website Design using Thesis Theme on WordPress

    Advertisement Website has an amazing portfolio work, crafted for many other company brands. TheCreatology in partnership with our Project Manager Ms. Imie Belanger was contacted for the redesign of advertisement website using thesis theme. The package included customizing thesis theme, featured content slider and essential SEO settings.

    As mentioned above the company has portfolio work which they wanted to showcase on homepage. Mockup for the advertising website design was prepared and soon was approved by the client. In no time, website was redesigned as per the prototype and thereafter was published online. Few references like Ease with Thesis Design options, Scrolling Text in Header and Featured Content Slider for Thesis Theme made it look easy and the project was wrapped very soon.

    Below you can see a screenshot of the Advertising Website Design:

    toronto-advertising-website-design-thesis
    Advertising Website Design

    If you want something similar for your advertisement website design, you can either hire me or you can use the contact form below and I will get back to you asap!

  • Add featured content slider to showcase Portfolio Work in Thesis Theme

    In my recent work on advertising website design, client being a flyer designer had an amazing portfolio on automotive flyer design. In order to show portfolio work, client demanded for a presentation or a slide show of work on landing page. A featured content slider was added on the homepage using thesis theme. A screenshot below will clear you about the featured content slider.

    Featured content slider in Thesis Theme
    Featured Slider on Client Site

    Featured content slider uses JavaScript which takes your blog to next level along with SEO advantage. In this article, we will learn to add image slider in wordpress thesis theme. But before we proceed with this article I recommend you to safely upgrade thesis theme.

    Step 1: Add Content Slider Plugin in WordPress

    In order to add featured slider in wordpress we will have to install a plugin. Below is a simple procedure to add slider plugin:

    • Login to Dashboard Admin of WordPress site.
    • Navigate to Plugins > Add new Plugin.
    • Type “Content Slide Plugin” in search box and click on the submit button.
    • In the listed result, click Install Now link under WordPress Content Slide Plugin by Snilesh. (Refer to the screenshot below)
    Step1-Add Featured content slider in Thesis Theme
    Step 1: Install Plugin
    • Install the plugin by clicking on install link underneath it and further Activate it.

    Step 2: Configure Content Slider Settings

    On activating the plugin, a left pane menu item “Content Slide” is added. In order to customize content slider, we will have to configure its settings for width height and content. Below is a simple procedure to configure slider.

    • Navigate to Dashboard > Content Slide.
    • Content Slide options are divided into three sections General Settings, Effects & Animation Settings and Image Source Settings.
    • General Settings for content slider can be configured by referring the screenshot below:
    Step2-1-Configure Featured content slider in Thesis Theme
    Step 2: General Settings
    • Effect & Animation Settings can be configured by referring the screenshot below:
    Step2-2-Configure Featured content slider in Thesis Theme
    Step 2: Effect & Animation Settings
    • Image Source Settings can be configured by referring the screenshot below:
    Step2-3-Configure Featured content slider in Thesis Theme
    Step 2: Image Source Settings
    • Once you are done with the settings click the update button to save the configurations.

    Step 3: Show Featured Slider in Thesis Theme

    Now that we are done with the configuration of featured slider, we are left with to display slider on homepage template. Copy-paste the code snippet in the custom_functions.php, below:

    Make sure you take full backup of custom_functions.php file using FTP before modifying it.

    [php]
    //Author: AkyJoe
    //Email: akyjoe@gmail.com
    function content_slider() {
    if (is_home())
    { ?&gt;
    &lt;div id=&quot;slider&quot;&gt;&lt;?php if(function_exists(‘wp_content_slider’)) { wp_content_slider(); } ?&gt;
    &lt;/div&gt;
    &lt;?php }
    }
    add_action(‘thesis_hook_before_content’, ‘content_slider’);
    [/php]

    We are Done!

    Now, that we have added the code, you can refresh the website and see the slider in homepage. If you find the slider not adjusting the layout, you can repeat Step 2, above to change width, height and color settings for slider, till you are satisfied.

    We  come to the end of this tutorial to add featured content slider in thesis theme. If you have any query or further assistance is required, post comment below as your feedback.

  • Add Author Bio below single post in Thesis WordPress Theme

    With the increasing number of people writing articles on web, blogs are working hard to present them in best way. Being a blogger, I always get excited when I see my name published on web, for instance, a short bio explaining about you after each article you publish. By Blogs presenting its Author, I mean that a self-respect, delights a blogger and make them more enthusiastic towards their blogging. This is can be done, by adding an image of the author add adding a short bio about author, like you can see in the screenshot below.

    Author Bio example TheCreatology
    Author Bio on TheCreatology

    In this article we will learn to add author bio in Thesis Theme. As we all know about the DIY thesis theme and its SEO optimization and design customizations. Thesis being a simple wordpress theme, is incomplete with few options like  Author Bio, share buttons, etc. But since thesis theme does allows customization, so we will add author bio after post on wordpress blog. But before we proceed with this article I recommend you to safely upgrade thesis theme.

    Author BIO after post in Thesis

    As we are know that Thesis customization is done using thesis hooks which are overriding functions. To show author bio in single post, copy-paste the code snippet in the custom_functions.php.

    Make sure you take full backup of custom_functions.php file using FTP before modifying it.

    [php]
    //Author: AkyJoe
    //Email: akyjoe@gmail.com

    function add_author_bio() {
    if (is_single())
    { ?>
    <div class="postauthor">
    <?php echo get_avatar( get_the_author_id() , 120 ); ?>
    <h4>Article by <a href="<?php the_author_url(); ?>">
    <?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
    <p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong>  articles for us. <br/><br/><?php the_author_description(); ?></p>
    </div>
    <?php }
    }
    add_action(‘thesis_hook_after_post_box’, ‘add_author_bio’);

    [/php]

    • Now that we have added the author bio code, next we will have to style author bio by CSS code.
    • Navigate to Thesis > Custom File Editor, select custom.css file and copy paste the below code snippet very carefully in Custom.CSS file.

    [css]

    .postauthor {background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
    .postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
    .postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
    .postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }

    [/css]

    • Above code will style author bio for single post and you can change color of box background and font color accordingly in the above code to match the theme.
    • Now, that we have added the code, you can refresh the website and see the author bio after post detailed page.

    I’m sure by adding author bio in single post, will increase blog rating and a check plus to boost your author’s enthusiasm. Do let us know the after effects of adding Author Bio in your blog, by a simple feedback.

    If you have any query or further assistance is required, then you can post comment below.

  • How to add facebook like button on post page in Thesis Theme ?

    I have already mentioned about facebook like button for wordpress and in this article we will learn to add like button in thesis theme.

    thesis-theme-facebook-like-button
    Get Thesis Theme Now

    As we all know about Thesis Theme and its content management as well SEO capabilities. Though it is a simple wordpress theme allowing endless customization for wordpress blog. If you don’t have a copy of Thesis Theme then you can download thesis theme here.  If you are using an old version of Thesis Theme then I recommend you to safely upgrade thesis theme.

    Add Facebook Like button in Single post

    As we all know that Thesis customization is done using thesis hooks which are overriding functions. To show like button in single post, copy-paste the code snippet in the custom_functions.php.

    Make sure you take full backup of custom_functions.php file using FTP before modifying it.

    [php]

    function joe_adds_like_btn ()  {
    if (is_single()) { ?>
    <div style="float:right; margin:0 10px;">
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID));?>&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:90px; height:25px;"></iframe>
    </div>
    <?php
    }}
    add_action(‘thesis_hook_before_headline’,’joe_adds_like_btn’);

    [/php]

    Save the custom_functions.php file, once you are done adding the above code. Now upload the edited file on server using ftp client and when you will refresh website, you will find something like in screenshot below.

    add-facebook-like-button-in-single-post-thesis-theme
    Facebook Like button on Single Post

    As we have added facebook like button in thesis theme, we come to the end of this article. If you have any queries then you can post comment below as your feedback.

  • How to increase upload media file size limit in WordPress

    Are you unable to upload media file in wordpress ? Well, you don’t have to worry about this common limitation set by wordpress. Usually, upload file size error occur when we try to upload a heavy file like a video, or a PDF file, or any other media, exceeding the upload file limit. WordPress throws an exception saying “This file exceeds the maximum upload size for this site”, a similar can be seen in screenshot below.

    Error increase upload media file size limit in WordPress
    Error Media file size exceeds limit

    For different web hosting like hostgator or bluehost , WordPress sets different upload file size limit depending upon the PHP configuration on server. For instance, hostgator sets the default limit to 64MB. But there are many more web hosting, which set default limit to only 2MB. In this article we will learn to increase upload media file size limit in wordpress.

    How to increase file upload limit in wordpress?

    • Login to CPanel of your website hosting, for instance hostgator or bluehost etc…
    • Navigate to /public_html/wp-admin using the file manager.
    • In the wp-admin directory look for php.ini file and if found then right-click to edit php.ini file in text editor. But if not found, then create a new file and name it as “php.ini” and then open it in the code editor.
    Edit increase upload media file size limit in WordPress
    Edit Php.ini File
    • When you click the edit button, as in the screenshot above, it will open the php.ini file in text editor. If you have just created new a file php.ini file, then simply copy-paste the below code and save it.

    [php]

    upload_max_filesize = 32M
    post_max_size = 32M

    [/php]

    • But if you have edited the already existing php.ini file then, search for “upload_max_filesize” line and change the numeric value to 32M, or as desired, 64M, 128M etc…
    • Click save button and close the file.
    • Now login to WordPress Admin panel and navigate to Media > Add new media.
    • Now you will notice the maximum upload file size has been increased to the value we just set in the php.ini file, just like in the screenshot below.
    Increase upload media file size limit in WordPress
    Upload Media Size Increased
    • Now you can upload your media with file size up to 32MB, but if you want to increase the limit then you again edit php.ini file and change its desired value.

    I hope this tutorial was not that complex as it seemed initially, but all’s well, that ends well. If you have any query or any further assistance required, then you can post comments as your feedback.

  • WP Stats not working on WordPress Blog says not authorized to view the stats

    A recent update from the Automatic company which runs WordPress is innovating its cloud architecture day by day. Today, when I logged in my Dashboard, I found that my WordPress Stats not working, as it said “Your WordPress.com account, akyjoe is not authorized to view the stats of this blog.”

    WordPress Stats not working error
    WP Stats error on Blog

    I logged in my WordPress account to check my WordPress API key, but everything seemed to be fine. Then I looked up on web and found couple of announcements from the WordPress regarding WP Stats plugin issue. In this article we will learn to fix wp stats problem on wordpress blog.

    How to fix WP Stats issue ?

    Since WordPress Stats plugin has been updated with the launch of latest plugin by Automatic, is JetPack. So, in order to fix wp-stats plugin, refer to the article to install jetpack plugin for wordpress.

    After you install jetpack plugin for wordpress, you will see the a message saying that “Jetpack contains the most recent version of the WordPress.com Stats plugin. The old version has been deactivated and can be removed from your site.” You can refer to the screenshot below.

    WordPress jectpack plugin installation
    JetPack Plugin Welcome Message!

    Now once the plugin is installed you will notice that the old wordpress stats plugin will be deactivated and the stats will be replaced by the new wp stats by jetpack, as you can see the screenshot below.

    New-wp-stats-jetpack-plugin
    New WpStats by JetPack

    When I fixed this issue and I found that the latest version of stats is more precise and it gives more detailed reports about the site visits and hits. I hope this tutorial will fix problem of wp stats easily.

    If you have any query or need any further assistance, you send us feedback by posting a comment below.

  • How to install JetPack on WordPress blog ?

    JetPack plugin is latest by Automatic which improve wordpress blog performance. Jetpack plugin comes with lots of feature like site stats, twitter widget, gravtar hovercard, sharedaddy and many more. WordPress is trying to cover the market, and making blogger to minify third party plugins dependency. I really admire this thought and I don’t depend on third party plugins, as you never know when they make you land in deadlock situations.

    jetpack-new-update-thecreatology
    JetPack Plugin for WordPress

    In this tutorial, we will learn to install jetpack plugin on wordpress blog. Below is a 3-step  procedure which will help you achieve the objective.

    Step 1: Install JetPack Plugin on WordPress

    • In order install jetpack plugin, login to your dashboard admin of wordpress.
    • Navigate to Dashboard > Plugins > Add New Plugin.
    • Type “jetpack” in the search box and press search button. Refer to the screenshot below.
    step1- searchl-jetpack-plugin-on-wordpress
    Search for JetPlugin
    • As the search results get listed, Click on Install Now button which says “JetPack by wordpress.com”. Refer to the screenshot below.
    step2- install-jetpack-plugin-on-wordpress
    Install JetPack Plugin
    • Once installed, click on activate button and we are done with the installation of JetPack Plugin. Proceed to next step to authorize jetpack plugin.

    Step 2: Authorize JetPack with WordPress.com

    Since JetPack is a wordpress.com plugin, it needs authorization. Make sure you login to your wordpress.com account before you proceed further. If you don’t have one, then you will require to create one.

    • On activating the jetpack plugin you will notice a message above the list of plugin saying “Connect to WordPress.com”, just like the screenshot below.
    step3- authorize-jetpack-plugin-on-wordpress
    Connect to WordPress.com
    • Click on green button to authorize it and you will be asked to authorize it in next screen similar to one below:
    step3-1 authorize-jetpack-plugin-on-wordpress
    Authorize JetPack Plugin
    • Click on the Authorize JetPack button, in order to connect with wordpress.com
    • Once don, you will be redirected to JetPack Dashboard, where you can configure jetpack plugin.

    Step 3: JetPack Plugin Dashboard

    JetPack has its own admin panel which allows you to configure various options like site stats, twitter widget etc. You can refer to the screenshot below which shows jetpack admin panel.

    step4 configure-jetpack-plugin-on-wordpress
    JetPack Dashboard

    We are done!

    We are done with the installation of jetpack plugin and you can now play around with its features and I will come up with more articles soon, to configure jetpack plugin. Do let us know, how did you find the jetpack plugin, by posting a comment below.

  • How to add scrolling text in header to increase blog hits ?

    Moving Objects and animating text looks fascinating on a website and it increases number of hits on website. You must of seen websites with moving text in header, which contains latest news, or product offers, or some alert etc. In my recent project, a client just demanded to add text scrolling in header, just like you can see in the screenshot below:

    horizontal text scrolling in header
    Screenshot showing Text Scrolling

    Few days back I wrote about How to add alert bar to grab reader attention in Thesis Theme which grabs visitor attention and increase clicks on blog. In this article we will learn to scrolling text in header, which I believe is another way to increase hit on website.

    How to add Scrolling Text in Blog ?

    We are using a simple and smart concept here and the analogy behind is by registering scroll text widget in wordpress and further displaying it  by function call in the header. You can follow the procedure below to add scrolling text in wordpress:

    • Login to Dashboard Admin of WordPress blog.
    • Navigate to Appearance > Editor and select functions.php of your WordPress Blog Theme.
    • Now scroll to the end of the file and add the following code in it.

    Make sure you take full backup of functions.php file using FTP before modifying it.

    [php]

    //Author: Aky Joe
    //Email: akyjoe@thecreatology.com

    function joe_scroll_text() { ?>
    <div class="text-flash">
    <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" >
    <?php if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘ScrollText’) ) { ?>

    <?php } ?>
    </marquee>
    </div>
    <?php }
    register_sidebar(array(‘name’=>’ScrollText’, ‘before_title’=>”, ‘after_title’=>”));

    [/php]

    • Once done adding the code in file, click on the update button to save the file. Since we added the function now, now in order to display the scrolling text, we will have to make a function call.
    • Navigate to Appearance > Editor and select header.php and add the below code snippet where you want to display scrolling text.

    Make sure you take full backup of header.php file using FTP before modifying it.

    [php]

    <?php
    //Function call to display Scroll Text
    joe_scroll_text();
    ?>

    [/php]

    • After adding the above code, you see text scrolling in header by, it looks broken. We will have to add stylesheet code.
    • Navigate to Appearance > Editor, select style.css file and copy paste the below code snippet.

    [css]

    .text-flash {
    width:188px;
    height:32px;
    background:#fff;
    float:right;
    margin:30px 20px 20px;
    font-size: 15px;
    color:#bc2b21;
    padding: 2px 5px;
    line-height: 30px;
    border: 1px solid #eee;
    font-family: Arial;
    list-style: none outside none;
    }

    [/css]

    • Above code will style scrolling text for background color and text color. As installation is done, now we have to display some text and see how it goes live on the website.
    • Navigate to Appearance > Widgets and you will see ScrollText slot in right pane.
    • Now drag a “Text Widget” to the newly created slot ScrollText. Add some  text in widget and save it (Make sure you don’t add the title).
    • Once done, refresh the website and see the effect. It will look similar to the screenshot below:
    Add Scrolling text in header
    Demo: Scrolling Text in Header

    The scrolling text uses an old school html code “marquee” which scrolls from left to right and vice-versa. Using this tutorial, you will be able move dynamic texts of blog like latest post, news and offers with ease. If you are you using scroll text for your blog then you can share with us here by leaving a comment below.