How to Develop WordPress Themes

Developing WordThemes are very convenient these days. One does not require any prior knowledge. Here is the simple tutorial that will guide you to create WordPress theme.

What Makes a Theme Great?

Is it Good design? There are many WordPress themes which appear to be charming initially. But when you download it, you will realize that it lacks the basic coding standards. So, coding is necessary. It is easy to develop a WordPress theme, but a good website for eCommerce development requires a lot of efforts and planning. You can consider it by hiring WordPress developer who can professionally convert your coded HTML/CSS design and into a beautiful WordPress theme.

The theme which is designed to modern standards should meet some trends and expectations of a modern web design. Nowadays, CSS3 gradients, transparent boxes, font replacement and noisy background are in the online fashion. Earlier it was cursor trails, animated gifs, and flaming text.

Now let's start

If you are in the practice of writing code in your style, then you need to understand the architecture of the site and figure out how to read it. To overcome this difficulties WordPress has well-established coding standards for PHP, HTML, and CSS. Following these standards, it becomes easier for developers to read and modify your code. They create a baseline for collaboration; it is because WordPress is an open source, and same applies to the plugins and themes. The coding standards help to improve the readability.

The standards given below means your code can be read, understood, and modified.

Example:

WordPress coding standards recommend the following structure to ensure readability of CSS:

- Refer tabs for indentation. Avoid spaces
- Provide a line to each selector, which should end with either a comma or an open curly brace.

1 #selector-1,
2 #selector-2,
3 #selector-3 {
4         background: #fff;
5         color: #000;
6 }

Organize your Theme File
Every web project requires a different set of resources. Some applications work on desktop and works under a single language while few aim for mobile devices with various languages. Many projects may range anywhere from three to four (HTML, CSS, PHP, and JavaScript) languages. Moreover, the components of the themes can work on the side of the client or server, and initiate communication directly with WordPress.

Therefore, keeping your resources organized is vital to overcoming these complexity concerns. Failing in this will be challenging for designers, developers, or users. 

Theme file organization in short:

- Set up template files for different page components instead of one file.
- Keep the foremost template files within the theme’s root directory.
- Give CSS, image, page templates, JavaScript, and language files their directory.
- Be absolutely clear in file naming, prefix page template.

Be consistent to Template Hierarchy

The templates and files are used to produce different parts of the website. Some of them are displayed on every page, and others appear only in certain conditions. There is a hierarchy in WordPress, which represents, which template is to be utilized first and after that. If you do not provide the first option, WordPress will automatically use the second one. It is very vital to understand this hierarchy for WordPress ecommerce development as it familiarises yourself with the template hierarchy and ensures that you’re developing a correct template in the intended places.

Internationalize/Localise Your Theme

Internationalising your WordPress theme means you make it ready for translation. Localisation is the actual transfer of theme strings from one language to another. If you are fluent in another language, you might translate your theme yourself. Otherwise, you can, at least, give others the chance to do it for you.

Making your theme readable for non-English readers comes down to two acronyms: “i18n” and “l10n.” I18n is represented for internationalisation. Similarly, l10n is the numeronym for localisation. To do this WordPress uses the GNU gettext localisation framework. Special tools then parse the source code files and the translatable strings extracted into POT files.

The next step is to translate the text file inside the POT file into the target language. There are some important tools which can be used to create POT file: GNU Gettext, Pootle, Poedit and Launch Pad.

To Conclude

Test Your Theme

It is nothing more disgusting if you download a theme, which has a plethora of bugs, and no sooner people will stop using it. Therefore, it is essential to test the theme developed. Apart from this, if you are thinking to showcase your theme in WordPress directory, the validation team will not accept it. Therefore, check it twice before giving it a green signal.

How to Amplify the Speed of Your Wordpress Website

A site owner has only a few seconds to capture user's attention. And in this case, if the speed of your website is slow then it will be challenging. Therefore, it is very important for the website or services holder to maintain the speed of their website. In a study, it was found that Microsoft, Bing Team reported 3.8% of reduced user satisfaction and 4.3% loss in revenue by a 2-second longer delay in page responsiveness.

Thus, it is significant to find out, why your website is taking too long to upload and how to overcome it.

So here are some handy tips to increase the speed of your WordPress blog if you're looking forward to WordPress website development eagerly. Some of the tips mentioned below may boost the speed up your website considerably while few may take a fraction of seconds worth of difference to your page load times. If you have a highly informative website, and it takes a long time to load then you’ll want to squeeze every bit of optimization out of it.

1. Resize the Images

WordPress images need special attention as it may slow your WordPress website speed. So it is always recommended to resize your WordPress images. The image taken from a camera is 3000-4000 pixels wide and while the other featured images should be 600-800 pixels wide. WordPress users using window can use Pixlr for it. It is free of cost.

2. Removing unwanted Plugins especially third party

After hiring WordPress developer and converting your website to WordPress, there are several plugins available to install. They add extra functionality to your WordPress site. But unwanted and extra third-party plugins unnecessarily adds more code to the server. This adversely effects the loading time of the website. Therefore, we suggest you remove undesired plugins and search for what exactly what plugin is necessary required.


3. Avoid Backlinking

Backlinking is a process where that links from a Web page, back to your Web page or Web site. It is also called as Inbound link. The users may use the content which is a host on website's server. As a result, your server gets no privilege to you whatsoever. Thus, it is quite simple to prevent from stealing your server resources. You can avoid using hotlinking stuff from your website content and apply some codes to your server. It usually targets the images and other multimedia which are data heavy and can be added to your server.

4. Remove Unnecessary Eye-Candy

Many times there are design elements used in a Wordpress website which are just used for its good appearance and actually they are of no use. So hunt for such elements and try eliminating the as early as possible. Simply removing the slider may lead to lower conversion rate, but substituting it with simple text and links would increase it way above the level of the slider’s effect.

5. Cut down the HTTP Request

When a user lands on the website page, there are few corresponding files which are sent to that particular browser including an image, CSS files, and Javascript library references. This reduction of some objects can minimise the number of HTTP requests. Now, this HTTP requests can be reduced with the use of “WP Asset Clean Up”. It is important to note that, if your website carries more HTTP requests, your site will load slower.

So, these were few effective steps to increase the speed to your WordPress website. Now you can stop losing your time and take effective measures to improve the performance of your WordPress site today.

Inducing Responsiveness To Your Images Via CSS

In this modern age world, there are a lot of techniques for building responsive images. However, the techniques are not same due to variations in browser support and complexities. One can make use of the srcset attribute, but it is a complex way of implementing responsive images as it demands several images, markups and the new HTML attributes (not well supported outside modern browsers).

There are lot of people that go for HTML to WordPress conversion so as to make intuitive websites for their business on all kinds of devices irrespective of the size and its orientation. However, in this article, we will simply work on height and width of CSS, which will further make it independent from the browsers property and thus will work on all browser and CSS. However, it will require a fluid design layout for your website. The concept behind this is to use CSS to make images a percentage length unit or any relative unit for making their width re-sizeable and give auto value to the height property.

img {

width: 100%;

height: auto;

}

What's a Responsive image ?

In order to know about a responsive image, we can take an example.

Div acts as a container of an <img> element.

HTML

<div class="container">

<img src="image01.jpg" width="960" height="640" />

</div>

The container has margins on the left and right as the container has 96% width property. The max width is of 960px so that the layout do not appears too wide on a bigger screen.

The container contains a <img> element of 100% width, so that its width so as to make the width equal to its container irrespective of the viewport's size, thus this makes this responsive. Further, set the height to auto so that the image scales in proportion to the screen.

CSS

div.container {

width: 96%;

max-width: 960px;

margin: 0 auto; /* to center the container */

}

img {

width: 100%;

height: auto;

}

The <img> element is always responsive even if we assign a fixed height and width to HTML attribute as shown in the markup (i.e. width="640", height="960"). This technique is best suited for content which has a fixed set of dimension via HTML.

Putting Responsive images in columns

In order to display more images on a small screen, we try to scooch in images in a columns. We often get to see websites which display galleries in a thumbnail on a grid style.

In order to make images responsive in columns, we only need to lessen the width property of the CSS and assign a display property value to the <img > elements.

We further have a couple of layout schemes namely: A two-columns layout and three-column image layout for images.

Two- column layout for responsive images

To get a two-column responsive layout, you need to set the width property of the CSS to 48% or nearly half of the container. Though, you might be thinking why not to 50%. The reason being that images have margins so we need to keep room for them as well.

HTML

<div class="container">

<img src="image01.jpg" width="860" height="540" />

<img src="image02.jpg" width="860" height="540" />

</div>

CSS

img {

width: 48%;

display: inline-block;

}

Three-column layout for responsive images

You need to use the very same concept in order to get a three-column layout for responsive images, all you need to do is to set the width of the container to 32%.

HTML

<div class="container">

<img src="img01.jpg" width="860" height="540" />

<img src="img02.jpg" width="860" height="540" />

<img src="img03.jpg" width="860" height="540" />

</div>

CSS

.three-columns {

width: 32%;

display: inline-block;

}

Adding Conditional breakpoints

Adding conditional breakpoints for responsive images is a good practice, and thus when the images grow smaller, the columns can merge themselves.

This can be done via media queries.

In code snippet used below, we will make images display in single column in smaller device such as smartphone, two columns on slightly bigger devices on phablets or tablets and four columns on much bigger screen such as a laptop or desktop.

HTML

<div class="container">

<img src="img01.jpg" width="860" height="540" />

<img src="img02.jpg" width="860" height="540" />

<img src="img03.jpg" width="860" height="540" />

<img src="img04.jpg" width="860" height="540" />

</div>

CSS

/* For Devices of small size (e.g. smartphones) */

img {

max-width: 100%;

display: inline-block;

}

/* For Devices of medium size (e.g. tablets) */

@media (min-width: 420px) {

img {

max-width: 48%;

}

}

/* For Devices of large size (e.g. desktops) */

@media (min-width: 760px) {

img {

max-width: 24%;

}

}

Responsive images with full width

In order to get responsive images that always remain 100% of the device size, you need to just change the container's width to 100% and simply remove it's max-width property which is 960 px by default.

.container {

width: 100%;

}

img {

width: 100%;

}

These methods were no doubt simple and easy methods to cater mobile device users, but it's pitfall is that it will always deliver images of full size irrespective of the device used by the user. The smaller devices won't be able to take the advantage of high-resolution images which are served in full dimensions, and most of the devices won't be able to open the images even.

Further, if you would wish to improve the performance of your web app by serving your images after reading the conditions ( i.e. a low resolution and a smaller images displayed on small mobile devices and likewise with other devices.), you need to program with the srcset, pictures and sizes elements.

Steps to Import .docx in Your WordPress Blog

There are a lot of people who like to write in Microsoft Word rather than writing on the WordPress editor directly. Moreover, those who wish to import the .docx document in their WordPress and do not wish to copy or paste the document makes the formatting quite bad.

Moreover, with the amount of blogs that we need to put in to the website we can say that  We do certainly need a professional WordPress developer for technical task, but here i have put in efforts to make you understand the process of importing. In this blog, we will discuss how to import the .docx documents in a WordPress website without botching up with the formatting. 

Converting Docx to WordPress

Make sure to import properly .docx Files in your WordPress website. There are several users that prefer to write down their articles that are present in Microsoft Word that offer an inbuilt thesaurus, spell check,  styles, templates, and formatting.

Wherein, WordPress's default visual editor do not offer all these features. Moreover, guest blogging is another possible usage scenario which is required for the development.

There are various publishers that do not want to give guest writers access to the admin area of their WordPress; then they have to receive their guest posts either using the normal HTML as well as a .docx document.

At the end of this, you might require already have some content which is saved in .docx documents. Now the next step if Copying, as well as pasting from the docx file, will be a little difficult, especially if you need to copy the content from more than one document.

Keeping this in mind let us see how one can properly import .docx documents in their WordPress without breaking the formatting.

The next step is to Import .docx Documents in your WordPress

The very first thing you need to do is install and activate the Mammoth .docx which is a converter plugin. Make sure that you know the step by step guide on how to install a plugin. 

After activation, make sure that you create a new post or one can even edit a new one. Looking at the edit screen, you will get the Mammoth .docx converter meta box which is present below the editor.

Use the Mammoth docx converter for your WordPress

All you need to do is click on the choose file button so as to select the .docx file which is needed in the computer. After selecting the .docx file, the plugin will depict the three views for the documents.

In the Visual tab, it will help you see the document on your WordPress website. You will notice that it will ignore any styles applied to your .docx documents such as background color, text color, margin, padding, etc.

Rather than this, it will allow your theme’s stylesheet to control the display items on your screen. 

This also allows you to view the HTML, which was generated by the converter, and this can be done by just clicking on the button that says Raw HTML. Make sure to click on the messages button in order to check out any warnings or errors that one gets on the conversion.

You can check the look of the documents, and if you are satisfied with the way how the document appears in the visual tab, then it allows you to click on the ‘Insert into editor’ button. The plugin will allow you to insert you converted HTML in the post editor of your WordPress post.

Now you can keep on working on the post.

Applying Conditions to Menu For WooCommerce Subscribers

Have you been planning on starting up a WordPress powered membership site? Well, then you might have heard of the difficulties associated with creating membership sites with WordPress. Thankfully, building a membership site using WooCommerce can make the task considerably easier.

But remember, once you've created a membership site it's imperative that everything on your site oozes exclusivity for your logged-in users or WooCommerce subscribers. Thankfully, many plugins are available online that renders the ability to control the pages or portions of your website content that you want to show to active subscribers and hide from inactive subscribers.

Understanding the need to show/hide menu items

Of course, if you don't want certain pages to be accessed by non-members (or non-logged in users), you won't want those pages to be displayed in your site's navigation menu as well. Likewise, there will be some pages that might not be of much use to members. For instance, the pages that sell WooCommerce subscription products and/or services to guests aren't useful for active subscribers. And so, it's better to keep such pages hidden from the subscribers.
In essence, for a membership site, you should consider adding conditional logic to show or hide menu items based on user role. After all, it isn't a good practice to make your members (or active subscribers) shuffle around the content every time they visit your site. Rather, you should make it easy for your members to find quickly the features and services they've signed up for. In short, you must make your site's navigation menu more member focused.

So, what's the solution?

This is where the “If Menu” plugin comes in handy. The plugin helps in controlling the navigation menus for members. Through this tutorial, I'll help you learn how you can create a menu adjusted for your active WooCommerce subscribers. Also, you'll get to know about the plugin and how it can be used to determine whether a subscriber has an active or inactive subscription. In reference to this post, we'll be using the following two plugins:

• If menu plugin
• WooCommerce Subscriptions

Note: Before proceeding with the process of using both of the above mentioned plugins, make sure that they're installed on your site.

Let's get started

For adding conditional logic to menu items you'll need to configure:

• Active or inactive roles of your WooCoomerce subscribers.
• Menu items for members (i.e. active subscribers)
• Menu items for guests (i.e. non-logged in users)

A list of sample memberships included in the image.

Let us now have a detailed overview of all the above listed key points one by one:

Step 1 – Configuring Active / Inactive Roles of WooCommerce Subscribers

Before you configure the menu items for your WooCommerce subscribers, you'll first need to set up the roles of active or inactive subscribers. For this purpose, click on the WooCommerce option from your WP admin navigation menu. Next, click on the Subscriptions tab, and from here set up the active/inactive subscribers roles.

Bear in mind; active subscribers are assigned the “Subscriber” role, and inactive subscribers are assigned the “Customer” role by default as shown in the below image:




Note: You can also choose to set up custom roles for your subscribers, by using WordPress plugins such as User Role Editor.

Keep in mind that the roles we'll assign to active and inactive subscribers will help us in showing or hiding certain menu items.

Step 2 – Configuring Menu Items for Active WooCommerce Subscribers

So, now that you have set up the roles of active (and inactive) WooCommerce subscribers, next you need to decide which menu item you would like to show to your active subscribers. Here, we'll need to make use of the If Menu plugin.

The 'If Menu' plugin lets you show/hide your website primary navigation menu items on the basis of conditional statements, such as user roles, whether a user is logged-in or not, etc. But, to make use of the plugin, you'll first have to make sure that the plugin is enabled.

As soon as the plugin gets enabled, a new checkbox option labeled “Enable Conditional Logic” will be added to each menu item. For this, go to Appearance → Menus, and from there you can start making edits to your navigation menus.

Next, click on any of navigation menu item and then make the ‘Enable Conditional Logic’ checkbox checked. And then, you just need to select whether you would want to show or hide the selected menu item. You will then need to choose any one of the corresponding conditions from the drop down box.

Since we need to show particular menu item just to your active subscribers, we have to choose to show the “Subscriber-only” page link only if “User is Subscriber”:

Once you have selected a condition, just hit the “Save Menu” button.

Step 3 – Configuring Menu Items For Non-Logged in Users

In this section, we'll talk about the process of showing your menu items to guests (or non-logged in users) of your membership website. To do so, you just need to click on the “Hide” option if the corresponding condition is set to “User is logged in.”

Click here, to get more information about subscription


Wrapping Up

Apart from making your membership website pages or part of the content to members, you should also consider adjusting the navigation menu items based on user statuses. Doing so will save the time and efforts of your active subscribers directly shuffle through the useful pages that can be accessed by them. Likewise, you don't necessarily need to show the pages that cannot be accessed by guests or inactive subscribers.

Hope this post will guide you in controlling the navigation menu items of your WordPress membership site with utmost efficiency.

Subscribers aren't enough. Who is reading your Blog?

Well, that's not enough if you own a blog and publishing content on regular intervals. Understanding your audience and keeping a check on them regularly is a crucial step to success. It assists in learning and helps to find out which blog page are very popular among the users. How do the users land on those blog pages? And what else entertained the user?

Undoubtedly, blogging is a huge pond for bloggers to dive. And WordPress is a significant platform to reach millions of audiences across the globe. So here in this article, we shall discuss how to find out who reads your blog and who are the subscribers to your WordPress blog.

Understanding about Google Analytics

Google Analytics is a freemium web analytics service which is offered by the tech giant, Google. It tracks the visitor's site and reports about RSS feed subscribers. First, one is required to visit the Google Analytics websites and signup for an account.

Setting up Google Analytics for WordPress using MonsterInsights

To set up this MonsterInsights plugin you do not need to hire a WordPress developer for it. It is a simple and a quick procedure for the same. And if you've already installed this plugin then you may skip this step.

After installing the plugin, you need to install and activate the Google Analytics by MonsterInsights plugin. Here is a simple guide to building a WordPress plugin.

At the time of activation, you need to visit Insights > Settings page and click on ‘Authenticate with your Google account’ button. It will open a dialog box which will ask you to give permission to the Google Analytics plugins to access the users Google account. You may proceed by clicking the allow button.

Once you are done with this, the plugin will now fetch your account settings from your Google Analytics account. Now you need to select your analytics profile by clicking on select a profile. You may now click to save the changes icon to save your settings.

How to track RSS Links in Google Analytics

In addition to tracking visitors on your website, Google Analytics can also track links to your website from other sources like your RSS feed, email newsletter, social links, etc.

You can add your URL parameters in case you're sharing links manually. Although WordPress automatically generates the links in your RSS feed and newsletter.

You may track your RSS feed links using the Google Analytics by MonsterInsights plugin in WordPress. You may proceed with the following procedure.

To visit the Settings click on to Analytics > Settings in the WordPress admin section and click on the Advanced tab. Check the box next to ‘Tag links in RSS feed with campaign variables’ option and click on the save changes button.

That's all!

Find the subscriber Information

The first major step to find subscriber information is to give your users the ability to subscribe to your blog through an email newsletter. The two primary email marketing platform among our users are MailChimp and AWeber. Both of the subscribers come with its own built-in analytics.

I hope this blog has helped you find who reads and subscribes to your WordPress blog.

Factors to Consider before choosing a WordPress Plugin

WordPress plugins are useful tools that help in extending the functionality of a website or blog. However, with over 37,000 plugins available in the WordPress Plugin Repository, choosing the most suitable ones for your site can be overwhelming and challenging no matter whether you're a beginner or an experienced usee.

In this post, I'll share you with some important aspects that you should consider when choosing a WordPress plugin for your website.

Before Proceeding Further

Remember when you're searching for a plugin, make sure to jot down all your requirements about what you want a plugin to do. In essence, create a checklist containing a set of features that you're seeking in a plugin. Not to mention, choose a plugin that offers features to meet your exact website needs.

You don't necessarily have to choose just one plugin that can do all the work for you. Instead, you can consider installing 2 or more plugins if they together can facilitate you with the desired features. But, avoid installing too many (and unwanted) plugins in your website.

You can easily search for the plugin in the WordPress plugin directory. The plugin directory comes with thousands of free plugins. The official plugin directory looks something like:

As you can see in the above image, you can find all the featured plugins as you scroll down the page. You can also easily find the most popular plugin options, by clicking on the “Popular” tab and so on. Being able to find free to use plugins from one single destination is indeed good for beginners, but the overwhelming number of plugins makes it difficult to pick the best plugin.

Now, let's move ahead to understanding some key aspects to choose the best WP plugin worth considering.

Key Aspects For Selecting a WordPress Plugin Worth Exploring

The best way to know which plugin you should download for your website is to compare the plugins based on information like ratings, reviews, compatibility, etc. In this section, we'll be talking about some of the most important factors you should take into account to decide which plugin will best suit your needs. 

1. Do not scour over the net to get your desired plugin.

Yes, you heard that right! Most of the WordPress users have a habit of scouring the net to learn about the best WP plugins. But, amidst thousands of search results, finding an appropriate plugin for your site can be a tedious process. Instead, one best way to find a good plugin is to know if any bugs are found in a plugin (especially the one you would like to use for your site). To do so, simply head to the plugin's support page on wordpress.org.

The support page for the plugin won't only show the bugs that have been reported by other plugin users, but will also help answer your queries (if any) relating to a WordPress plugin.

2. Be wary of using disallowed plugins.

While a plugin does help in extending a site's functionality, there are a few plugins that can slow down your site because of using excess resources. These kind of plugins are banned from being used on sites. You can know about such plugins, by looking at the WP Engine list of disallowed plugins.

Make sure not use any plugins on the list, as they're banned since WP Engine provides all of the features (offered by different plugins) themselves like caching, creating backups, etc.

3. Consider using plugins of well-established contributors.

Lastly, it's worth looking at who developed the plugin you want to install on your site. Check out if the plugin author is a well-established member of the WordPress community or not. In addition, do make sure if the plugin creator is a contributor to the WordPress core, have they authored other well-regarded plugins and so on. You can find the profile of plugin authors in the WordPress.org plugin repository.

4. How many times a plugin has been downloaded?

The first thing you should consider when choosing a plugin is the number of times it has been downloaded (also referred to as active installs). The more a plugin will be downloaded, the more popular it will be. A popular plugin is the one that best fit users' needs, is well-maintained by its developer, have fewer or no issues and works well compared to the plugins that are downloaded only a few times. 

For example, as you can see when the two shortcode generator plugins, i.e. Shortcodes Ultimate and Easy Bootstrap Shortcode are compared based on the number of downloads, the former one with 4 lakh active installs beat the second plugin with 40 thousand active installs. 

5. Which plugin has a good user rating?

Another key factor that will help you decide which plugin is better compared to other available options in the similar category is to check out the Plugin Ratings give by users. The classic star rating of 1 out of 5 stars is used to rate a plugin; the plugin getting 5 out of 5 stars is the most popular and high-quality plugin. It is advised that you should avoid using a plugin having a low rating (ideally less than 3-star rating) unless it's a new plugin that is yet to be explored by users.

You can check a plugin's rating from the main plugin directory window, as shown in the screen shot below:

Also, you can view the rating of a plugin given by users by opening a plugin page:

6. Which WordPress version the plugin supports?

Not all the plugins will support the latest version of the WordPress platform. And so, make sure that the plugin you want to use is compatible with your WordPress website. In case, the selected plugin does not work on the latest or old version of your website, then it won't possibly work on your WP site's version.

You can know about whether a plugin will work well on your website version or not, by checking out the “Requires WordPress version“ option given in the sidebar section of a plugin page:

7. Read user reviews on a plugin.

One clear way to determine if a plugin can help meet your website needs or not, is to read about users' experiences about the plugin. Reading user reviews regarding a plugin will make you understand things like how a plugin helps in solving an issue or what kind of functionality it adds to a WordPress install.


Final Words

Through this post, I've tried to cover the most crucial aspects that you should consider when you're about to select a plugin for your WordPress site. You can decide on choosing a plugin by viewing the times a plugin has been downloaded, or by seeing the ratings and reviews given by other WP users. Though the above discussed factors might not help you in choosing 100 percent perfect plugin for your site, but will definitely let you make an informed decision.

Note: Avoid choosing a plugin that hasn't been updated since a long time.