How to Resolve Common WordPress Security Risks

No matter how you parse it, the most popular content management system (CMS) available today can be found at WordPress.org. It powers 30% of all websites, comprising 60% of the total CMS market. Many people consider WordPress a blogging platform, but its flexibility and level of function are why it is used for eCommerce, SMBs, and by Fortune 500 companies like Forbes and Sony Music.

What makes WordPress so popular?

On its face, WordPress allows anyone to create a beautiful, functional website and have it up and running within hours with little or no technical knowledge. It’s the built-in features, level of support, and open source availability that makes this possible. WordPress is also easy to customize, includes plenty of analytical tools, and makes SEO a snap.

But, the popularity of WP goes deeper than that:

  • It’s free. You’ll have to pay for hosting and your domain name, but everything else is on the house.
  • Open source themes and plugins. You can use them off the shelf or add your own custom coding.
  • It’s easy to manage. Everything can be updated with a click from a single dashboard.
  • Security is built-in. They use Sucuri to protect against malware and brute force attacks. You can also add your own security measures.
  • It’s compatible with a range of media types. The built-in media uploader supports audio, video, and images, and it makes integration with embed-enabled platforms like InstaGram and YouTube effortless.

Unfortunately, a few of the things that make WordPress a popular, flexible CMS are also the source of some common security issues.

What are these issues, and how can you resolve them with a minimum of stress and hassle?

Top 5 WP Security Problems and Their Solutions

The ability to optimize WordPress makes it user-friendly for novices while allowing professionals at all levels to customize every facet of their website. The first step to resolving security issues is knowing what they are; the rest is a matter of upkeep.

Brute Force Attacks

The problem: Called “brute force” due to the nature of approach, these are the most blatant attempts at penetrating WP websites. Such an attack involves repeatedly entering a variety of username and password combinations until the hackers hits the correct one. Even if all attempts are unsuccessful, this method of attack can overload the system. This can cause issues with your hosting service and lead to account suspensions. If they’re successful, the hacker can change your password and things get worse from there.

The solution: WordPress doesn’t put a limit on login attempts by default, but you can fix this situation yourself by choosing strong passwords and using two-factor authentication. There is also software available to prevent such attacks and WP plugins that allow you to limit login attempts.

SQL Injections

The problem: The WordPress web platform uses the MySQL database management system to operate. An SQL injection attack is conducted by inserting code into your website, often through the login mechanism. The hacker simply inserts a statement into the username and password fields that allows access to your website.

For example: User Name: “or” “=” Password: “or” “=” would result in a valid SQL statement like [SELECT * FROM Users WHERE Name =”” or “”=”” AND Pass =”” or “”=””] that would give them access to all usernames and passwords in the database. Such a hack can be performed as a single command line or in batches of two or more lines of code.

The solution: Coders can prevent SQL injections by setting parameters marked by an “@” symbol in the code. For example,

[txtUserId = getRequestString(“UserId”);

txtSQL = “SELECT * FROM Users WHERE UserId = @0”;

db.Execute(txtSQL,txtUserId);].

Non-techs should make sure that they choose a hosting service that includes a WP firewall and supports MySQL.

File Inclusion Exploits

The problem: This sort of attack searches for and exploits PHP code vulnerabilities, which is the source code that runs your website, plugins, and themes. Once a vulnerable bit of code is discovered, the hacker simply alters it to gain access to your databases.

The solution: Maintenance is the key to avoiding this problem.

  • Make sure to update your WP website frequently so that you have the latest in place.
  • Obtain plugins and themes from a reputable source
  • Remove old, unused, and obsolete plugins and themes

Malware Infiltration

The problem: Malware is a malicious code or program that infects your files. The source can usually be traced to a newly created or altered file, often inserted through a link attached to an email.

The solution: The best defense against malware is to install comprehensive anti-malware and update it frequently. For those that slip through your defenses, the solution is to identify and remove the problem code by:

  • Manually deleting it,
  • Installing a new version of WordPress, or
  • Restoring your WordPress website to an earlier version before it was infected.

Cross-Site Scripting (XSS)

The problem: This bit of trickery accounts for 84% of all internet security problems. It’s also the number one vulnerability among WP plugins. The attack is initiated on the user side, and site administrators may not even know their visitors are being redirected until they notice a loss of revenue or related issue with web traffic. It involves inserting alternate code into a vulnerable section in order to gain access to user data. The most common interface is web forms.

The solution: This can be avoided several ways. First, make sure to back up all data and run WP and plugin updates as soon as they’re available. Use only reputable plugins from a reliable source that has legitimate contact information and support, and delete any unused or outdated plugins.

Performance and Security: Choosing the Right Platform for Your WP Website

what is web hosting

You can minimize risk using the suggestions outlined above, but the wrong hosting platform can still lead to problems. It’s tempting to find the cheapest route, but you’ll find that you get what you pay for. Free may be okay for a personal blog, but the dangers of choosing free web hosting platforms for online businesses are many.

They include:

  • Limited bandwidth, storage, and features
  • Lax or outdated security
  • Limits on using your own domain name
  • Third-party affiliate links and banner ads
  • No guarantees on uptime
  • Slow page loads, high lag times

The best WordPress Hosting service is one that offers enhanced security, scalability, and privacy. At minimum, your hosting service should meet the following criteria:

  • Automated backup systems
  • 24/7/365 customer support
  • High levels of uptime and low incident history
  • Technical scalability
  • Exemplary reputation and longevity
  • Security
  • One-click WP installation
  • Website transfer feature

The Bottom Line

Security issues with WordPress are mainly a matter of diligent housekeeping. The benefits of using this CMS far outweigh any potential problems. An audience of more than 400 million people can’t be wrong.

Read More
March 6, 2019 0 Comments

Rich Snippets: The Ultimate Guide to Google Structured data (Manual & Plugin methods)

Do you really want to increase the click through rate (CTR) of your site results in Google SERPs? How does Google Structured data help to get started with your business especially the SEO and CRO part? If yes, here is all you should know and learn how to use Rich snippets.

Wondering how your competitor got those fancy stars in Google listing and you are desperately searching “how to get stars in Google search results” or “how to add star rating in google search”? It all ends up with a more fancy term called “Rich Snippets” (labeled by Google). But the other, the more technical name for it is “Structured data”.

What is Structured Data?

Structured data is a standardized code format that helps a search engine to understand a web page. It lets the search engine to crawl your site easily by classifying the page content. It is quite obvious that what seems useful to you, could be meaningless for a web crawler. Here, the Google structured data comes into play. A search engine uses the Google structured data to generate the rich snippet of the web page. This appears in search results.

Basically, the structured data is some additional information along with meta description and page content. It provides the search engines, contextual data about your website. For example, it helps search engines to grasp the business basics. Such as name, address, place as well as some complex information like events, articles, products etc.

Importance of Google Structured Data

The Google structured data is the most important part of web content. It helps users to predict the value of a site before visiting it, through a glance. This data is displayed in SERP. You can display important data regarding your website with it. So, it creates good results for search engines and increases chances of more users visiting your site than your competitor. Since the user intent is natural and tends to click visually appealing and informative content. For example

rich snippets

Secondly, it is great for Search Engine Optimization. This is what a search engine takes into account for better ranking. You can actually talk to the search engine via structured data. It makes easier for the search engines to grasp what your site is about and what your web pages contain. In short, you can feed Search engines with the crucial data you want to be shown in search results in a beautiful manner.

So in general, the benefits of Google structured data are as follows

  • A better understanding of content for Search Engines.
  • Representation of crucial data visually.
  • Increase CTR (Click Through Rate).
  • Overall SEO benefits.

Structured Data Markup Formats

Schema.org has various methods to represent Structured data. To tell your information to GoogleBot in a machine-readable form, Google has specified three types of structured data markup formats. These are as follows

JSON-LD

JSON-LD stands for JavaScript Object Notation for Linked Data. It is a data-linking format for encoding data in the script tag. It runs in the backend. JSON-LD is a lightweight, more simple and faster method of markup by schema.org. It is easily read and write by humans and easily parsed by machines.

Microdata

Microdata is a form of semantic markup. It uses HTML and CSS to style the elements on a page. It is easy to use but embeds the microdata tags in the body of the page. So, it is little messy as compared to JSON-LD.

RDFa

Resource Description Framework in Attributes (RDFa) is a W3C standard. It is a way of publishing linked data in HTML5 and HTML-like languages. Also, it can work well with XML, SVG, HTML4 documents too. It is a popular web document format.

How to Create Rich Snippets for Google SERPs

As told earlier, a rich snippet is a term used by Google for structured data markups. Basically, it is the information that gets displayed in SERPs in response to the Structured data. So, you should only add the information that is going to be visible to the user. While creating a rich snippet, the type of content plays a great role. A user can use many different types of content. Google categorizes content into following types

  • Articles
  • Books
  • courses
  • Events
  • Datasets
  • Fact check
  • Local Businesses
  • Job Postings
  • Paywalled content
  • Podcasts
  • Reviews
  • Recipes
  • TV and movies
  • Videos

Rich Snippet Content Type Properties

There are some specific properties associated with each content type. These should be specified while generating a rich snippet. You can get details of every content type properties from Google Guide. Here, I exemplify the whole process of implementing the structured data for articles content type. The same thing can be applied to any other content type.

1. Article Object

Enhanced features of an article can be shown in a rich result list, or in a carousel of similar non-AMP pages. It can include headline or image properties. For example- in a news article headline & image will be shown as follows

rich snippets

2. Schema.org Article Objects

Basically, the schema.org has mentioned three main types of a non-video article object.

These are as follows:

  • News Article

The schema marks up a content as a news article if it provides news or background context for news.

  • Article

A piece of investigation or article covered in any newspaper or magazine will be marked up as an article.

  • Blog Posting

Any blog post can be marked up as Blog Posting.

Properties of an Article content type Structured Data

There are some common properties of all the article objects. These are necessary for describing the Google structured data of an article. You can follow the below table for the details on different properties:

Property Description
mainEntityOfPage The primary entity described in some page. Usually, it’s the URL of the article page. Used for the main article on the article page.
Headline Headlinet should not exceed 110 characters.
image Url of the marked-up image of an article. For best results provide a high-resolution image. It should be at least 696 pixels wide.
publisher Publisher of the article
publisher.name Name of the publisher
publisher.logo Logo of the publisher
publisher.logo.url Url of the logo
publisher.logo.height Height of the logo in pixels only
publisher.logo.width Width of the logo in pixels only
datePublished First publishing date & time according to ISO 8601 format
dateModified Most recent date & time of article
author Author of the article
author.name Name of the author
description Brief description of the article

How to Add Rich Snippets (Structured Data) to a Website

Whenever the term “coding” comes, it is considered to be tough. But it’s really simple to implement Google microdata for an article on your site. There are two structured data markup methods for an article:

  • JSON-LD

JSON-LD is a Google structured data markup from schema.org. It is just a way to write code. In JSON format, you can use this script for a news article:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
},
"headline": "Article headline",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "https://google.com/logo.jpg"
}
},
"description": "A most wonderful article"
}
</script>

 

  • Microdata

In Google microdata markup, you will make a class with meta as follows:

<div itemscope itemtype="http://schema.org/NewsArticle">
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
<h2 itemprop="headline">Article headline</h2>
<h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
By <span itemprop="name">John Doe</span>
</h3>
<span itemprop="description">A most wonderful article</span>
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="https://google.com/thumbnail1.jpg"/>
<meta itemprop="url" content="https://google.com/thumbnail1.jpg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="800">
</div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="https://google.com/logo.jpg"/>
<meta itemprop="url" content="https://google.com/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
<meta itemprop="name" content="Google">
</div>
<meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
<meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

 

  • Structured Data Markup Helper

Some of our readers could be just beginners or new to coding. They can find the process of Structured data markup really cumbersome. To solve this problem, Google provides a free tool known as Structured Data Markup Helper. It is really simple to use. You just have to specify the content type for your webpage/post, Page URL and tags and Done! You will get the corresponding HTML code to implement Rich snippet. For the step-by-step manual, you can read this article from Neil Patel.

After you have structured data code with you, simply add it to HTML code of the page. For CMSes it depends on the file where the HTML of your theme is coming from. It could either be header.php or any other file in the theme folder. Here I’m explaining this step in detail for WordPress websites.

How to Add Rich Snippets to WordPress Website

  •  Manual Method

WordPress websites have specific themes and depending on the theme author, the file to which the structured data markup code is to be added, may vary accordingly but most of the time it’s the content.php file. Add the below code at the end of your file:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
},
"headline": "<?php the_title(); ?>",
"image": "<?php the_post_thumbnail_url(); ?>",
"datePublished": "<?php echo get_the_date(); ?>",
"dateModified": "<?php echo get_the_modified_date(); ?>",
"author": {
"@type": "Person",
"name": "<?php echo get_the_author(); ?>"
},
"publisher": {
"@type": "Organization",
"name": "MyOrganization",
"logo": {
"@type": "ImageObject",
"url": "https://MyOrganization.com/logo.jpg"
}
},
"description": "<?php echo wp_strip_all_tags(the_excerpt()); ?>"
}
</script>

A WordPress theme designed using TemplateToaster already has this code implemented in them. So you just need to get started with designing your theme and see the beautiful rich snippets in SERPs.

Best Drag and Drop Interface to Design Stunning WordPress Themes

  • Using Plugins

Till now, you have seen that a rich snippet is added to your site manually. But, some plugins are also available in WordPress repository. These plugins will create the rich snippets of all the pages/posts of your site. All the main content types like articles, products, recipes, reviews, videos, music, events are supported. It is simple to use these plugins but gives many advantages. Like it reduces bounce rates, enhances SERP rankings, provides social shares etc.
So, you can easily add a rich snippet to your website through the plugin. I am going to showcase this process by using one of the best rich snippet WordPress plugins.

 

All In One Schema Rich Snippets

This plugin creates a short summary of your page/post on search engine result pages. It works well for almost all content types. It is a popular rich snippet WordPress plugin with 4.3 rating. It has more than 70,000 active installs.

Working

Log into your WordPress Dashboard. Navigate to Plugins → Add Plugins. From here, install the plugin.

rich snippets

Once installed, Activate it.

rich snippets

Now, in the dashboard, you will see a Rich Snippet option. When you click it, a new window open showing all the supported content types.

rich snippets

From Configuration option, you can make settings for every content type. For example, if you select Item Review, you have to fill details about Rich snippet Title, reviewer, date etc. as shown below. Then, you can press Update to save changes.

rich snippets

Similarly, you will specify following fields for Recipe and Update it.

rich snippets

You will repeat the same process for filling details about each content type and Update it. If your posts are news, blog posting, article type; you can make settings for Article and likewise.

rich snippets

Once done with settings, you will go to your post page. Here, you will see an option named Configure Rich Snippet. You will select relevant content type so that the related fields can be picked to add a Rich snippet to your WordPress site.

rich snippets

Your work is done.

Testing Your Google Structured Data

Once you have successfully added the Google rich snippet to your web page, you can test it for errors. There are two basic tools provided by Google for free to check your structured data.

Structured Data Testing Tool is the easiest way to check your website for any errors or warnings. Here, you can specify the URL of the website or content object you want to check. Even, you can paste the code you added in the web page for implementing structured data.

rich snippets

Once you entered the URL, press RUN TEST. It will show the repost as follows

Digital Marketing Strategy

It will show the total entities checked plus errors and warnings if any.

Google Search Console allows you to check indexing status of your site and optimize it. It shows the report not only of the current day but also from past times.

Final Thoughts

Google rich snippets are as important as always. The properly structured data gives you great visibility. Now, you have two easy ways to add a rich snippet to your site. Either you add it manually or through the plugin. A good rich snippet will give you leads, so you are on the way to improve your CTR. You can easily apply these methods on any site. But there is a much reliable way of doing it. You can design your website with our WordPress Theme Builder. It will automatically add the Google rich snippet to your site. All you have to do is enabling an inbuilt show metadata option. It will automatically add the rich snippet to your site!!

Read More
January 25, 2019 0 Comments

WooCommerce and Gutenberg Editor: Experiments for Compatibility Check

How will Gutenberg impact the WooCommerce in the long run? Is Gutenberg editor beneficial for WooCommerce? Is it even compatible with WooCommerce or not? If these things interest you, you must read this post.

WordPress lovers will be familiar with the introduction of Gutenberg editor in the upcoming WordPress (5.0) release. The all new WordPress Gutenberg editor is committed to revolutionizing the content creation. It will give better user experience with “content-blocks”. The block-editing will enable WordPress to add content layouts. And give users a full WYSIWYG experience. For more details, you can read the article on Gutenberg Editor.

But WooCommerce is a lot more than post/page content. So, the developers start discovering ahead that how the products will interact with Gutenberg. How will the WordPress Gutenberg editor handle e-commerce? How will the WooCommerce Gutenberg combination emerge out?

Exploring Gutenberg Editor for WooCommerce

Dealing with posts, pages, videos and other fundamental content types is one thing. While to have an authoring experience with products is all different. The WooCommerce team moved a step forward. They conduct some experiments to see WooCommerce Gutenberg changes. They named these experiments as “Wootenberg Experiments”.

 

Wootenberg Experiments

These are the initiative to find that how flexible is the use of Gutenberg for product page layout. Will it be a new authoring experience for the WooCommerce users? Gutenberg appears to be an emerging opportunity in this direction. So, let’s see what the current experiments show about the product creation UI.

woocommerce gutenberg editor

Image Source: WooCommerce

The WooCommerce team has tried to add new Product blocks to the posts and pages. They created blocks of featured products, recent products etc. But it was totally different from authoring a blog post. You can load images of different products and then set different properties. Such as the number of products get displayed per row, number of product rows per page etc. Hopefully, the Gutenberg will successfully mimic the rich authoring experience for products also.

Gutenberg Templates

A lot of curiosity has already built over the news of the themes defining Gutenberg Templates. These can be assumed as predefined sets of configurations that speed ups the post creation. Imagine a product block with a Gutenberg product template. It will help to display all the details of a product in new Gutenberg blocks like Product Title, Description, Price, Featured Image etc. You will fill the blanks only as the template will manage the rest. It can also privilege users to specify block template. Seems exciting !!

woocommerce gutenberg editor

Image Source: WooCommerce

Future of Gutenberg with Complex Products

All seems to be simple and manageable as long as products are simple. If the product demands to specify image, title, description, price, then it’s manageable. But if the product is complex, means involves variations and all that need to upload new images each time, then, managing the related data will be tougher. But handling the complex product data using Gutenberg in WooCommerce is still unclear. How will Gutenberg edit this data – is still a mystery!

But as the investigation and experimentation have started at the WooCommerce end, I hope the new WooCommerce Gutenberg changes will be worthy as desired.

Roadmap of WooCommerce wrt Gutenberg

The next common question arises about WooCommerce Gutenberg compatibility. Will the Gutenberg editor be compatible with WooCommerce? How will it handle the different product options? All these things are looking to be answered with the new version of WooCommerce. Its final release is planned for 2018. It will provide a single shortcode for many product options. It will also integrate the new Gutenberg editor.

What you say….

All are eager to see how Gutenberg stirs the WordPress theme landscape. How WooCommerce makes use of Gutenberg? How does the Gutenberg editor impact WooCommerce and so on?

Although developers are continuously working on it, things are far away. A lot of work needs to be done before the final release of Gutenberg Editor and the journey looks hard but promising !!

What do you think about this? Will the Gutenberg editor be flexible enough to incorporate products? Does it look possible to have a smooth authoring experience for products through Gutenberg? I am really fascinated by thinking all about this.

What are your concerns? What do you think about the future of the duo WooCommerce and Gutenberg? And, what you feel about the Gutenberg, its effect on WooCommerce, please share. Your opinion is valuable to us.

Read More
January 25, 2019 0 Comments

How to Upgrade WordPress to PHP 7: Step by Step Guide

Have you upgraded to PHP 7 for WordPress? NO.. wait, are you unaware of requirements for PHP version 7, benefits or concerned about any related issues? Don’t know about WordPress PHP upgrade procedure? No more worries – you are at the right place to get all, you need!!

PHP is a server-side scripting language developed by Rasmus Lerdorf in 1994. He would have no idea that it would empower more than 83% of the websites. It is open-source and the soul of WordPress. Recently, there is a lot of buzz in the market around PHP 7. WordPress itself, recommends upgrading your site to PHP 7. Whereas, most of the users are running their WordPress sites based on PHP version 5.6. Then, what should they do? Should continue with PHP 5.6 or upgrade WordPress to PHP 7?

Before finding an answer to this,here at Templatetoaster website maker, let’s have a look at new features in PHP 7. It will help you to move forward with a firm decision.

PHP 7 Features, Upgrades and More!

The next major release after PHP 5.6 is PHP 7. PHP 6 is skipped as Unicode didn’t do so well. A lot of iterations has been made to PHP 5 since 2004. So, twelve years was a long time span to release a version with a number of performance improvements, safety, and no backward compatibility. The main features of PHP 7 are as follows

  • Improved Performance

PHP 7 is about twice as fast as PHP 5.6. Benchmark testing shows that a response time of 4ms with PHP7 whereas it’s 1.2 on PHP 5 for WordPress 4.4.2. It requires less time to serve the same number of requests. PHP 7 instruction set is optimized for executing the same task in fewer instructions. So, it significantly reduced the memory usage too.

  • Return and Scalar Type Declarations

Now, you can specify the type of variable instead of allowing PHP to set this automatically. So the type declarations ensure the expected results and make the code easier to read. PHP 7 now has added scalar types. Specifically: int, float, string, and bool. Defining these things, it is hoped to get correct and self-documenting PHP programs. PHP 7 also supports return type declarations as arguments. Now, the function will work as desired.

  • Improved Exception Hierarchy With Error Handling

PHP 7 introduces error-handling that is a major relief for coders. As scripts are used to stop by fatal errors. But now fatal errors are replaced with exceptions. You can now use Throwable blocks to catch both Exception and Error objects. However, it does not guarantee that site visitors will never encounter errors. But there are reduced chances of the user interruptions because of PHP script errors.

  • New Operators

PHP 7 also introduces some new operators as follows

    1. Spaceship Operator – Spaceship operator is a complement to the greater-than and less-than operators. It compares the values on the left with values on the right on less than, equal or greater than grounds. It has the main application in sorting function.
    2. Null Coalesce Operator – It is to check whether any variable exists or not. If yes, returns a default value otherwise return the left operand. This if-set-or operator uses a ?? as notation.
  • Easy User-land CSPRNG Functions

It refers to an application space protected by privilege separation that is external to the kernel. CSPRNG is a secure way of generating random data. It stands for Cryptographically Secure PseudoRandom Number Generator. Random numbers are used to protect the system from hackers. In PHP 7, a system interface is put up for the random number generator. But if it gets hacked, the whole system will be compromised and results in bigger issues.

  • Anonymous Classes

PHP 7 introduces instantiate anonymous classes like in C# and Java programming. It is a class without a name. The object it instantiates has the same functionality that objects named classes to do. These are great to speed up both coding and execution as no documentation needed. You can refer to our Guide to PHP 7 article if you want to know more about new Features, Compatibility and Performance.

Why Upgrade WordPress from PHP 5.6 to 7?

Now, you have an idea about new things introduced in PHP 7. Let’s find out the reasons for WordPress upgrade PHP7.

  • An update is necessary for security reasons. The version you are using can have security holes.
  • PHP 7 has higher load capacity. It will cater more customers using the same hardware.
  • PHP 7 is good for business as providing great performance, resilience and optimal utilization. It enjoys a slight edge when it comes to WordPress.
  • The minimum requirements for WordPress have been raised. So, you will encounter compatibility issues with plugins and scripts.
  • Last but not the least, one should adopt a stable version. All its new features advocate upgrading.

 

Issues with the Upgrade

Wherever one thinks to switch to a new version, first thing comes into consideration is compatibility. PHP 7 is not backward compatible. So it might be possible that some of your plugins, themes or scripts will not work properly. Even, it may fully or partially break your site. As every new version comes with many improvements, security patches & new structure of the code.

It may also possible that your plugin or theme code is completely old version dependent. Then, an upgrade will prove this code to be obsolete. So, it’s better to review and modify this code to work well with the new version.

 

Compatibility Check for WordPress and PHP 7

Mainly, the issues arise due to incompatibility whenever you upgrade WordPress to PHP7. If you go for checking compatibility manually, it can be tiresome. So, here is a useful plugin that will help you to test it easily.

wordpress php 7

This plugin will ask you PHP version to check theme & plugin code. It will generate a report of compatibility issues that need to fix. It will also suggest the new version of plugins if available that will support PHP 7.

However, this plugin itself says 100% reliable detection is not possible. It is best to run comprehensive tests before you migrate to a new PHP version.

So, it’s good to check your site manually for any issues.

Check your Site Manually before Upgrading WordPress to PHP 7

Before upgrading, it will be good to check your site. For that, you will create a local copy of your site. You will follow the below steps to check your WordPress site before upgrading

1. Backup Live Site

Before making any changes to your live site, you will take its backup. There are many plugins to create a backup of your site. Out of which, some of the popular plugins are as follows

This plugin simplifies the backup and restoring process of a site. It is one of the highest ranking the scheduled backup plugins. It backups your files and database to the cloud. You can restore again anytime.

It is an easy to use the scheduled backup plugin. You can take backup of your site including the database.

This plugin exports a site with the database and all the media files in a single file. You can upload your site anytime using this backup file.

For more plugins to backup your WordPress site, you can read our post on Free Backup WordPress Plugins.

2. Download XAMPP

Next step is to set a local copy of your website using XAMPP. Download the PHP 7 compatible version of XAMPP. To get the details, you can read the article on “how to install XAMPP and WordPress locally”.

3. Restore Your Site

Once you successfully installed WordPress, restore the backup of your site using any of the plugin mentioned above.

4. Test Local Copy of Your Site

Now, look your site thoroughly for errors. The errors and warnings generated will depend on your set up. You just

  1. Check every page on your website. Look for any elements that have suddenly stopped working.
  2. Check each plugin one by one.
  3. Test that all the features of your active theme are functioning well or not.
  4. You can also go to the wp-config.php file and set the variable WP_DEBUG as true. It will display all the errors and warnings.

define(‘WP_DEBUG’, true);

5. Fixing the Common Problems

The common problems that you can encounter while upgrading are as follows

  1. Firstly, just see the PHP constructs and non-standard PHP code declaration tags. Locate them and replace with modified PHP 7 versions.
  2. PHP7 introduces error handling. Most probably, PHP 5 exception handling methods won’t work. For example,
try {//code}

catch( exception $e)

{//code to handle this exception}

So you can specify the type of error that you expect to encounter in PHP 7 & replace that as follows

try {//code}

catch( throwable $t)

{//code to handle this error}

This means PHP 7 allows you to deal with different type of errors differently. You can also seek help from application developer or by asking questions at developer’s forum.

How to Upgrade your Site to PHP 7 for WordPress?

Once you complete the testing phase, you will follow these steps to upgrade to PHP7 for WordPress

  • Make Changes to the Live Site

Once you complete the testing and filtering the local site, you will replace same errors in your live site. It means you will make improvements in the live site to remove the same errors you encountered locally.

  • Upgrade Your Live Site to PHP7

Does your host provider include any option of PHP version change? If not, you can ask the host company to provide a version upgrade option in the cPanel

Then, log into cPanel and navigate to “Software/Services” option. Now, click the Select PHP versionoption.

wordpress php 7

Now a screen somewhat like this will display. You can Select your PHP version and PHP modules here.

wordpress php 7

… and You are done!

Final Thoughts

PHP 7 will give a performance boost to your site in terms of speed, security, low memory usage & much more. It is smart to upgrade your site to PHP 7 for WordPress. Soon, it may be the minimum requirement for WordPress. But in case you have compatibility issues, you can wait until the authors of plugins, themes provide the updated versions. But undoubtedly, PHP 7 is improving with every release and promises to benefit you a lot.

Upgrading major PHP version at the backend calls for a fresh design at the front as well. If you are already thinking to redesign your website, start with our WordPress Theme Builder and get your website design done in no time.

Read More
January 25, 2019 0 Comments

How to Create a WordPress Page Template from Scratch: Tutorial for beginners

Do you want to define a unique style for every page of your website? Are you going to display some particular information on specific pages? If yes, then WordPress offers you a great opportunity to give wings to your imagination to create WordPress Page Template !!

Basically, all the pages of a website have the appearance according to the theme applied. But, you might come across some sites that have different designs for different pages. How is it possible? The simple answer is – Custom WordPress Page templates. The look of a page can be changed easily by applying a different page template. You can also use a WordPress custom page template to serve different purposes. For example, to create a contact page, landing page, displaying a list of archives/authors, embedding a Google script etc. You can extend the power of WordPress endlessly, it just depends on how you customize WordPress page template !!

What is a WordPress Page Template?

The term WordPress Page Template is being repeatedly used. But, what exactly a WordPress page template is? It’s a template that tells about the layout of a page. It defines all the design elements for a page to display the site’s dynamic content and changes the look and feels of a page. Also, it can be applied to a single page, group of pages or a page section.

Create custom Page Template in WordPress by 2 Methods

In general, a theme treats the page.php file as a default WordPress page template. It includes all the design elements to define any type of content on the page. But, you can easily create custom page template WordPress. You can customize a WordPress custom page template as per your needs to personalize it. There are two reliable methods to create custom page template WordPress as follows

  • Create Custom Page template in WordPress Using TemplateToaster

If you don’t have much knowledge of coding, you can use TemplateToaster WordPress Theme Builder. Only some simple mouse clicks to choose required design elements. You will be able to design awesome WordPress page templates with TemplateToaster in no time. Let’s see the step-by-step procedure to create WordPress page templates as follows

1. Download the software & install it. The first screen that you will see after installation as shown below

CMS selection to create page template in TemplateToaster wordpress page template

You make the CMS selection here as TemplateToaster supports all the major CMSs. You will choose WordPress as you want to create a WordPress page template.

2. Next, you will opt for a designing method out of two. Either you will choose a sample template and modify that or go for designing a template from scratch. You will select “Start From Scratch” and click Modify button.

wordpress page template

3. Now, you will see the main interface of software from where you will do all the designing.

main interface of TemplateToaster software wordpress page template

4. Go to Container tab and select a Fluid layout as shown below

select layout of template wordpress page template

5. If you want a page template without header, move to Header tab. Select Header Position → No Header.

header settings wordpress page template

6. Now you will design the menu of your template. Go to Menu tab and set Width as Full Width.

width settings wordpress page template

7. Put the website logo. For that, you can select an image from image gallery by clicking on Logo option. You can also browse a custom logo image of your own.

logo settings wordpress page template

8. Now, customize your menu by selecting typography of menu buttons, margin, padding, background color & much more. You can style it as per your taste from available options.

topography settings wordpress page template

9. If you want to have a slideshow on your page template, move to Slideshow tab. Check the Slide Show box to enable it as shown below

slideshow settings wordpress page template

10. Set the Width of the slideshow as Full Width. Similarly, you can set its Height, Border, Margin, etc.

slideshow width settings wordpress page template

11. Now from Background option, load the different images for your slideshow one by one.

background image settings wordpress page template

12. Now, you will design the content area of your website. Go to the Content tab and uncheck the Page Title option. Put the required content in the selected content column.

content area design settings wordpress page template

13. If you want to add any button, contact form, image etc., double-click on the content area. It will open the Editor tab.

more settings of content area using editor tab wordpress page template

14. You can also add a Click Now button as shown below. Similarly, you can add other elements.

click now button settings wordpress page template

15. In the left pane of the main interface, you will see a Page Templates option. Here, you will find a Page Template as you designed above. In default page template, the Left Sidebar is placed as shown below

sidebar settings in page template wordpress page template

16. If you want a new template, you will click the + option placed on the side of Page Templates option. Name it. Suppose it’s New Template here

new template settings wordpress page template

You will remove the sidebar in this template. For that, select General → Sidebars → None. Similarly, you can place any sidebar or remove it from here.

17. For creating another template without Slideshow, add a new page template from + as above. Suppose you name it Without Slideshow.

without slideshow option settings in slideshow menu wordpress page template

18. Move to Slideshow tab. Just uncheck the Slide Show box here as shown below

more slideshow settings wordpress page template

19. Now, export your theme from File menu as shown below

export settings wordpress page template

20. Log into WordPress dashboard. Navigate to Appearance → Add New → Add Themes. Here, browse your theme exported file and upload it as shown below

browse exported theme wordpress page template

21. Install and Activate it.

installation of theme wordpress page template

22. Here, you will see an option to Import Website Content. Select it by pressing Yes.

importing website content wordpress page template

23. From the left pane of the dashboard, go to Pages → Add New. Here, write the content and apply a page template from Page Attribute in the right pane of the screen as shown below. Suppose, you select pagetemplate_page here.

 pages settings wordpress page template

Your live page with pagetemplate_page will look as shown below. It will have slideshow and sidebar both.

preview of live page with pagetemplate_page wordpress page template

24. Similarly, create a new page using No Sidebar_page template as shown below

creating new page settings wordpress page template

When it goes live, it will look as shown below. It will have no sidebar.

preview of page wordpress page template

25. Create the third page applying without Slideshow_page as shown below

creating third page wordpress page template

Your live page will have no slideshow as shown below

final page preview wordpress page template

So here you have 3 different custom WordPress Page templates that can be used in a WordPress website for suitable pages.

  • Create Custom Page Template in WordPress using Coding Method

If you want to create WordPress page template then you need to know some HTML, CSS, and PHP. But, no worries, it’s really easy to create a WordPress page template. Suppose you want a page template having no sidebar, you will follow simple steps for that as follows

1. First, open the text editor like Notepad. Write this code to create a custom page template of name MyCustomPage. It simply tells that this is a template file with name MyCustomPage.

<?php /* Template Name: MyCustomPage */ ?>

2. Now, save this file as MyCustomPage.php. You can use any name for the file.

3. Connect to your website and upload this file into /wp-content/themes/ directory of your current theme. The basic theme used is generally Twenty Sixteen theme.

4. Log into your WordPress dashboard. From the left pane, navigate to Pages → Add New. A new window will open as shown below. On the right side, go to Page Attributes → Template. A drop-down list of existing templates will open. Select MyCustomPage here.

5. Now, Publish this page. You will get a blank page.

6. It’s the time to customize your custom template. For that, go to /wp-contents/themes/YOUR THEME/ folder. Copy the content of page.php file.

custom page template settings wordpress page template

7. Paste this code to MyCustomPage.php file. Save it.

8. The resultant page will look similar to the default page of Twenty Sixteen theme.

9. As you want a page template without sidebar, remove the code that calls the sidebar. Here, you will remove

<?php get_sidebar(); ?>

10. After removing the sidebar, though the sidebar gets removed, an empty space will display at its place.

11. Make the content to fit the full screen. Locate this line of code

<div id="primary" class="content-area">

Replace it with following code

<div id="primary" class="site-content-fullwidth">

Here, the code for site-content-fullwidth CSS will be as follows

.site-content-fullwidth
{
float= left;
width= 100%;
}

Save it.

12. Finally, the whole code of your WordPress custom page template will be as follows

code of wordpress custom page template wordpress page template

13. The final updated page will look as follows

final updated page of custom page template wordpress page template

14. Similarly, you can create more custom page templates by removing header, footer or applying extra sidebars etc.

 

  • Which ways you Create a WordPress Page Template from Scratch ?

Though there are a number of ways to customize WordPress, one of the most effective and reliable methods is a custom page template feature. Creating a WordPress custom page template is really easy. But if you opt coding method, make a copy of the default template file page.php. As if you modify the original file, it will apply on all the pages of the website. So, it’s the best to test your website with sample page templates. If it performs good, you can add it to the original. While using TemplateToaster, you need no coding at all. The method you choose entirely depends on your choice. A custom page template with an elegant design and structure demands only the innovation!!

That’s all for now. If you want to share anything or have any queries, post in comment section below.

Read More
January 24, 2019 0 Comments

How to fix WordPress page updates not working

What..!! Do you make changes to your WordPress site but results are not visible? Have you customized the look of your site but getting no effects? Having a tough luck with your site as WordPress page updates not working? Don’t panic if your WordPress is not responding as expected. Here is the solution to your problems – learn how to fix WordPress page updates not working.

Adding changes to your WordPress site is a good practice to keep it worth reading. But what to do, if the changes you did in content or design are not committed. Actually, WordPress pages are not getting updated with the changes you did. It is really unfortunate. I got many queries that users made many changes to WordPress theme, page, post or widget. But, changes or the edits are not happening at all after saving or publishing. How will you fix it? Let’s discuss it in detail “how to fix WordPress page updates not working”.

Common Symptoms of WordPress page updates not working

It’s a very common problem with designers and developers or even basic users that the changes or edits they commit to the WordPress site, are not visible immediately. Some common situations are enlisted below that are encountered by most of the users:

  • WordPress Homepage not updating: The most common problem is when you publish a new blog post, you can view it from WordPress admin area. But, you can’t see it from the frontend on the main page.
  • WordPress Content / CSS changes not updating: You try to customize your website by adding some CSS and changing the layout. But, your site doesn’t reflect any changes after saving it.
  • WordPress Plugins not updating: You make some changes to plugins, widgets or sidebars, but updates are not visible.

How to fix WordPress page updates not working

There are some common factors responsible for not updating your WordPress website. These are not hard to handle for WordPress. Let’s see the reasons and solutions

 

1. Poorly Configured Cache plugin

One of the main causes of the issue is poorly configured WordPress cache plugin. Most of the users have caching plugins like Autoptimize, W3 Total Cache, WP super cache etc. Basically, these plugins clear the cache when some changes are made to your site. However, if the plugin is configured poorly, the cache may not be cleared and the old version of your site still appears.

Solution

You will try to empty all caches. This can be easily done by plugin settings. Suppose, you have a W3 Total Cache plugin. Go to its Settings page and click empty cache option. Now, all the changes will be visible on the main page.

clear cache using W3 Total Cache Plugin wordpress page updates not working

You can also control that what should be cached by the plugin. W3 Total Cache provides this with page cache functionality. Move to the menu under Page Cache. There is an option that allows not to cache the front page. As by default, the front page is cached, checking this option will not cache the front page.

W3 Total Cache Plugin Settimgs wordpress page updates not working

If none of these solutions work for you, you can try disabling the cache plugin. For that just deactivate the plugin. Navigate to Installed Plugins list from left pane of WordPress dashboard and Deactivate the cache plugins.

 

2. CDN not enabled

CDN is a network that accelerates the content around the world via distributed edge servers. Whenever a user comes to your site, gets redirected to host server. A host server is located at a central position. But if traffic is high, all the users still try to access the same single host server. It delays the content delivery. Here, CDN helps through its wide network. It caches the static content and stores it at all of its servers. Now, your user will be redirected to the nearest CDN server location.

Sometimes, you made changes but the CDN content is not refreshed. So, you will not able to see the expected results.

Solution

You mainly enable the CDN with a cache plugin. you can try to disable or bypass CDN temporarily. To disable, go to General settings of the W3 Total Cache plugin and uncheck the CDN Enable option. CDN off will make work your WordPress site as expected. Now, all the changes will be visible.

CDN settings with W3 Total Cache Plugin wordpress page updates not working

 

3. Old Browser Cache

Sometimes, browsers will display a cached version of your website instead of the new one. Generally, when you visit a webpage for the first time, your browser takes a while to load the content. But next time, the content is showed up at once. This is because the browser stores the information that doesn’t change, on your computer. This is called browser cache that speeds up the page loading.

However, the problem arises when you make a change on your website. Most of the browsers do not update the cached data, so it reloads the old content. It seems to you that WordPress not updating.

Solution

To resolve this issue,

  • simply Press CTRL + F5 or Cmd+R in Mac for Google Chrome. You can also empty the cache by moving to the settings. Settings → History → Empty the Cache. It will reload the page and show you the newly updated pages. Similarly,
  • Firefox – Click CTRL+SHIFT+R or navigate to Options → Privacy & security → Cached Web Content — Clear now
  • Internet Explorer – Hold the SHIFT button and click the REFRESH button. You can also do it from Gear wheel. Safety →Delete browsing History → Temporary Internet files and Website files. Then, click Delete.
  • Safari – Go to the browser menu, and click Safari → Reset → Empty Cache or click CTRL+ALT+E.
  • Opera – Go to Settings → Preferences → Advanced → History.

Select the Disk Cache section and empty the cache by clicking Empty Now. You can also use CTRL+SHIFT+DELETE to open this menu and delete private data.

 

4. Old Server Cache

Some shared hosting providers also have the cache on their server. They use web page caching tools. Because of these tools cached version of your site expires after a specific time. And, the newly updated site will be visible after that only.

Solution

You can set web page caching off via your web host’s configuration panel. If not, you can contact your web host for disabling the web page caching.

 

5. Modifications at the Incorrect Place

Sometimes, very silly mistakes cause the big problems. You may make changes to the different file and view the different file. For example- you fixed the stylel.css file and viewing the styleI.css file.

The first filename is followed by lowercase “L” and the file chosen to locate changes has filename followed by uppercase “i”.

Solution

Pay attention to the source file and specific file chosen to view the changes. Try to give distinct easily distinguishable names to different files and folders of your website.

Secondly, match your URL settings in your options panel to the database.

 

6. Working on the Wrong Theme

You face this problem when you are working on one theme but by mistake checking the page that is generated from some other theme.

Solution

Match the pages you made the changes and the page you are viewing. Sometimes, you overwrite the file but it didn’t get overwritten completely. So, delete the original file from the host server and upload the new one.

 

7. Not Saving the Changes

Even, the designers, developers, programmers can commit small mistakes. They forgot to save changes by clicking save or update buttons.

Solution

Just go back and save the modifications. Now, review your webpage.

 

8. Coding Mistakes

A small coding mistake like skipping a semicolon (;) will let you pay heavily. It will not update your page.

Solution

Review your updated code. Figure out the misspelled tags and skipped semi-colons etc. if any. Also, recheck your templates and uploads as well as debug the CSS, HTML, and PHP of your site.

 

9. DNS Resolution Delay

If you have recently moved your site to a new server, it’s possible that DNS is not propagated completely yet. Your browsers might be getting the page from the old server. So, it will show the old content.

Solution

It’s better if you can avoid any new changes until your DNS gets propagated completely. Usually, you have to wait only for 24 hours. But if you still want to modify, you can do it by logging into hosting panel.

Which method you use to fix WordPress page updates not working ?

WordPress page updates not working is a common issue encountered by users. Though the main cause after this issue is only the cache. If you clear all the caches, the probability of errors or changes not visible, will greatly reduce. The secondary cause arises due to human behavior like coding errors, file naming etc. So keep checking for those errors or mistakes and avoid dwelling on such issues. Are you facing some common issues with designing your website as well? Give TemplateToaster WordPress Theme Builder software a try. It empowers you to create stunning websites in no time.

Hopefully, this article will help you out. If you have any queries, kindly post in the comment section below.

Read More
January 24, 2019 0 Comments

How to Create Custom Header in WordPress?

Does your website look appealing enough to the visitors? Or it’s just a normal website among millions of others! Do you wish your website to stand out from the crowd?  Do you want every page of your site looks distinct with a different feel? What if I say that the key to the solution for all these problems is in your own hands? And that key is – Custom Header!! Yes, you read it right. Let’s see how…

A header is the most important visual element of your site that occupies the topmost position. It is the first thing a visitor sees whenever lands on your website. The header of your site is your website’s identity that remains same throughout all the website pages. You can use it to ink a good long-lasting impact in visitor’s mind. You can stand out and win the user’s trust by creating remarkable self-portraying custom headers. A custom header in WordPress is a feature that allows you to customize the header image along with adding text, widget etc. to it. You can also adjust these elements as per your need to feature the best image of your website.

WordPress Custom Header: Why do you actually need one?

The header is one of the most important elements of your website. It is a gesture that conveys a lot about your site. Usually, it holds a picture or video to grab the visitor’s attention. According to Nielsen Norman group, a visitor only remains for 10-20 seconds on your website. So, the header should be appealing to interest them.

A custom header in WordPress gives you more control and flexibility. You can rotate, resize or crop a header image in addition to the repositioning of the logo, text or widgets. You can design it to contrast your website look. You have to use it as a proposition to the target audience. Try to quote your tagline in the custom header in WordPress. As you may not have second chance to make the first good impression. A well-structured header should answer why you are unique, what’s all that your site features etc.

So, a custom header is important as it works as a face of your website. It should be able to communicate the crux and mood of your site to the audience. You can have a different WordPress custom header per page. For example, you can add features of your product in the header for About Us page and rest of the pages without features. It can work wonders !!

How to Add a Custom Header to WordPress?

The default WordPress themes allow you to use custom headers. You can put your own custom header images as per your preferences. Setting a WordPress custom header image takes a few efforts. It basically involves two steps to add a custom header to the default WordPress themes as follows

1. Source and Edit your image

First of all, select an enticing image. It should be simple and unique. You can get lots of free images on the Internet. For more details, you can read about 16 websites to get free images. Once you source your header image, you are just left with editing it.

You can use some of the useful desktop editing or web-based free editing tools. You can rejuvenate the chosen image with GIMP, paint.net etc. GIMP is a free and open source image editing software. It provides you many sophisticated tools to give a special touch to your image. Whereas paint.netfacilitates editing tools for images on Windows. Get your custom header WordPress image done.

2. Upload the Custom Header

To upload the header image, log into your WordPress dashboard. From the left pane, navigate to Appearance → Header.

It will open a Header Media pane on the left of the screen. Go to Header Image and click Add New Image button.

It will open the image gallery to choose the image. You can also browse your custom image here. Select the image, crop it if required. Set it as the custom header image. You are done.

 

How to Customise Header in WordPress?

Once you upload the WordPress theme custom header image, you can edit it for applying video, text, widgets, social icons etc. You can use any default WordPress theme. Here, you will get example code to edit custom header in Twenty Seventeen theme.

1. Add a Text Area to the Header

With default theme, you can only change the website title. But to add text area, you have to write some code in header-image.php file. You will add the following code to get a text area in the header

<div class="custom-header">

<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
<div class="custom_textbox">
<div class="custom_textbox_content"><p>This is my dummy content</p></div>
</div>

After adding this code, you will see a separate text area in the header as shown below

text area setings of header in WordPress custom header wordpress

2. Add Social Icons

To add social icons to the header, you will add following code to site-branding.php after wrap class.

<div class="social_links">
<ul>
<li>
<a href="" class="custom_facebook_icon">
<img alt="customfacebook" src="http://localhost/wordpress/wp-content/uploads/2018/01/facebook.png" />
</a>
</li>
<li>
<a href="" class="custom_twitter_icon">
<img alt="customtwitter" src="http://localhost/wordpress/wp-content/uploads/2018/01/twitter.png" />
</a>
</li>
<li>
<a href="" class="custom_googleplus_icon">
<img alt="customgoogleplus" src="http://localhost/wordpress/wp-content/uploads/2018/01/google-plus.png" />
</a>
</li>
</ul>
</div>

You also have to give CSS if you want to style social icons in your own unique style.

#masthead .wrap {
position: relative;
display: inline-block;
vertical-align: middle;
}
.social_links {
float: right;
padding-right: 60px;
}
.social_links li {
display: inline-block;
margin-right: 15px;
}

It will give you the required results as shown

social icons settings in header in WordPress custom header wordpress

3. Add a Widget to the Header

If you want some widgets to feature your website, you will define a function in function.php file. You can add this code at the end of the file.

function custom_widgets()
{
register_sidebar( array(
'name' => 'Custom Header Position',
'id' => 'custom_header_position',
'description' => __( 'An optional widget area for your site header', 'testtt' ),
'before_widget' => '<aside id="CustomWidget" class="custom_widget">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}

add_action( 'widgets_init', 'custom_widgets' );

Once you did it, you will add this HTML code to header-image.php file to show the specific widget on the frontend.

<?php

if ( is_active_sidebar( 'custom_header_position' ) ) : ?>
<div id="header-widget-area" class="custom-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'custom_header_position' ); ?>
</div>
<?php endif; ?>

Now, you will move to Appearance → Widgets. From here, you can add any widget to your Custom Header Position. For example, the Search widget is added by simply dragging it to Custom Header position.

widget header settings custom header wordpress

The resultant header will look somewhat like this

resultant custom header wordpress

4. Reposition the Logo

You can add a logo to default WordPress options. Navigate to Appearance → Header → Header Media → Logo Section. Here, set a logo by clicking Select Logo option.

logo settings custom header wordpress

But to reposition it, you need to write additional CSS. In Twenty Seventeen theme, you will get a logo in bottom-left position by default as shown below

reposition settings custom header wordpress

Here, you will see an example CSS to add the logo to the center position. Likewise, you can set it anywhere in the header.

.custom-logo-link {
padding-right: 2em;
position: absolute;
left: 500px;
top: 0px;
}

setting logo in center position custom header wordpress

5. Add Video to the Header

Finally, you can also add a video to your WordPress Header. Thankfully, there is no need to add code for this. WordPress provides you a default option to add video or background image.

For adding video to the header, navigate to Appearance → Header → Header Media → Header Video. Here, you will click Select Video button as shown below. Then, you can browse the video you want on the header from your computer. Alternatively, you can also give URL of the video if it’s online. Just publish it.

header video settings custom header wordpress

Your Header Video will look like this

final custom header WordPress video

Similarly, you can add a Background header image by selecting any Header Image from Header Media section.

You can have different WordPress custom header per page, say some with a background image, some with video or Widgets etc. It all depends on your choice and creativity.

 

How to Create a Custom Header in WordPress from Scratch with TemplateToaster?

You should have good knowledge of PHP, HTML, CSS to work with template files. If you are a beginner and don’t know how to write code, you can rely on TemplateToaster WordPress Theme Builder. You need no coding to create WordPress custom header template. Just a few clicks to drag & drop interface and you are ready with your custom header. Let’s see how to add custom header to WordPress with TemplateToaster

First of all, download and install TemplateToaster website builder. After successfully installing it, you will get the CMS selection screen as shown below. Select the WordPress here

CMS selection in TemplateToaster custom header wordpress

Then, you will get next screen to create a template from scratch or use a sample template. You will select Start from Scratch and click Modify.

sample template selection in TemplateToaster custom header wordpress

Then, you will be redirected to the main interface of the software from where you can start designing your custom header.

main interface of TemplateToaster custom header wordpress

1. Full-Width Custom Header 

You will get the main interface screen of the software as shown below. From here, you can set a full-width header. Go to Header → Width → Full Width.

width settings of header in TemplateToaster custom header wordpress

2. Reposition the Logo

From Header tab, click Logo option. It will open a logo icon gallery. You can select a logo image from sample library or you can browse your own custom image. It will set the logo.

selection of logo in TemplateToaster custom header wordpress

When you double-click on logo image, it will open a Format tab as shown below. From here, you can give a link to logo image or set its position. You can reposition by giving custom left and top positions or select a position shortcut. For example, here a vertical-center position is selected for the logo.

more logo settings in TemplateToaster custom header wordpress

3. Adding Background Image

You will select Background option from Header tab to set a header background image. It will open an image gallery. You can also browse your own custom header image from More Images option.

background image settings in TemplateToaster custom header wordpress

Similarly, you can add a Foreground header image by clicking Image option from Header tab.

4. Add Text Area to the Header

If you want to display the tagline and relevant information on the header, you can use a text area. In the text area, you can add plain text, button, list etc. Click Text Areas option.

Header text area settings in TemplateToaster custom header wordpress

Add content and style it by double-clicking. As a double-click will open an Editor tab to edit content.

Text area settings 2 in TemplateToaster custom header wordpress

5. Add Widget to the Header

You can add a widget area to the header in a single click. Go to Widget Areas tab and click Widget Areas → Header option. You can also set typography for this widget and can reposition it anywhere in the header just by dragging. You can add content to it after export.

widget settings of header in TemplateToaster custom header wordpress

6. Add Social Icons to the Header

Adding social media icons to the header is really simple. From Header tab, click Social Icons option. It will open a social icon gallery to select an image as per your need. You can also browse your custom icon here.

social icons settings of header in TemplateToaster custom header wordpress

All the social media icons are available here. You can keep icons according to your requirement. You put social media icons on Facebook, Twitter, and Google + here.

7. Adding Video to the Header

To add a video, click Add Video option. From here, you can easily upload a header background video.

Video Header settings in TemplateToaster custom header wordpress

Final Words

By now, you have learned about how to create a Custom header in WordPress. It will definitely change the outlook of your website. The solution you opt is entirely your choice. Hopefully, you liked the post. If you have queries, you can post in the comment section below.

Read More
January 24, 2019 0 Comments

10 Best WordPress Email Marketing Plugins : Free & Paid (2019)

Are you looking for some best WordPress email marketing plugins ? You are at the right place. Get all, that you need!

Every marketer knows how important it is to stay connected to the audience. Hence, there is a bunch of WordPress email marketing plugins, which help use email marketing in an effective way with ease. Want your subscribers to receive up-to-date information on your product or articles? Want to hit the target? Use these WordPress email marketing plugins and tools!

WordPress is a perfect platform for collecting all sorts of data. There are many WordPress Email Marketing plugins to connect to your email service. You can also use them to send or receive urgent and relevant information.

Here at TemplateToaster web design software, you can learn about the best 11 WordPress email marketing plugins. They can help you promote your project and create a tight bond with the audience.

List of the Best WordPress Email Marketing Plugins in 2019

  1. Constant Contact
  2. MailPoet
  3. Email Users
  4. MailMunch
  5. Hustle
  6. MailChimp
  7. Campaign Monitor
  8. Email Subscribers and Newsletters
  9. YITH WooCommerce Mailchimp
  10. ConvertKit
  11. Subscribe2 HTML plugin

Comparison Chart of Best WordPress Email Marketing Plugins (2019)

Best WordPress Email Marketing Plugins Active Installs Average Rating Requires WordPress Version Version
Constant Contact Forms  50,000+ 5 4.0.0 1.3.7
MailPoet 70,000+ 4.8 4.7 4.8.8
Email Users 20,000+ 4.0 4.9 3.8
MailMunch 10,000+ 4.7 3.0.1 3.1.1
Hustle 70,000+ 4.8 4.6 6.0.3

Best WordPress Email Marketing Plugins in detail

1. Constant Contact Forms (Free Trail)

WordPress email marketing plugin

What about making the subscription to the list of emails much easier? What about collecting various information for the statistics section?Forms does exactly this. You need no account to use Constant Contact forms WordPress Email Marketing plugin. Well, registered members can enjoy a broader range of options to choose from.

  • Version: 1.3.7
  • Last updated: 3 months ago
  • Active installations: 50,000+
  • Requires WordPress Version: 4.0.0
  • Tested up to: 4.9.7

2. MailPoet (Free upto 2000 subscribers)WordPress email marketing plugin

MailPoet WordPress Email Marketing plugin turns your WordPress into a powerful tool for mailing to a huge number of subscribers. With a free version, you can send emails up to 2,000 subscribers. Such messages can end up in a spam folder so that your website gets blacklisted. Use a premium version to avoid these problems. Then the server does all the work for you and you don’t have to worry about the delivery. Also, in the premium version, you get to see which subscribers opened the newsletter and which links they clicked.

  • Version: 3.8
  • Last updated: 9 hours ago
  • Active installations: 70,000+
  • Requires WordPress Version: 4.7
  • Tested up to: 4.9.7

3. Email Users (Free)

WordPress email marketing plugin

Email Users is definitely worth your attention as the best WordPress Email Marketing Plugin. It combines all the features of a regular tool and offers a variety of top-notch options to choose from. You can sort the registered users by age, preferences, hobbies and so on, and send your emails to them. You can also send notices on new posts or ads.

What’s more, users can email each other. A perfect tool for those, who want to build up a loyal following of people who enjoy your website!

  • Version: 4.8.8
  • Last updated: 5 months ago
  • Active installations: 10,000+
  • Requires WordPress Version: 4.9

4. MailMunch (Free)

WordPress email marketing plugin

MailMunch nails your email marketing. With a variety of options, such as embedded and sidebars, scroll boxes, different popups it is hard to beat. MailMunch is compatible with ConstantContact, MailChimp, InfusionSoft, GetResponse, CampaignMonitor, and Aweber. This WordPress email marketing plugin adds lots of features to its functionality. You can also use various testing and analytic tools the developer has in store.

  • Version: 3.1.1
  • Last updated: 8 months ago
  • Active installations: 20,000+
  • Requires WordPress Version: 3.0.1
  • Tested up to: 4.9.7

5. Hustle (Free for 30 days)

WordPress email marketing plugin

This one we compare to MailMunch and ConstantContact. It also lets you use various instruments like popups and widgets. This Email marketing plugin is a more advanced version of a popular mailing service. Not only that Hustle would give you a broader access to your target audience. But that it provides a ‘share’ bar for many social platforms is fantastic. That’s the way you collect statistical data to make a forecast on the future of your projects.

  • Version: 6.0.3
  • Last updated: 2 months ago
  • Active installations: 70,000+
  • Requires WordPress Version: 4.6
  • Tested up to: 4.9.7

6. MailChimp (Free)

WordPress email marketing plugin

MailChimp can rule them all! Create newsletters, make original designs depending on your target audience and its liking. More than 7 million people run MailChimp on daily basis, which proves it is good. Manage your subscriptions with it, send emails, collect data, design various templates. You can even create automatic responses to always stay in touch with the audience.

To bond with the audience even stronger, add comment and contact buttons to your website or blog. The plugin has a simple installation form. All you need is an API key to connect the app to your platform.

  • Version: 4.2.4
  • Last updated: 1 week ago
  • Active installations: 1+ million
  • Requires WordPress Version: 4.1
  • Tested up to : 4.9.7

7. Contact Form 7 Campaign Monitor Extension (Free- Pro $59, $99, $149)

WordPress email marketing pluginIf you want to use an advanced opt-in form, you can integrate all the options into other forms you have on the website. Contact Form 7 Campaign Monitor Extension can help you solve this task.

It is compatible with Contact Form 7. Your visitors can subscribe to all the newsletters by making a few clicks.

8. Email Subscribers and Newsletters

WordPress email marketing plugin

Well, it is a rather more complex approach to your email delivery. Made for those, who know the value of time and want to keep track of all the data current. Email Subscribers and Newsletters collects all the necessary data in your stead. When ready it sends emails to all subscribers through your WordPress page. There is an option of an automatic delivery every time a new post gets added to the website. I would say this WordPress email marketing plugin is a real godsend and time saver for power users!

9. Yith WooCommerce MailChimp

WordPress email marketing plugin

This WordPress email marketing plugin is very useful for online shop owners. Want to keep your customers updated on the latest sales and deals? Install this one! YITH WooCommerce Mailchimp connects your store to the mailing system. Now your customers can subscribe to the newsletters due to this nitty-gritty plugin.

10. ConvertKit

WordPress email marketing plugin

This one definitely stands out among the best WordPress email marketing plugins. Made for bloggers, who want their subscribers to be up-to-date with their content. ConvertKit connects your account by using an API key. It is capable of adding lots of various forms for every blog post or for the website itself.

11. Subscribe2 HTML –WordPress email marketing plugin

WordPress email marketing plugin

This Subscribe2 HTML plugin is a great help for those, who want to send notifications every time a new blog post is up and running. This maximizes the conversion of your website. You can send CSS files, send pictures and generate emails in a blink of an eye. Definitely, a rewarding WordPress email marketing plugin.

Electronic mail remains one of the best tools and solutions for marketing. Many types of research and statistics can prove this. You can use email every time, you need a safe and simple delivery solution.

Which WordPress Email Marketing Plugins you use?

WordPress email marketing plugins make the data collection a breath-taking holiday. You can share information like shooting ducks in a pond. Don’t hesitate, try them and find out the best WordPress email marketing plugins that suits your needs!

As you are deciding to use WordPress email marketing plugins, you will undoubtedly want to update your site! Redesign the theme for your site with TemplateToaster website creation software, compatible with major CMSs and responsible for designing appealing themes.

Read More
January 24, 2019 0 Comments

How to Create a WordPress Theme Offline from Scratch

Are you afraid of fiddling with your live website? Do you want to try a new theme or plugin? Do you want to check your site by making changes to your content? If yes, you can create a WordPress site offline, and update it later on.

A website promotes your business, services and brings more clients. It is a powerful marketing tool to flourish your business. If you are investing time and efforts into it, it’s good to have a website that will make you feel proud. These days, the users are smarter and choosy about the available options. Even the brands compete for their attention. So, it is essential to stay updated with latest technological advancements. Sometimes, you need to switch to the latest themes. It will give you a beautiful upgraded website to reflect your brand with better SEO results. Usually, the developers and site owners prefer to create WordPress theme offline.

Let me clear certain things here. By creating a WordPress website or theme offline, we mean, you can customize a theme for your WordPress website, or for an already live website. Technically, websites are usually created offline in a local environment using XAMPP. But in general sense, we can refer “creating website offline” typically as designing a part of website or theme without making any changes to the live website. This can be done using WordPress’ own Customizer (in a local environment) or using a staging environment. We will discuss these all in detail below but let’s just first discuss why you should actually design a WordPress website offline.

Why Create a WordPress Website Offline?

If you are switching a WordPress theme, it’s good to customize and test it offline. You can try other themes, plugins without any fear to get noticed. It can be risky to update a site while it is live. You can’t hold the changes to update later. Either you will save changes or discard when live. But on the other hand, you can have a full website downloaded as a local WordPress installation. Then, spot the errors and remove them without any danger of content being indexed by Google, or unusual design changes leading to bad UI/UX. You can work even when you don’t have access to the internet.

How to Create a WordPress Website Offline?

Creating a WordPress website offline will give you a chance to test it before actually publishing on the internet. So, what all you need to create a website offline? It only takes

  • XAMPP (a local web-server)

XAMPP means Cross-Platform (X), Apache (A), MySQL (M), PHP (P) and Perl (P). It is a lightweight Apache distribution to set up a local web server environment. Works equally well on Linux, Mac, and Windows. It is the main reason to prefer XAMPP over WAMP. As WAMP (Windows Apache MySQL PHP) is used only for Windows-based computers.

  • WordPress (CMS)

WordPress is one of the most popular Content Management Systems. It provides you countless themes and plugins to aid your website. Easy to use and requires fewer skills than other CMSs. It has a huge community that works as a great support system. Runs around 29% of World websites.

  • TemplateToaster (an offline Website Builder)

Creating a theme and developing a website requires coding. If you don’t have coding skills then you can go for a website builder. As for now, you want to develop a theme locally, you need a quality offline website builder. For that, you can trust TemplateToaster i.e well-known name in web design industry. It gives you a number of free sample templates to create websites for distinct industries and purposes.

In case, everything goes right and you can make your site live on the internet. You will need a domain name and WordPress hosting for that.

1. Installing XAMPP

XAMPP is a free open source web server solution. It includes all that you need to set a local web server. The key components of XAMPP are

  • Apache – A web server application to process and deliver the web content to a computer. It powers nearly 48% of all the websites.
  • MySQL – An open source database management system.
  • PHP – Hypertext Preprocessor is a server-side scripting language that powers some of the most popular websites in the world.
  • Perl – A high-level, dynamic programming language used for network programming, system admin etc.

It makes a transition from a local test server to a live server really easy.  Check this for detailed step by step instructions to install XAMPP.

2. Install WordPress on Localhost XAMPP

Once you successfully installed XAMPP, next you will install WordPress. A WordPress environment facilitates you many tools to safely test your site before it goes live. It’s really easy to install WordPress locally on Windows. Similarly, you can run WordPress locally on mac. For this, you can read our detailed post on how to install WordPress on localhost XAMPP.

Now, you are ready with your local WordPress development environment. You can proceed to create WordPress theme offline.

3. Create WordPress Theme Offline using TemplateToaster

You need to create a theme for an awesome looking website. With TemplateToaster, you can work when you are offline. It gives you a simple drag and drop interface to design your website theme. It also offers a number of sample themes to cater the needs of various industries. It’s up to you that you like to create a theme from scratch or use a sample theme. It gives you hundreds of latest options to design your theme beautifully. To design your own website theme from scratch you can read our detailed article on how to create a WordPress theme from scratch.

4. Build WordPress Site offline, then Upload

Once your WordPress website theme is ready, log into WordPress Dashboard. Apply your theme from Appearance. Now, you can add content to it. You can also make use of different plugins to add more features to your site. Probably, there is a plugin in WordPress repository for performing every task you can think of. There are some important things like SEO, search, table, video backgrounds etc. for which users install plugins. You can also have a list of 10 basic WordPress plugins here. This is one of the important things that you can test different plugins locally. Then you can publish your site online. You can use Duplicator or All-In-One WP Migration plugins for easy migration of your site.

Other ways to Customize WordPress Website

Now, If you have an already published WordPress site and want to make changes, it is wise to create a local copy of it and proceed. For modifications, you have two methods as follows:

1. Using WordPress Default Customizer

You can rely on default WordPress customizer to modify your site further. It provides you various options to design some of the main components of your site. Including header to add a logo, background image or video, creating and placing menus, widgets etc. Under the Homepage Settings option, you can specify which page to use as a landing page, home page or post page. Moreover, you can attach an Additional CSS to give a new look and feel to your site. So, you can make all these important updations locally with the customizer.

create wordpress theme offline

2. Staging Environment

The second safe method to make changes to your existing website is developing a staging environment. First, you will create a staging site to test all the changes. A staging site is a replica of your original live website. For this, you create a subdomain on the same server online that is not accessible to the public. If you are interested in more details, you can read this article to create a staging site. The popular plugins to develop a staging environment are WP Stagecoach and WP Staging. These provide you a simple UI to add new themes and customize your website. And simply, creates a staging copy of your live site. You can import all the updations from the staging site to your live site anytime.

To Sum Up

Till now, you have gone through the whole procedure to create a WordPress theme offline. So, you can figure it out that creating a website offline is not that tough. You will simply set up a local web server environment. Then, install WordPress and an offline website builder. All the components are easily available. Then, you just have to drag & drop to create your theme in TemplateToaster. Once you create your theme, export and activate in WordPress. Make use of plugins to add more features that complement your work. That’s it. You are ready with your own WordPress website and can live it anytime.

Hopefully, you liked this article. If any queries, you can post in the comment section below

Read More
January 24, 2019 0 Comments

How to Create a WordPress Custom Login Page?

Do you want to add more brand value to your site? Do you want to keep the look of login page fresh for the users who regularly log into your site? If yes, simply create a WordPress custom login page.

If you are running a membership site or blog, you may need a login page. A login page makes users to signup and login using their credentials. It allows them to visit, share and contribute to your site by via posts, images, videos, or comments. But, WordPress provides a default generic login page. It doesn’t give any built-in options to add your own logo and change the feel of a page to match your theme. It is far behind to result in an ideal login page. So, a WordPress custom login page will play an important role here. A custom login page is crucial to add your own branding to the site. You can add more fields to get more information from the users. Moreover, it facilitates you to limit the admin panel access by specifying user roles. In short, a WordPress custom login page offers many benefits with a pleasing user experience.

Different Methods to Create a WordPress Custom Login Page

It is always better to create a custom login page rather than a boring WordPress login page. At the most, you can add your own logo and white label to the admin panel. But what about the admin panel access? So, if you don’t want the access of admin panel to every logged in user, you need a custom login page. But, how to create a custom login page for WordPress? There are two basic methods to create your own custom login page as follows

 

1. Create a Custom Login Page WordPress without Plugin

You can make a WordPress custom login page by using code. It needs basic skills in HTML, PHP, CSS etc. You will make changes to function.php file of your theme. However, remember that you will lose these changes if you update WordPress.

The Basic Modifications to Customize a Login Page

There are some basic things that you want to change your custom login page. For that, the main modifications you can do are as follows

  • Add a custom background.
  • Add a custom logo.
  • Customize the look of the login form.
  • Change the login logo URL.
  • Remove the lost password link.
  • Remove the “Back to” link.
  • Hide the login error message.
  • Remove the login page shake.
  • Change the redirect URL.
  • Set “Remember Me” to checked.

How Will You Proceed?

WordPress doesn’t load your theme stylesheet as the login page isn’t part of the WordPress theme setup. So, you have to make your own stylesheet for the custom login page. Before that, you will create a new folder in your theme folder called Login. In this, make a new .txt file and save it as custom-login-style.css.

Once you have a CSS for the login page, you have to tell the WordPress to load it explicitly. For that, you will put this code in function.php

function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');

The resultant WordPress custom login page will look somewhat like this

resultant WordPress custom login page

Now, let’s see the particular CSS code to make specific modifications

  • Adding a Custom Background

You can add any background image to your login page. Just specify it’s correct name in the 2nd line of your custom page CSS. The code to set the background is as follows

Body.login
{
background-image:url("../image/login-page-bg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
  • Adding a Custom Logo

This is the most crucial step to mark a brand identity. You can add your own custom logo in place of WordPress logo. Save the custom logo image to the Login/image folder. You will do that as follows

#login h1 a {
background-image: url("../image/logo-1.png");
background-size: 75px;
}
  • Customizing the Login Form

Now, you will modify the Login form look to match your site appearance. You can set the padding, margin of the form. You will also like to change the background color, label etc. for this, you can refer the following sample code

.login form{
box-shadow:none;
padding:20px;
}
#login {
background: #FFF;
margin: 50px auto;
padding: 40px 20px;
width: 400px;
}
.login label {
color: #555;
font-size: 14px;
}
.login form .forgetmenot{
float:none;
}

Further to modify submit button look, you can set margin, border, height, width, the color of it. So, include these lines to your CSS

#login form p.submit{
margin-top:15px;
}
.login.wp-core-ui .button-primary {
background: #7B417A;
border-color:#7B417A;
box-shadow: 0 1px 0 #7B417A;
color: #FFF;
text-shadow: none;
float: none;
clear: both;
display: block;
width: 100%;
padding: 7px;
height: auto;
font-size: 15px;
}
  • Change the Login Logo URL

The Logo URL links to WordPress.org by default. You can redirect it to some other URL as follows

function custom_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

function custom_login_logo_url_title() {
return 'Default Site Title';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );
  • Remove the Lost Password Link

Lost password link is useful when you forget your password. But it can be misused so you can remove it. You will simply add this code

p#nav
{
display: none;
}
  • Remove the “Back to” link

The “Back to…” link lets users return to the homepage. But if you want a simple clean look, you can remove it. For this, you will add this

p#backtoblog
{
display: none;
}
  • Hide the Login Error Message

Sometimes users enter the wrong information by mistake, it will result in generating Login error messages. The reason could be any, either the username is incorrect or password is wrong. This message is useful for users but creates a gap as hackers can crack the user login credentials. They can then gain access to your site. So, it’s better to change the error message in function.php file as follows

function custom_login_error_message()
{
return 'Please enter valid login credentials.';
}
add_filter('login_errors', 'custom_login_error_message');
  • Remove the Login Page Shake

The login form shakes when the user submits the wrong login credentials. But if you don’t like this feature, you can remove this.

function custom_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'custom_login_head');
  • Change the Redirect URL

If you log into WordPress, it redirects you to dashboard directly. You can redirect all to the homepage except administrator as follows

function custom_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "custom_login_redirect", 10, 3);
  • Set “Remember Me” to Checked

Remember Me box is unchecked by default. You can change it to checked state as follows:

add_filter( 'login_footer', 'default_rememberme_checked' );
}
add_action( 'init', 'default_checked_remember_me' );
function default_rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

This was all about customizing a login page with code. You can try out all the modifications to simple CSS code.

 

2. Create a Custom Login Page WordPress using TemplateToaster Plugins

If you don’t have much coding skills, you can opt more convenient way to create a custom login page than coding i.e using plugins. There are a number of plugins available in WordPress repository to customize a login page. Though the popular plugins are as follows

Creating a WordPress Custom Page Login using Login Customizer Plugin

Login customizer is one of the most suitable WordPress custom login page plugins. Once you install and activate it, you can see it in under Appearance section of the left pane in the WordPress Dashboard. As you click on it, you can Start Customizing your login page as shown below

Appearance → Login Customizer → Start Customizing

create WordPress Custom Page Login using Login Customizer Plugin

It will redirect you to the Customizer screen. Where you will find the Login Customizer option. As you click on it, it will show you the default login page as shown below

Customizer screen of Login Customizer Plugin wordpress custom login page

From here, you will start redesigning it. The first option is to add a new Logo.

logo settings in wordpress custom login page

Here, you will select a logo image by browsing it.

logo image selection wordpress custom login page

Then set the Logo Width, Logo Height, and Padding Bottom. Click Change Image to set your custom logo instead of WordPress logo.

width, height, padding bottom settings of logo wordpress custom login page

Select Background option to add a background image to the login page. It will give a nice touch to the login page.

background image settings of logo wordpress custom login page

Click Select Image button as shown below to browse the required background image.

selection of background image wordpress custom login page

Once the image gets uploaded, click on Change Image to apply it.

applying selected image wordpress custom login page

Form Background option is there to change the color of form area. As here a little dark form background is set instead of white.

color settings of form areawordpress custom login page

You can also set a background color as shown below

form background color settings wordpress custom login page

You can change the form height, width, padding and border from Form Styling option.

form styling settings wordpress custom login page

Set the different attributes as shown below. And, you can see the visible effects as the form gets widened.

more form settings wordpress custom login page

Do the Field Styling by specifying the Input field width, Margin, Background, Label color as shown below

field styling settings of form wordpress custom login page

You can change the different attributes of a button like a Background, Border, Color from Button Stylingoption.

button styling settings of form wordpress custom login page

You can also set other things like Text color or attach a custom CSS from Other option.

other form settings wordpress custom login page

Then, publish this page to get your own custom login page.

Popular Plugins to Create a WordPress Custom Page Login

Some of the other useful WordPress custom login page plugins are as follows

 

1. Theme My Login

Theme My Login is a top-rated custom login page plugin. However, you can also create custom registration and profile pages, custom emails, etc. along with the login page. You will just configure the TML login settings by clicking the TML menu. The relevant features will be enabled and visible under TML option in the Menu. It also avails the custom login widgets. You can add a TML widget to the sidebar by visiting Appearance → Widgets.

Theme My Login plugin settings wordpress custom login page

  • Active installs: 100,000+
  • Rating: 4.3

 

2. Admin Custom Login

Admin Custom Login is a powerful custom login page plugin. It provides you a lot of features to edit background color and image, login form color, font size and position and much more. You can also add a background slideshow and social media icons on the form. All the designs prepared with it are mobile-friendly. It provides you a wide range of Google fonts and color schemes. It’s really simple to work in its setting panel.

settings panel of admin custom login plugin wordpress custom login page

  • Active installs: 50,000+
  • Rating: 4.8

 

3. LoginPress

LoginPress is another good custom login page plugin. It gives you lots of features to change the layout of the login page including logo image, width, height, padding, URL, and title, background image or color, login form image or color, width, height, padding, and border etc.

loginpress plugin settings wordpress custom login page

It provides the great feature to modify login error messages, forgot error messages, registration error messages, forget password hint message. You can do all modifications by opening up the Customizer that appears under LoginPress → Settings in the left main menu of the dashboard.

customizer settings of loginpress wordpress custom login page

  • Active installs: 10,000+
  • Rating: 4.9

 

4. Custom Login Page Plugin

Custom Login Page By SeedProd enables you to customize a default WordPress login page in minutes. It provides you a Real Time Customizer Editor to change logo, background, button, form, text etc. you can also add your custom CSS to a login page.

Customizer editor of WordPress Custom Login Page Plugin

  • Active installs: 3,000+
  • Rating: 5

 

5. Custom Login Page Templates

You can also use WordPress Custom Login Page Templates plugin to create a custom login page. You can upload your own logo and a full-width background image. It also has a feature to attach your own custom CSS.

custom login page settings wordpress custom login page

It provides you 5 different custom login page templates as shown below

different custom login page templates wordpress custom login page

  • Active installs: 2,000+
  • Rating: 4

 

6. Custom Admin Login Page WPZest

Custom Admin Login Page WPZest plugin enables you to create a custom admin login page. It has all the basic features to edit logo, background, form input fields, text and button etc. in addition to this, you can also add the Google reCaptcha in form. On the top of it, you can hide the Forgot Password Link or Back to Blog Link too. It enables you to create your own unique WordPress custom login page.

Custom Admin Login Page WPZest plugin settings wordpress custom login page

  • Active installs: 500+
  • Rating: 5

Wrapping Up

A custom login page plays a great role in social media engagement and email marketing. It should look like a part of the site layout. Putting efforts to customize a WordPress login page of your site is proportional to building your brand. It will give a personalized online experience to the users.

We would love to hear about your customization experiences. Please share in the comment section below.

Read More
January 24, 2019 0 Comments