Beginner’s Guide: How to change WordPress theme?

If you think it’s high time to change WordPress theme, on the exterior front, the entire process may turn out to be a harmless one. Truly, changing the theme can be so easy that not many people would have paid heed to the difficulties.

Moreover, these days, without the need of any manual FTP upload, changing a theme can be done right from the dashboard itself. So, it turns out to be safe, quick, and uncomplicated, isn’t it? Maybe, not! In reality, the ease of changing primarily depends upon how you have set up your website.

One of the major things about WordPress websites is that, over the period of time, it converts into a puzzle. Once you have your theme, activated plugins, small & major changes done; all of these factors comprise into a striking functional site.

And, that’s the reason why it’s essential to be cautious when you change the theme or even update the website, for that matter. If you rush into things and pull out the wrong fragments, your entire structure may collapse.

So, here’s how you can safely change your WordPress theme step-by-step.

Step 1: Select A New Theme:

If you haven’t decided upon anything yet, find a new alluring theme without further ado. If you wish to navigate through premium WordPress themes, a great place to find options is on Themeforest. Here, you can easily come across a variety of theme, comprising added features, color options, page builder compatibility, and much more.

On the other hand, if your budget doesn’t support a premium theme, you may also explore your free options in WordPress.org, which is a significantly enormous repository of WordPress and keeps adding new themes now and then.

Also, while selecting a new theme, there are certain factors that you must keep in mind. The list may include plugin compatibility, responsiveness, browser compatibility, prompt support, and more. Once you’ve found an adequate theme, it’s time to move on to the next step.

Step 2: Creating A Backup:

Before you change the theme, it’s recommended to take the complete backup of your website. If you’re new to it, you can either use a plugin to take the backup or do it manually. Regardless of the method you choose, both of them are quite easy, even if you’re a novice.

Backup with a plugin:

When you consider going on with this option, you’ll surely come across a variety of plugins. In the inventory, you can easily find both free and premium backup plugins that come with additional functionality and options. So, choose before you move. And then:

  • Download & install the plugin in your dashboard
  • Configure and customize the settings, however, required
  • Setup offsite backups
  • Complete your first backup
    And, you’re done.

Once you will completely change the theme, you can also schedule daily backups, to be on the safe side.

Manual Backup:

If you’re relatively new to this department, backing up the website manually may seem a complicated and overwhelming task. However, to your surprise, it’s quite straightforward. All you’d have to do is follow these steps to take the backup of your website manually:

  • Log into the web host control panel
  • Find FTP login information, or you can even create a new account
  • Login into your account and copy all the essential files from the directory
  • Visit the control panel and open phpMyAdmin
  • Select the correct database and export it
    And, your backup is done.

Step 3: Clone the Website:

Even before you decide to experiment with your live site, you must make sure that you’re professional enough to prevent undesirable problems. If not, it’s always recommended to clone your website, regardless of the task you wish to execute.

Now, when you’re ready to install WordPress theme, there would be two different methods to clone the site for testing. Either you can set up a local server or use a staging site that is available with a hosting plan.

Cloning to a Local Server:

This one is a great way to clone your site as the local server would be accessible even if you don’t have an internet connection. Similar to backing up, this method also gives you two different options; either use a plugin or do it manually.

Using a Plugin:

Based on the operating system of your desktop, you can choose a plugin, proficient enough to help you set up a local server. For this, you can:

  • Install local server WordPress & software, which you can choose from WAMP, XAMPP, MAMP, and more.
  • Once localhost is ready, install WordPress locally
  • Install and activate the plugin on the original website and export
  • Install and activate the plugin on the local hosted WordPress and import

 

Wait for a while, and the plugin will finish importing your website.

Manual Cloning:

If you wish to execute this process manually, you’d have to perform just a few extra steps:

  • Setup the localhost server and install WordPress locally
  • Copy & paste the backup copy of your site
  • Visit phpMyAdmin and import database
  • Locate precise database user and password information and create a new user in phpMyAdmin
  • Replace URLs by editing two fields of the database, site URL, and home. You can find these options under wp_options.

Cloning to a Staging Site:

There are several hosting companies, such as WPEngine and GoDaddy, that provide one-click staging when it comes to cloning the website. This one is a great option as you can always test your theme online on different devices, something which isn’t possible with the localhost setup.

So, to do this, follow these simple steps, and your work will be done:

  • Log into your WordPress dashboard
  • Click on the hosting menu item
  • Click on staging tab
  • Choose Copy site from LIVE to STAGING

And, that’s pretty much it.

Step 4: Testing & Troubleshooting WordPress Theme on the Clone Site:

This step would be as easy as logging into the dashboard of your staging or local website. You would have to install and activate the theme first. And then, there are certain steps that you might want to test when you change WordPress theme.

  • Enabling wp_debug:

This is one of the considerable ways to find out if there are any errors in your theme. To enable wp_debug, you’d have to visit the wp-config.php file and set up wp_debug to true, like:
define(‘WP_DEBUG’, true);

This will display all of the PHP notices and errors on the front end of the site. Although not every error would break your site, still, it’s advantageous to fix all of them.

  • Widgets:

It’s nothing but a good idea to have a look at widget options, footer columns, sidebar width, ad spots, and any other widget ready areas. This way, you’ll make sure that there aren’t going to be any surprising situations erupting later.

  • Post Formats:

There is a variety of themes that use custom fields. Thus, if you’ve been using one to define certain audio, video, gallery, or anything else, you may have to tweak the output of the post formats in the new theme. This can be easily executed through child theme so that you can use the old meta on the old posts.

  • Browser Console:

Next, you must open the browser to have a look at the JavaScript errors. If there is anything that isn’t working adequately, be it a drop-down menu, carousel, slider, or anything else, you can look into your browser console for errors. All you’d have to do is open the console and look for JavaScript errors. And then, hover over them to see the location of the error.

  • Checking SEO:

If you’ve been using SEO optimized WordPress themes, you might not be able to carry their inbuilt SEO features to the new theme. Therefore, if your new theme isn’t supporting any inbuilt SEO features, it’s recommended to install relevant plugins on the live site and fill out the void before you begin updating.

Step 5: Install and Activate your New WordPress Theme:

Now that the thorough testing of the WordPress theme is done, you’d have to log into your dashboard and install the same on the live site. However, before you activate the new theme, just conduct a quick check with the help of the Live Preview option, to be on the safe side.

You can use this option and check a few pages just to ensure that everything looks perfect. Also, before activating the new theme, you may also install a coming soon plugin. In this way, even if you’d wish to edit a few things after activating the new theme, your visitors won’t get to see what’s happening at your end.

Once you’re ready, navigate to Appearance and click on the Themes button. After that, click Activate, and your new theme will be live.

Final Words:

Someone who hasn’t experience the process to change WordPress theme, this may seem like an over-complicating method. However, it’s surely not. But, make sure that you’re taking enough cautiousness and being attentive while executing the entire process to prevent unnecessary troubles.

Enjoyed this post? Share it!

 
 

Why Above The Fold Optimization Matters?

Above The Fold Optimization

Since the early days of the internet marketing and website development, the mantra has remains quite the same – to keep every essential element, including CTA buttons, above the fold. Apparently, this specific section has become a valuable aspect of the website’s real estate. Hence, giving rise to above the fold optimization.

Apart from this, everything that falls below the fold gets lost in the no man’s land or the abyss of the no-scroll area. However, since the last decade, things have changed significantly. A majority of internet users know how to make the best out of a web browser.

On top of that, the availability of tablets and smartphones has persuaded an average user to scroll and swipe seamlessly and endlessly. According to the changing trends, even web designs have evolved enough to incorporate a variety of modern-day aspects, such as multi-device responsiveness, mobile optimization, and more.

This raises a vital question – does above the fold area still matter? Let’s find out in this post. However, before that, let’s understand a bit more about this term.

Origin of Above the Fold:

The business of a newspaper is liable for the origin of this term. Above the fold referred to the newspaper content that was printed before the fold. Whenever newspapers were displayed on newsstands, vivid imagery and catchy headlines that were published above the fold obtained more attention.

This convinced more and more people to buy newspapers. Gradually, newspaper publishers realized that publishing leading headlines above the fold helped them sell more papers.

Although the business tactics evolved and a majority of owners shifted their brands online, the term still maintains its existence with grace. As far as a website is concerned, above the fold simply means the section that appears on a device before you scroll the website. It’s important to keep in mind that the information showcased above the fold can vary based on the screen orientation and size.

Importance of Above the Fold:

In a website, the layout and placement of content hold utmost importance. This is because content that is published above the fold catches visitors’ attention the moment they land upon a website. This section is the primary real estate that gains most of the attention from visitors.

Considering high visibility, the content that you publish above the fold should be important enough to help you achieve your objectives. Also, it should be catchy enough to grab visitors’ attention instantly and should compel them to find out more instead of bouncing to another website.

Having said that, placing ads in this section of the website can enhance visibility and can also create more ad revenue in comparison with the ads published in the less popular area of the site.

Measuring Above the Fold Optimization:

In reality, it’s quite impossible to define an individual fold placement for your site. The perfect location of the fold may vary, owing to the different screen sizes, of both laptops and desktops, browser plugins, screen resolutions, and different sizes of tablets and phones.

While determining a typical fold placement, a majority of designers conclude that the fold line should be 600 pixels tall and 1000 pixels wide. Surely, it can be the best choice for common browser/monitor combination of 1024 x 786 pixels, with no toolbars installed at the top and maximized window browser.

Moreover, by tracking the website analytics, you can find out the most common screen dimension used by your visitors. Although 1024 x 768 has been the most common dimension traditionally, there are many that are gaining popularity with each passing day, such as 320 x 568 and more.

  • Considering for Mobile:

The accumulative usage of a myriad of mobile devices for internet browsing has further complicated the above the fold optimization process. As if a variety of screen sizes wasn’t enough to tangle up the procedure, the fact that most of the users even browser in landscape mode, which turns the traditional design of the page sideways, can create more hassles.

With people accessing websites across a variety of devices, the present web designing practices comprise making use of a responsive design that can help keep the layouts, style sheets, and images flexible.

When you use a responsive design, you wouldn’t have to keep any fixed layout for your web page. Not just that, but the content keeps reflowing, irrespective of the screen size. With responsive web pages, your website will be able to react to the environment in which it will be browsed.

Although the best practice is to publish important content on the top of the page, you may also consider designing your website in such a way that every aspect of it compels visitors to scroll so that they won’t miss anything available on the site.

  • Thoughts Concerning SEO:

Though it’s a good practice to publish ads above the fold area of the site to gain a maximum number of views, however, taking ads overboard can have certain negative impacts as well. Over the past few years, Google has come up with several algorithm updates, meant to penalize websites that put an excessive number of ads above the fold, resulting in essential content being pushed down.

If you place tons of ads at the top of your web page, know that this activity will not only provide bad user experience to your visitors but can also result in the decline of traffic. To prevent this problem, you can use SEO optimized WordPress templates to maintain a balance between user experience and maximized number of ad views.

  • Optimizing Ad & Content Placement:

Optimizing the placement of ads and content on a website is a periodic process that includes analyzing data, testing, and experimenting. While optimizing the layout, one of the primary starting points should be to have an idea of the analytics to comprehend the demographics and behavior of users.

This procedure should include analyzing a variety of data, such as screen sizes, browsers, device type, scroll depth, engagement rate, bounce rate, and more. With this analysis, you’ll get a set of standard metrics so as to how your visitors are interacting with your website.

Once you’re done with the initial website audit, then comes the time to move on to hypothesis generation and testing. To execute this task adequately, you can come up with certain ideas for ad and content placement, and use A/B testing to finalize the placement based on the layout preferred by most of your users during the test.

And then, by combining the analytics and A/B testing data, you can easily optimize your website to generate better revenue and high results.

Final Thoughts:

As it should be clear by now that the importance of above the fold design is important but complex. Keeping this in mind, you should be wary of such advice that talks about perfection. Certainly, users’ habits have transformed tremendously over the past decade.

In the past, because of slow internet speed and laboriously slow websites, it was a common practice for most of the internet users to avoid below the fold. However, today, with SEO optimized WordPress themes, quick loading sites, and super-fast internet connection, people don’t hesitate when it comes to scrolling the mouse.

This has led to the commencement of minimalist and elegant designs that use the entire real estate of the website to publish essential information. However, this doesn’t make above the fold strategy a thing of the past. So, even if you’re contemplating to use this strategy, make sure you are forming a balance between the subject and context. That’s the primary thing that can help you obtain success from your above the fold strategy.

Enjoyed this post? Share it!

 
 

How to Modify Your WordPress Theme Header and Footer

A typical web page has a header and footer area. These two sections are crucial because they hold key info about your website. Ordinarily, most visitors to a website will notice the header first before anything else and they can make judgments about the website based on their impression of the header. Needless to say, the header and footer sections deserve more attention when designing your pages.

The WordPress Theme Header and Footer

WordPress uses a simple templating system where all header content is contained in a piece of code stored in the header.php template file. Likewise, footer content is stored in the footer.php file. The code in these files is mostly plain HTML with bits of PHP code (template tags) that display the metadata dynamically.

The basic WordPress header has two parts: the topmost part is the meta-header part where you can insert meta-data tags for SEO purposes. It also contains links to the theme’s stylesheets. The lower part of the header contains all your branding info (company or website name, logo, and tagline).

The classic footer also has two main sections: the topmost section contains the sitemap, social buttons, privacy policy, legal disclaimers and other important info about your website while the lower part contains copyright info and the date. However, you can divide your footer into multiple columns rather than two horizontal rows.

Editing The Header

For the most part, you don’t have to touch code in the header.php file to edit the header. Most themes come with easy-to-use admin panels for customizing headers, footers, and other areas of a page. However, if you want a more custom look that your theme doesn’t offer, you might have to get your hands dirty and delve into the header code along with the CSS code in the stylesheet.

In this brief tutorial, I’ll show you how to insert a custom logo into the header of the TwentyThirteen theme.

The first step is to setup a child theme for the TwentyThirteen theme:

WordPress Theme Header and Footer page1

Copy and paste your theme’s header.php file into your child theme’s folder. This is what you’ll be editing rather than the main copy. However, you will not actually be doing any editing here. All changes will be done in the stylesheet.

Now if you analyze the header.php file, you will notice that the site title is contained in the h1 tag and displayed by the blog_info () template tag.

WordPress Theme Header and Footer page2

We’ll use a simple CSS trick to hide the site title text and instead display a logo. Open the style.css file in the child theme folder and paste this code there:

WordPress Theme Header and Footer page3

Change width and height to match the dimensions of your logo. And that’s it. You’ve just inserted a logo into the header of the TwentyThirteen theme:

WordPress Theme Header and Footer page4

Editing The Footer

Editing the footer requires either modifying the code in the footer.php file or making style changes in style.css or both. So in this brief tutorial, we’re going to remove the “Powered by WordPress” sentence in the bottom part of the footer and replace it with custom copyright info and the date.

Copy the footer.php file in the main theme folder and paste it into your child theme’s folder. Open it in a code editor.

Remove the line that starts with anchor tag a (line 19):

WordPress Theme Header and Footer page5

This is a hyperlink that takes you to the WordPress.org website when clicked on.

You should now have your website title displayed along with the year and copyright:

WordPress Theme Header and Footer page6

This is how you edit the header and footer of a WordPress theme. Remember, all edits should be done on child theme files; otherwise, you will lose all changes if the main theme is updated. If you only want to make layout changes, edit the style.css file only and leave the template files.

Changes only affect the theme whose files you’re editing. If you choose another theme, you’ll have to edit the respective header and footer template files.

Do you edit your theme files directly or do you use the theme’s admin panel? Which method is more powerful for you and why?

Are you interested in reading about the pros and cons of long scrolling web design? Click here.

 

 

Enjoyed this post? Share it!

 
 

Why Are Mobile Ads Important And How Can HeatMap Pro Help You

Ever since the smartphone revolution, people have been doing more stuff on their mobile phones rather than on computers.

Whosoever runs a website knows the importance of having a mobile friendly  site. Even Google favors mobile friendly sites and gives it priority if opened from a mobile web browser.

Now a days, mobile browsers have become so efficient that they are able to display as much information is there on the site when opened from a normal computer browser. These browsers store cookies, can save passwords and display ads. Yes, mobile browsers have started supporting ads on web pages. This is opened up a huge opportunity for many website owners to monetize their space.

In this blog, I will explain you about why having mobile ads are important for your business and how our theme – HeatMap AdAptive Pro can help you get ads on your website easily and in the most effective way.

Currently, there are four types of mobile ads that Google Ads supports:

  • Text ads
  • Image ads
  • App promotion ads
  • Call-only ads

Also there are certain banner sizes that are recommended:

  • Smart phone: 320×50, 300×250, 336×280 Interstitial
  • Tablet: 300×250, 728×90, 468×60, 336×280 Interstitial

So, now that you know the types and sizes of mobile ads in brief, lets move forward to why having mobile ads are important, if you have ads on the desktop version of your website.

As, you must know mobile now accounts for over 50% of traffic on the web and this figure is only going to increase in coming years. So, in order to tap into this huge opportunity you need to be ready now.

Our HeatMap AdAptive Pro WordPress theme is simply the best Google Adsense theme in the market. It follows all the Google Ads guidelines and hence you don’t have to worry about any penalties.

It also comes with the Click Missile Plugin which enhances its functionalities even further.

So, get HeatMap Pro today.

Want to know more about HeatMap Pro, click here for the complete features list.

Enjoyed this post? Share it!

 
 

HeatMap AdAptive Version 1.4.7 Released

With this release,

You will have a website homepage with SEO friendly features.

Set the Homepage SEO Title, Homepage SEO Description and Homepage SEO Keywords and you are all set for your SEO page rankings to go higher.

HeatMap HomePage SEO

To download the latest version, please login to your Member Area

If you face any problems, please write to us at [email protected]

Enjoyed this post? Share it!