Enjoy this summer with staggering 30% OFF. coupon SUMMER30

Joomla and WordPress Tutorials from experts.

The Complete Guide to Building Multilingual Joomla Website

The Complete Guide to Building Multilingual Joomla Website

Translating your website into several languages will increase your audience notably.

Adding the multilingual functionality to your Joomla site is just a few instinctive steps away. Let me do it even easier for you.

This tutorial is going to show you how to configure a multi-language Joomla site. To perform this you need to go through the following steps:

  1. Install a new language
  2. Create a new content language with new parameters
  3. Enable Language Filter plugin
  4. Setting up Language Switcher module
  5. Create menu for every installed language
  6. Create menu module
  7. Multilingual articles

Step 1: Install a new language

At first, let's add the language files for the desired language we want to use as the second language on our site.

So, log in to your Joomla admin panel. Now, to install the language pack you need to navigate to Extensions -> Languages.

In the screen that opens, select "Install Languages".

Another screen will be opened, tick on your desired language pack and click "Install” button.

You will see your installed language packs in Extensions -> Languages -> Installed.

Step 2: Make a new content language with new parameters

The next step is to originate a content language.

Although you have already installed a second language, still you need to add the appropriate information for this languages.

In this step, you need to navigate to Extensions -> Languages -> Content Languages.

You will see here, the default content language, to add a new content language click the "New" button from the top menu.

A new screen will open, insert the required information according to the selected language.

Look at the image below. There are five required fields.

Title: This fields for language name that will display in the Joomla backend that you can assign a specific language for your articles, modules or other items.

Title Native: Here you insert the original language name which will display in the language manager and the list of content languages.

Language Tag: The language tag consists of the language code. If you are not sure about it, you can find it next to the language name in the list of installed languages at the language manager section.

URL Language Code: This is the code that will appear in the URL. For example, here I insert "de" hence, the URL will like this when I select Germany as the desired language. www.example.com/index.php/de/

Image Prefix: This is the language code. Joomla uses this code to display the country flag images enabling the visitors to select a site language.

Step 3: Enable Language Filter plugin

The language filter plugin enables the CMS to recognize the different installed languages and display only the content relevant to the current language.

Just navigate to Extensions -> Plugins and search for the “Language Filter” Plugin and enable it.

Also, enable the "Language Code" plugin. This plugin installed with the Joomla engine by default.

Step 4: Setting up Language Switcher module

You will also have to add a menu module to display the language list on your site.

Navigate to Extensions -> Modules, a new window will open. Click “New” and select “Language Switcher” from the list.

It will open an editing window.

Insert the title as it is required, though you have an option on hand to display the title or hide.

Set the position where the switcher module will visible and set the switcher status as public.

Look at the image below. A language switcher section is visible on the right sidebar.

Step 5: Create menu for every installed language

You will need to create menus for each content language to display multilingual content on your site.

To perform so navigate to Menus -> Manage -> Add new Menu.

After that insert the "Title" and "Menu Type" and hit the save button.

Do the same process for every content language that you wish to display on your site.

You will find all your created menus in Menus -> Manage later and also edit them.

So now you need to add items in each menu, the easiest way to perform is to open your main menu then select any item and then hit the "Batch" button top of the page.

In this process, we are going to copy all the menu items from the main menu to each menu.

A popup will open, you need to set the language to which you are going to copy the item and select the menu to where you want to copy this.

Check copy from radio button and press "Process". Once it was done, do that for each one.

Now you have a menu for every language and several items on it.

You can open each menu one by one, make an item to default page and edit them.

Step 6: Create menu module

Just navigate Extensions -> Modules then select a menu from the list.

In the module section, set position for selected menu.

In advanced section, insert "nav-pills" in the menu class suffix field.

And then in menu assignment section, select "Only on the pages selected" option.

It will display only the items which you want to show in your menubar.

So, uncheck the other languages menu items.

Step 7: Multilingual articles

Let's create a multilingual article to see how it works.

Create a new post, set the language of the post in the content section.

Make a copy of this post or make more copy as you want. Set different languages for each post.

And now again edit the post, go the "Associations" section, associate the post with the copy of this post.

Save and close it.

As a result, when you click a flag it will change both the menu and the articles to the desired language.

Look at the image below, how I associate the posts to each other.

So, we are at the finishing stage. Just take a look how it works.

Make this process easier with an extension:

In the first section, I talk about the manual process.

Now here, in the second section, I'll show you how to create a multilingual website using an extension.

In our previous article we discussed about Neno translation extension for joomla and today I am going to use the another popular extensions JA Multilingual Component.

It's free Joomla multi-language translation extension.

This extension is light in weight but robust at speed. To boost up your multilingual website, it will do almost everything what you need.

Let's see how it works through the following steps:

  1. Download JA Multilingual Component
  2. Component Installation
  3. Translate Language

Step 1: Download JA Multilingual Component

At the beginning stage, you need to download JA Multilingual Component from their official site.

It is free of cost. To download this extension, you need to create an account on their site because they don't admit to providing their service to non-users.

Step 2: Component Installation

Navigate Extensions -> Manage -> Install.

In the new window that opened, you will see a file upload option.

Just point to your download file and hit Upload & Install button. After a few seconds, the extension will successfully install.

Step 3: Translate Language

Navigate Components -> JA Multilingual.

Here you see a notification that asks to configures authenticate API (Application Programming Interface) to translate the site.

Just press the Options from the top. Insert the API key and save and close the current window.

You can install languages as you want and then press Translate All to do all tasks immediately. Wait a few moments until it is done.

Take a look how it works.

Final Words

Hope you enjoyed this tutorial, and now you can create a multilingual site using Joomla. Let us know about your further query and share your opinion.

How to Identify And Fix Broken Links on Your WordPress Site

How to Identify And Fix Broken Links on Your WordPress Site

Broken links refer the links on your website that directs or points your visitors to a page or a file that no longer exists. It is also known as dead links.

How do you feel when you click on a link and end up with “404 page not found” error? In general, you become annoyed with this kind of actions.

Truly, Broken links are annoying and create the bad user experience. And the most important issue is, it's bad for your website’s SEO.

So how do you know if you have any broken links?

There are several process to check for broken links depending on which platform you are using.

Google Webmaster:

In general, Google Webmaster Tools provide a free service for all kind of platforms. It will show you the “crawl errors”, which include your broken links.

You can see exactly how many broken links you have on your website and exactly which URLs no longer existed and were generating 404 errors. Google Webmaster also provide you other useful diagnostic information for best SEO practice.

Broken Link Checker - WordPress Plugin:

If you are using WordPress platform, there are lots of plugins to help. Among them, the Broken Link Checker plugin is the most popular and is active on more than 400,000 WordPress sites.

This plugin can detect your articles, comments, and other content within your website, for redirects, broken links, and missing images and prevent search engines from following those broken links.

Methods to fix website's broken links:

After creating a list of broken links on your site, you can proceed to repair them. There are a few methods in which you can do this.

Correct the Links: If you have linked to a website with incorrect information or URL, you need to edit all the URL and replace it with the correct value.

Regenerate the Links: If you have referenced a resource that is no longer exists, or has not updated in a couple of years, just replace the referenced website with an alternative resource.

Remove the Links: You may want to remove the link permanently if it is no longer exists, or is no longer relevant.

Here I'll show you how to remove broken links using Google Webmaster Tools.

Step 1: Open your webmaster tool account and click on Crawl Errors as shown in the screenshot. Now click on download and saves these as an excel file.

Step 2: Go to Google index at left most side and then click Remove URLs. Then a new page will open which would ask you to Temporarily hide request. Click on Temporarily hide request and enter one of your broken link URL, which you had previously stored in your excel file.

Step 3: Press the button of "Submit Request".

Step 4: In this step, you will get a notification about "Your requested URL has added for removal".

After few hours, your broken links or URLs will be removed from the web and will never disappoint your organic traffic.

Finishing Words:

Which platform you are using it doesn't a big issue, but broken links on any site are not good for a website's SEO.

Hope this post will help you to fixed the broken links successfully. Let us know your experience or suggestion through the comment section.

How to Create Custom Shortcode for WordPress

How to Create Custom Shortcode for WordPress

WordPress shortcodes introduced in its early version 2.5 before about six years ago and since that time, shortcodes are used to increase the functionality of WordPress.

The shortcodes are a particular tag that you can enter into a post or a page which gets replaced with different content when visitors are viewing the post or page on the website.

You’ve probably used shortcodes before, but did you know it’s pretty easy to create your own, with no plugins necessary?

In this tutorial, I will show you how to build some simple WordPress shortcodes for the subscription that will help you to create any functionality in future as you like.

You can directly create your shortcode function in the functions.php file or build a simple plugin. I'll show you both but at first, I go through the functions.php file.

Simple Facebook Follow ShortCode

In the beginner part of this tutorial, I will create a simple shortcode that will do the similar task in every time whenever you type it in the editor.

First, you need to create the callback function that will return the message what you want to show (in shortcodes we don’t echo anything, everything returned).

Just go to your functions.php file and paste the code snippet at bottommost.

function subscribe_link(){
    return 'Follow us on <a rel="nofollow" href="https://www.facebook.com/ThemeXpert/">Facebook</a>';
}
add_shortcode('subscribe', 'subscribe_link');

Test the ShortCode

Our shortcode is ready to use. Just add the code [subscribe] to your post or page wherever you want to show it.

See the image in below; it works correctly.

How To Add Parameters in Shortcode

Usually, you need to add a dynamic functionality in your shortcode and don't want to show the same content in every time.

As I am talking about subscription, there are lots of social networking sites in today's world; you may also want to get touched with your audience through many social sites. Therefore, I will show you how to add a parameter to the shortcode to change URL of social sites.

Again, just go to your functions.php file and add the following codes in there.

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('subscribe', 'subscribe_link_att');

Test ShortCode Parameteres

Now insert the following code to your post or page wherever you want to show it.

[subscribe link='https://www.facebook.com/ThemeXpert/']
[subscribe link='https://www.twitter.com/ThemeXpert/']

So, here is the image that shows it works correctly.

Working with Content

You have noticed that the previous example shows the direct link to social sites, but this process is not user-friendly. It looks good if it is possible to bind the links in HTML anchor tag.

Therefore, I will now show you how to working with contents within a shortcode.

It is quite same with the previous example just a tiny differences.

You need to add one extra parameter in the function and initially declare its value as null. And then call the do_shortcode function to use the contents.

See the following code.

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);

    return 'Follow us on <a href="/.$a['link']." style="color: red">'.$content.'</a>';
}
add_shortcode('subscribe', 'subscribe_link_att');

Testing Content ShortCode

Insert the following code to your post or page.

[subscribe link='https://www.facebook.com/ThemeXpert/']Facebook[/subscribe]
[subscribe link='https://www.twitter.com/ThemeXpert/']Twitter[/subscribe]

Look at the image. I have add style in the anchor tag. Hence, the link text looks red.

ShortCode with a Plugin

If you don't want to customize your functions.php file, you can create a simple plugin to utilize this shortcode functionality.

To create a plugin just go to your plugin folder and make a folder named subscriptions and create a PHP file inside it with the same name, that means the plugin folder name and PHP file name will be same.

Now add the heading details of the WordPress plugin. You may follow the example in below:

/*
Plugin Name: Subscriptions
Plugin URI: http://example.com
Description: A very basic test plugin for subscriptions
Version: 1.0
Author: ThemeXpert
Author URI: http://example.com
License: GPL2
*/

Cut the code from your functions.php file which you added a few minutes ago and now insert here in the plugin file, below the heading information of plugins file.

Now you can see your plugin in the plugins directory. Just activate the plugin and follow the same process as before.

I hope you have enjoyed this whole tutorial on creating a unique shortcode for your WordPress website. Share your opinion through the comment section.

How to Add Custom Fields in Joomla Articles

joomla_custom_fields

Have you ever search for best Joomla CCK that allows you to create Joomla custom fields within Joomla core articles? I know you find a lot, but failed to find a suitable advance custom field for Joomla.

To provide ultimate flexibility and empower to create unlimited category specific or standalone custom field in Joomla articles, We, at ThemeXpert HQ has cooked a powerful Joomla extension called Xpert Custom Fields (XCF).

Why we developed the Joomla CCK extension called Xpert Custom Field (XCF) ?

Glad you asked. We regularly help Joomla developers to accomplish their projects perfectly. The thing we find common that developers are found spending extra hours to add Joomla custom fields support to satisfy their clients requirement.

To kick away all above limitation, we developed this advanced custom field extension. The extension allows you to create vast array of custom fields including multiple field types without touching single line of code.

Features

  • Joomla Article Support + More coming
  • Unlimited Fields Group
  • Customized Rules for each group
  • Joomla Event support
  • 7 Fields + More coming
  • Shortcode Plugin to access the field data inside article
  • Intuitive API for developer
  • Category specify and standalone field support
  • Multiple event support

Download Xpert Custom Fields Now

How to add Joomla custom fields in Joomla articles?

I assume, you’ve already downloaded our XCF extension. I ain’t going to discuss about the installation process. The step is not different. Just head to the Extensions > Manage and install on your own. After installing Xpert Custom Fields(XCF), the entire process to get started is simple. For your convenience we’ve created a video tutorial for you. Have a look.

Don’t like to watch tutorial video? I have chunked down the entire process in easy steps. Let’s get it.

Step 01: Create Field Group

After installing XCF, navigate to Components > Custom Fields - XCF. In the Joomla Custom Fields manager, you will find two different tab in the right sidebar of screen. The sidebar includes Group and Fields. Before adding a new custom field in your Joomla Article, It requires to create group first.

Click New button but make sure you have Group tab selected. Provide group Name, Content Type, Category, Description, Event and Status. Click save and close when done.

creating_field_group

Name : Used for organizing the groups in back-end. Try to give some meaning full name.

Content Type : Define where this group of fields load. Right now it only support Joomla Articles and more coming.

Category(PRO) : For which category the group fields will load. If you want this group of fields load on all category you can select 'All'. You can specify specific group to load specific category.

Description : Group description only use in admin area to give your more details about the group.

Show Event : You can select where this group filed data will display. They includes After Display Title, Before Display Content, After Display Content and None.

Step 02: Create a new field

Select Fields tab and click New. Add Field label, Name, Group, Type, and Status.

creating_a_new_field

Field Label : Give your field a label so you can easily recognize it in backend.

Field Name : Field name is used to call the field from article editor or code. This is very important to do not put any space and special charterer in Field Name.

Field Group : Select group for this field you have created on Step 1

Field Type : Type of date you are going to receive. If you need simple text then select 'Text' field. If you need image the select 'Image' field.

Field Instruction : Give instruction for this filed and it will show in popup. When you added all field data successfully, click save and close button.

Step 03: Add custom field in a Joomla Articles

Create a new or open an existing article where you want to present your custom field data. You can notice in the following image, a tab titled Xpert Custom Fields. Another button called Custom Fields added adjacent to editor bottom.

Add_custom_field_in_joomla_article

Get into Xpert Custom Fields section and insert the data according to their type. For demonstration we added field to take image input.

adding_custom_field_in_Joomla_article

After adding all further necessary data, click save and close. Head to the article single view in frontend. As the follow image indicates, Advance custom field is working great in my end.

adding_custom_field_in_joomla

Step 04: Show field data using Shortcodes

You may not want to show your custom field data according to the event provided. Because Joomla provides only 3 events, allow to present your custom data After Display Title, Before Display Content, and After Display Content. What if you want to show this data middle of the article ?

To give ultimate power on your custom data presentation, we have created shortcode plugin. To use your custom data anywhere in your Joomla article, head to the field group, change After Display Content to None from Show Event dropdown.

show_field_data_using_shortcode

Now head back to the article edit screen, place cursor where you want to display the field data. Click on Custom Field button down to the editor, and select the desired field button to insert shortcode in your editor.

show_field_data_using_shortcode

How to add layout override for Xpert Custom Field(XCF)

The default look of Xpert Custom Field may not suit your site look and brand. So we have added a super capability to add personalized look according to your brand. But I ain’t going to cover this this feature in this article, I have prepared a separate article for you. Till then stay tune to ThemeXpert Blog

10 Secret Ways to Secure Your WordPress Websites

10 Secret Ways to Secure Your WordPress Websites

WordPress website security is the single and most prioritized concern, that keeps every webmaster and website owner zoned out scanning for security flaws in their website. To keep their websites away from unexpected hacking, some site owners appoint ethical hacker and some develop custom CMS. But both solutions are costlier, simultaneously time consuming, but above all risk remain unchanged.

According to Forbes, about 30,000 websites around the web are hacked every day. But the interesting fact is all of them are not WordPress websites.The number is miscellaneous in total. But what’s happened if your WordPress website is hacked or injected with the malicious code or malware. I bet it costs a lot of money, traffic and couple of unrest days to undo whole website. We had our demo server hacked last year because of a plugin created security leakage, that cost us loss of customers, time, money and traffic.

Now the question how to keep our WordPress website away from unexpected hackin? Site hacking is not confined to some countable numbers, the reason could be unknown or many. Sometime it's becomes difficult to find where to start or what works well to enhance your site security. You might be thinking WordPress is itself vulnerable, right? No, WordPress core is secured and WordPress Codex provides numerous effective tips to make a WordPress website more secured.

 

But on top that there are a lot more steps should be taken to improve the security of your WordPress website. It means the more you take measures to secure your WordPress websites, the more you can put strong defence against the hacking. Here are 10 steps, you should take while your WordPress site installation.

01. Use Themes and Plugins from Trusted Source

Over the web you’ll found an abundant source of WordPress themes and plugins. If you are accustomed to picking up them from random source, your site security will be at stake. Do you know why? Because anyone can make themes and plugins without having knowledge of security best practices of WordPress and ship them at your reach anytime.

Now the concern is how do we select right themes for our site, right? It’s simple, find a reliable theme provider widely appreciated by their clients around the world like ThemeXpert. We sell premium WordPress themes appreciated by about 70,000 client worldwide. If you’ve tight budget for WordPress themes & budget, you can head for WordPress themes and Plugin directory. Here can find quality FREE WordPress themes and plugins. You can use them and customize them for extensive usage.

But before downloading, look for the template update record, rating and review. otherwise let it goes. Because these themes and plugins are reviewed by volunteers. Who only check for best practices and security flaws initially, but they never check for malicious or sloppy codes again when a new update for themes or plugins is provided.

02. Use Strong Administrative Password

Having WordPress themes & plugins from trusted source is not enough to secure your WordPress websites from hackers. You site could be hacked because your weak password selection for WordPress administrative account. Now the question is - what denotes weak password.

Weak passwords refer to any password that can be easy to guess and find out. According to SplashData, the most common passwords for both 2013 and 2014 were “123456” and the runner up was “password,”

If you’ve select password like, hackers may be able to sign into your website and take complete control of it. such an hacking can easily avoided by using a strong password incorporated with both uppercase and lowercase letters, numbers and punctuation. You can also go the random string unreadable for humans.

Suppose, you’re going select a memorable password such as “My name is Ahmed Eshaan & I am working as application developer at ThemeXpert since 2014” turn it password as “MniAE&IawaadaTs2014”. Now tell me, can you guess my password without my reference given before? I guess, you won’t and probably hackers will not. My personal recommendation would be to install security plugins like Wordfence Security, Bulletproof Security, Ithemes Security and more. Because such a security application alerts you to takes effective measures to secure your site.

03. Keep your WordPress Version Updated

WordPress has immense contributor community, contributing to enhance WordPress everyday. As a result WordPress brings out newer version regularly, that packed with important security updates, new feature, fix for bugs and so on. If you forget to apply those updates into your existing WordPress site, that includes the latest security fixes, it means you are attracting hacker to hack your site.

To update your WordPress version, head over to Dashboard >> Updates, and update WordPress version, theme and plugins.

04. Change the Default Admin Username:

When you setup your WordPress website first time, you’ll find admin would have been set as username by default. If you run your website without change default username, it means hackers have only to guess your site password.

So, change the default username immediately just after your kickstart. If you do change it, it means you’ll be one step safer and hacker will be one step away from your site hacking.

05. Check your File Permission

Servers play important role to secured websites from hacking. There are various types of server out there in the market like managed server and unmanaged server. Manage server is managed by hosting provider and you don’t need worry about file permission. If you’re using unmanaged server like Linux or Unix server, you’ve manage it on your own with full access to your folder and file permission,, which either provides or limits access based on the settings you choose.

If you inadvertently make your website files and folders access level too permissive, anyone can access your site important files and documents anytime. If don’t know the details of file and folder permission of your website, here WordPress Codex created an in-depth guide on file permission.

06.Keep Regular Site backup

The possibilities of your being hacked is numerous, If you keep proper backup of your website files and databases. you can safely undo the rest of the hacked site without any hassle. The process of keeping backed of a website is simple and there are some free and premium useful WordPress plugin available in the market like VaultPress, BackBuddy, blogVault and a more. If you want to scan those backup further more, Here we have created a details guideline.

Make sure you're running your site having backup regularly. But it could be varied from site to site, and number of changes your make daily or weekly basis. It depends on you. If you’ve site like enterprise level, I not only recommend you to keep regular update but also save the multiple updated copy in different servers in different location. In your website or your couple of servers are hacked, your can recover everything without losing anything.

07. Install a Security Plugin

Even since I started using WordPress security plugins, I won’t go back to not using one. When I look at the statistics, and found; how many hundreds of times in a day my sites are hit by an unexpected attack that’re also get blocked by WordPress security plugins.

Once one of my website really gets hacked and malicious code was injected which was responsible for adding backlinks on my website to the spam sites. Even I noticed when i tried to share a blog post from Facebook and twitter, the preview would replaced with the title and content with spam contents. You might be thinking why my site get hacked in spite of security plugin being enabled there, right? I forgot my WordPress admin password, tried severl attempt to login. Consequently The security plugin blocked my IP and I couldn’t get on the site anymore. So, I login the server and removed the plugin.

I had to start fresh to redo my site from scratch and enable a WordPress security plugin. Now the question is what are the best WordPress security plugins? In my opinion choose those plugins which offer offer anti-virus, firewall and anti-malware services. Some of them can even help clean up a hacked site if you still have access to install it such as Wordfence Security, which works for both single and Multi-site installs.

Here are some other plugins that can help you amp up your security:

This is just a sampling of the many out there that you can peruse at your leisure.

8. Limit login attempts

Brute-force attack is pretty common in the today's web. Where hackers and abusive bots try to crack down you login credentials by systematically checking all your possible keys or passwords until the correct match is found. In this case you didn’t limited your site login attempt, you might endanger yourself from unexpected trouble.

If you have strong credential enabled for your login verification, that would be great. But your site becomes unexpectedly slow and you may lose traffic and revenue altogether while attacking. If you thinking how to limit login attempt to be away from such hassles, that is simple because nearly all security plugin come with this feature right out of the box.

Though attackers attack a website from a large number of different IP address, but security plugins still can put strong defense as an addition precautions.

9. Disable File Editing Via The Dashboard

WordPress default installation allows administrators to edit core files of a WordPress website right from dashboard navigating Appearance > Editor area. If you have put strong defence for your site security and chances of hacking pulled down to the zero. That would be great you are the safe.

But In case hackers managed to takeover your site admin access cracking down your login credentials, you would be in trouble. They can edit your site’s core files easily and execute what code they want to. If you want to be keep your site safe a bit further, add the following code in wp-config.php file.

define( ‘DISALLOW_FILE_EDIT’, true );

10. Avoid using Free WordPress themes

From ThemeXpert we never conformize quality and security best practices while shipping Free WordPress Themes. But generally our recommendation goes for not built websites on Free themes, if possible, especially when the themes aren’t built by renowned developers.

The main reason behind the such an recommendation is that an experiment was run over 8 out of 10 site reviewed offered free themes which contains base64 code meaning those themes can be used to insert malicious spam link into your site and cause unexpected problem that you never imagine.

Conclusion:

I’ve only provided the tactics that I find helpful to secure WordPress powered websites. If you think I’ve missed of those you find helpful, please feel free to inform me via the following comment box. Looking forward for your valuable comments.

Speed Up Joomla Site in 5 Minutes - An Step by Step Guide

Speed Up Joomla Site in 5 Minutes - An Step by Step Guide

Whether you are running your personal blog or a enterprise level of Joomla eCommerce store, your heartiest exception sticks with highest pick of traffic and record breaking conversion, right?

To turn your dream into reality, there are plenty of technical aspects need to kick in along fresh and professional site contents. Without going to describe them all mediocrely, I am going to share proven tactics to speed up Joomla websites, which is considered one of the most significant ranking factors according to Google. Why speed is important?

Several studies shows that fast loading websites can significantly increase conversion and boost in sales. A couple of years ago, Walmart announced that their conversions touch the peak when site loads within 2 seconds, and it progressively drops as page loading time increases. In the following chart, you can notice how overall conversion and sales fluctuate when site speed falls from 0-1 to 3-4 seconds.

kissmetrics_study

Another study by Kissmetrics shows that 40% of people abandon a website that takes more than 3 seconds to load. I know having read those real life example, you guys want your Joomla website should be loaded fast. For your convenience, I’m going to share some useful tips and tricks of Joomla speed optimization.

Before digging into the in-depth instructions, I recommend you to check Joomla performance or how fast your Joomla site currently loads. To check site loading speed, there are numerous tools available in the market. I have created a list of trusted by millions because the tools not only can measure site speed and overall performance, but also provides details reason that make a website slow.

Now you have clear understanding of your overall site performance and loading time. Before going to follow my instructions, take a complete backup of your Joomla website, then make step by step enhancement. After completion of every step, get back to the site front-end, and make sure every part of your website functioning accordingly.

Choose a reliable Web Host

Taking right decision while selecting best Joomla hosting is considered the key for speed up Joomla website. Thinking why? The files of your website are virtually hosted on a remote server.

When a end user hits for your site URL in the browser address bar, and If it takes time to retrieve data from server to your end clients, definitely your site loading time is going to be increased and your are going to lose a significant amount of traffic. So what would be the best solution? To cover the question, we prepared a wonderful guide to select best Joomla hosting. I would be your find them amazing, enjoy the reading.

Use updated Joomla and its extensions

Latest technologies includes new opportunity to keep your websites away from numerous limitations of past and add finest smoothness in the overall site performance. Whereas Joomla is growing everyday for open-source contribution, so the consequence presents us the frequent update of Joomla with possibilities of site speed, because each updated version comes with multiple code improvements. Same happens for 3rd party plugins, keep them updated to consolidated with your need.

Use must-have and remove unused extensions

The plugin based model for feature extension sometime loads unnecessary features and bloated codes in maximum CMS. Nothing different for Joomla. With several years of Joomla template development, I used many of tremendous Joomla extensions comes with awesome features.

But your site may required to use single features, but other remain unused and become reason for poor site speed and conflict. So, remove the unnecessary plugins and install lightweight and need specific Joomla extensions.

Enable Joomla Caching

When you look for a website or its content in the browser, Browser sends request to the server to serve requested contents back. If you are using Joomla website, on the every page load or request browser retrieves associated plugins, components, modules, images and other more. It’s really a weightlifting work for site database. Suppose you have a website visited by 1000 visitors at a time, I bet your site loading get down to 5 to 10 seconds. What’s the solution to comprehend this issue?

The answer is - enable joomla caching. Caching allows to present pre-generated contents to the end users without annoying server all the time and speed up Joomla site of yours. In a cache enabled websites a saved “view” is offer to browser. If any content is changed or updated by site owners, users momentarily get older version of cached information, but after a defined interval, cache version gets update automatically. Want to enable Joomla caching, just follow the beneath tutorial

To enable the Joomla caching, first head the System from Global Configuration, select ON - Conservative caching option from cache dropdown field, and select Save button. Have a look in the following image.

joomla_cache_enable

To ensure Joomla caching system starts working correctly, you have to check whether core Joomla 3 plugin System - Cache is published or not. To check status of the plugin, head to the Plugin Manager from Extensions menu. search for System - Cache. If the plugin is enabled that would great, but not publish it on your own. Have a look in the following image.

performance

Congratulation, Now Joomla caching system is running successfully.

Enable Gzip Compression

Gzip is the popular tool for file compression. It lessen the file size and helps to shrink server response time.

joomla_gzip_compression

Yahoo says “Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip,"

To enable Gzip in Joomla! CMS, head over to Global configuration > server and click on option 'Yes' for Gzip compression.

Leverage speed using CDN

Content delivery network (CDN) is an incredibly simple way to supercharge your Joomla site and Joomla performance. A CDN is an interconnected system of cache servers that use geographical proximity as a criteria for delivering Web content. If you enable a Content Delivery Network, your static files will not be served from the location of your web host, but from the global network of servers of your CDN provider.

In a CDN, multiple copy of your web contents strategically exists on disseminating servers, allow you to serve the same content to many requesting clients computing devices with high availability and high performance - even when bandwidth is limited or there are sudden spikes in demand. CDNs are especially well suited for delivering web objects (text, graphics and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks.

If you want to know which CDN provider is best suited for your Joomla website, read this detailed guide.

Optimize Images

Images Put serious value on your website. You cannot deny the role of images on your website. Images increase the load of your page and it needs more bandwidth than rest of the elements of your webpage. To ensure fast loading of webpages you must optimize images of your website.

There might be question on your mind “If I reduce the image size, will it affect the quality?” Actually there is a lot tools available in the web, you can use tinypng, remush.it, PunyPNG, etc. This tools will optimize your images losslessly, there will be no compromise with the quality of your image.

Minify HTML, CSS & JS

A Joomla Website loads its contents and it also loads CSS, JS files which may slow down the whole loading process. CSS & JS files takes a lot of time for rendering and executing. This issue can be easily resolved by:

  • Compressing CSS, JS files
  • Merging Several files into one.

If you do not know how to do it, you can do it by using extensions like JCH Optimize, JBetolo, ScriptMerge from Joomla extension directory. JCH Optimize extension also allows several functions for Joomla speed optimization.

Mobile Optimization for Joomla Website

50% of web traffic comes from mobile and tablets. If you do not want to lose half of your traffic, it is necessary to optimize your mobile pages too. You can take Mobile-Friendly test from google to check mobile friendliness of your site.

mobile_friednly_change

If you get a really poor score consider optimizing it. If you do not know waht to optimize, you can use the PageSpeed insights Tool by google.

Turn off leeching and hotlinking of your content

Hotlinking increases server load and makes your website slow. It means stealing your bandwidth and it occurs when any other sites uses direct link to the images on your site.

So for turning off leeching and hotlinking of your content put the below code on your root .htaccess file:

disable hotlinking of images with forbidden or custom image option RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?sparringmind.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?feeds2.feedxpert.com/sparringmind [NC] RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

At here I have given my feed (from Feedxpert). You have to replace it with your feed’s name or else your images might not appear correctly.

Turn On LazyLoad to your images

Lazyload helps you to speedup your page loading process. It only loads the images, above the fold load or those images which are visible to the browser window of user. When the user scrolls down, the below images starts to load before the appear on the window.

This just not only increases the page loading speed, but also save the bandwidth by loading less data for visitors who doesn’t scroll all the way down. You can do this automatically, just install plugin like LLFJ or JSLazyLoading from Joomla extension directory.

Control amount of post revision

When you are done with your post and published it, why would you need the stored draft? There might be 8-9 or even more drafts saved. This drafts slow down your site and therefore you need to control your revisions.

Set the revisions to 2 or 3 so that in case of any mistake, you can fall back.

Summary

Speed up Joomla websites is the key to boost up conversion and sales simultaneously. I’ve discussed only the techniques worked for me precisely. If you think, I missed any of them, let me know in the comment below, I will add your recommendation to the above tips.

How To Add Disqus Comments On Your Joomla Websites

disqus_joomla

Either you're using Joomla templates and WordPress themes, user generated Joomla comments and WordPress comments are important. It bears a testimony that your posted masterpiece is helping others tremendously. Visitors are found to and fro across the site to site to find out their desired contents.

Before getting into your well-researched blog post, they try to find some significant traits which give them reason to read further or bounce. Now the question is what are those traits, right?

In my opinion they are not so many, but the most important elements are - huge post views, social shares and positive comments. Among those, good comments are the most effective, it allures the dark horse to be well-acquaintance of your website. But what if your post comments are full of spamming? definitely you would lose significant number of constant traffic along with the following inconvenience.

  • Consume valuable time and labour

When you’ve websites like ThemeXpert with tons of useful blog posts, You would constantly start receiving comments in your maximum viral posts. With the useful appreciation you found spammers are trying to spam in your comment. Consequently you have to spend time to keep them up-to-date frequently.

  • Can’t stop traffic getting stolen

If you couldn’t manage time to clean up your website from spammy comments, visitors will pipe through other website easily.

  • Endanger site from hacking

Either you are running Joomla or WordPress websites, if you don’t turn on comment filtering for malicious code, hackers can hack your site putting malicious code via your site commenting system.

  • Increase site loading time

If a website fails to load within 5 to 8 seconds, statistics show that visitors start hitting back button with waiting for site comes in. On top of that the continuation of bounce rate keeps increasing. In this circumstance, Google may penalize your site and demote your site with lower ranking.

  • Google is cracking down on bad links

Google always hates bad links, If you don’t manage time to moderate your site comment, Google think you’re allowing bad links into your website, the Google bot won’t care whether the link are attached in the commenting system or elsewhere.

Now you might be thinking what would be ultimate solution to keep your site away from such an inconvenience, right? According to my experience I found default commenting system of popular CMS like WordPress and Joomla requires tons of configuration to make it safe from unexpected danger.

Even in my whole career I found many of CMS power users find difficult to add spamming safety configuration, let alone the new comers. To comprehend this issue, we have to find component which will be ultimate solution package, allows automated settings enability by default.

Now the question is which component provides all possibilities all together, the answer is simple, that is Disqus Joomla service. Look on the reason why I provoke to choose this awesome 3rd commenting system for your Joomla websites.

  • Fast and real time update

The commenting system doesn’t affect your site speed. It loads separately from Disqus on your Joomla websites. If you’ve website with a tons traffic, you don’t need to reload your site to see the latest update of the most recent comments. Everything will be updated live within your single blink eyes.

  • Less spamming and secured

Commenting with Disqus requires to login first, As a result only human can post comment, forget about the abusive behavior of dangerous bots.

  • Popular social integration

Social media is one of the finest place where you can reach people according to your interest easily. Disqus Joomla service comes with instant signup functionality with social media channels. If anyone signups with their social account, and comment in your blog. It’ll automatically posted the comment in their associate social media channel.

  • Remote moderation

Moderation of comment is essential to make your site atmosphere professional. To give the utmost flexibility, Disqus notifies it users via email when new comment is dropped, simultaneously you can approve,delete, and every reply those comment, directly from your emails. Enjoy the flexibility.

  • Complete Control

Your brand may have an unique identity, you want to adapt the overall every aspect of your official website matching your brand core color. To personalize the 3rd party commenting system to your brand it allow you to change default comment avatar, add CSS to personalize the look of your comment.

Having learnt about the benefits of Disqus Joomla Service, now I am going to show you how you can install Disqus comment in your Joomla websites. Let’s dive in.

Step 01: Create account and add website with Disqus Joomla

Heading over to the Disqus.com, you have to sign up first with your email first. If you have already a registered for this site, Get into this link to add Disqus to your site, add site domain name or subdomain name in the site name field, choose Disqus URL and appropriate category.

I am going to demonstrate the demo on zenithII template , so fill the empty with relevant details. When you fill the form correctly, select Finish Registration button.

add_disqus_in_your_site

Disqus provides compatibility with all popular CMS in the market, select Joomla as your platform in this stage.

select-disqus-for-your-site

After the previous selection of Joomla icon, you will be redirected to the following page, which includes the details instruction which plugin to download to integrate as Joomla Default commenting system. Copy the Shortname.

select-disqus-for-your-site

Step 02: Install Disqus plugin and link Shortname

Though above image shows the instruction line by line, I am going to describe it thoroughly. Login your Joomla backend, head to the extensions manager and install this Disqus for Joomla plugins.

install-plugin

Head to the plugins manager and search for Disqus, The search result will bring you two items, the first one is DISQUS Comments for Joomla and another is System -DISQUS comments for Joomla. Click on the first result to edit existing settings.

result-disqus

In this details page you will found a couple of field that you have to fill with relevant information like Shortname, category and menu item selection where the Disqus comment will be loaded. We have our shortname “zenithII”, I field the shortname field with zenithII. selected blog as category, and DigiCom as menu item. When you filled your select the save and close button.

settings-disqus

Now head to the category section where you loaded the plugin, for demonstration I have rendered the plugin in our blog section, you can load any where you think important. Have a look on the image below.

final_disqus

Want enjoy the full feature of this 3rd party integration? you have to log in your Disqus account, where you can find unmatched opportunities of robust comment management. Like you can add collaborator to moderate site Joomla comments, customize default look on the commenting system and so many more.

If you found this article helpful, feel free to leave a comment what kind of article are you expecting from us. We'll really appreciate you for comment. Even we can give 10% discount on purchase from ThemeXpert if we find your comment awesome :)

How to add reCAPTCHA support in Joomla extensions

joomla_recaptcha

A couple of weeks ago we were developing a Joomla! contact form extension called Xpert Contact. We are glad developers developed the extension professionally well with reCAPTCHA support. To study the best practice to provide CAPTCHA support, we searched for the resource in the web but unfortunately we found nothing interesting.

So, we decided write the tutorial on our own. In this tutorial First I’ll show you how to enable the new "No CAPTCHA Joomla reCAPTCHA" in Joomla default contact forms and subsequently show the details way to provide support of this API in the Joomla extensions.

Add the New Google ReCaptcha to Joomla Contact Forms

Adding No CAPTCHA reCAPTCHA API in your Joomla websites doesn’t require elusive and tedious steps to walk through. It combines a set of instruction to follow. Let’s dig in.

Step #1 Collection the public and secret keys

To enable Joomla reCAPTCHA in your Joomla website, you have to collect public and secret keys from Google reCaptcha site. When you are on the Google reCaptcha official site, select the Get reCAPTCHA button from the top right corner.

get-recaptcha

Provide site details including Label, Domains and Owners email address to register your website for Google reCAPTCHA. and click register button.

provide_information

Now your site domain is registered, you have site and private keys are available to proceed for Captcha integration in your Joomla website.

Step #2 Enable Joomla reCaptcha plugin

Log into your Joomla backend and head to the Plugins from Extensions menu. Search for Captcha - ReCaptcha. The Captcha plugin comes up being in disabled status.

enable_recaptcha_plugin

Now click to edit Captcha - ReCaptcha plugin, select version 2.0 from version dropdown, add site as well as private keys in the specific fields, change Theme if you want; default it will set the theme Dark, change status disabled to enabled, and click save and close.

enable_recaptcha_plugin

Step #3 Enable ReCaptcha globally

We’ve successfully enabled Joomla reCaptcha plugin. Now we need to enable it globally. Head to System > Global configuration. select Captcha - ReCaptcha from Default captcha dropdown.

enable_recaptcha_globally

Now head to the contact or register form page of your Joomla website, you’ll noticed Captcha would be successful integrated.

enable_recaptcha_globally

Add support of Google ReCaptcha to Joomla Contact Forms plugins

When you are developing contact form plugin for Joomla, it’s essential to enable reCaptcha to protect from abusive bots. If you don’t have experience to developed reCaptcha enabled contact form plugins, don’t worry I am here to flip you through the entire steps.

Great news is we have XpertContact module created which supports Captcha. For the quick demonstration I’ll explain how we provide support for Captcha in the contact form module. Before heading further I recommend you to download the module first.

Download Xpert Contact

I assume you’ve downloaded the module, and unzip it. Now all the files comes up. Let’s dive in.

Step #1 Create XML form adding a field for Captcha

To provide support of Captcha, we have to add a extra field in XML contact form where the Captcha pops out in the frontend. Add the following code in your XML contact or register form.

/> 

If you’ve download Xpert Contact copy opened, head to the form folder, you’ll find two xml files. The first is form.xml and another is form_captcha.xml. open form_captcha.xml, you can notice the previous code included in this file.

Note: you can add the previous code in form.xml file without create a new file form_captcha.xml.

Step #2 Load XML form using JForm

Having successfully created Captcha field in XML form, you’ve to load the XML form via JForm adding following code.

$form = JForm::getInstance('customForm','path/to/form/form.xml',array('control' => 'jform'));

In Xpert Contact we load this code in mod_xpertcontact.php. In this file we load the XML using JForm, checked whether plugins Captcha is enabled or not and then we load form.

Step #3 Load form for the frontend view

Now we’ve instructed the system to load XML form but haven’t fetched contact to frontend display. To fetch contact form in the frontend, add the following code in the view file.

$fieldSets = $form->getFieldsets();
foreach ($fieldSets as $name => $fieldSet) :
  foreach ($form->getFieldset($name) as $field):
    echo $field->getControlGroup();
  endforeach;
endforeach; 

In XpertContact open default.php file from tmpl folder. Here you’ll find how we show fetch form data for frontend view from 22 to 33 lines.

Step #4 Validate the form while form submission

A full-fledged form is now perfectly showing in the frontend. Now It’s time to validate the form. To add the ability to prevent spam and malicious bots, add the following code in your helper.php file. It’ll validate the form allowing the human from submission and keeping the malicious bots apart.

$data   = $this->input->get('jform', array(), 'array');
$form   = JForm::getInstance('customForm','path/to/form/form.xml');
$result = $form->validate($data);
// Check for validation errors.
if ($return === false)
{
  // codes goes here
  $return = '';
  // Get the validation messages from the form.
  foreach ($form->getErrors() as $message)
  {
    $return .= $message->getMessage();
  }

  //now you can return error msg
  return $return;
}
// validation successful, do your job here

Get to the Xpert Contact root directory, you will notice we’ve performed the validation in helper.php file.

Note: If Joomla website fails to load jFrom perfectly. Make sure you’ve Included the following code to enable the JForm.

jimport( 'joomla.form.form' );

Summary

The process I've described above help you a lot. If you face any confusing to follow this article feel free to post comment. I am here to answer you :)

Want a Chirping WordPress Blog? Learn How To Integrate Facebook Comments Without an Extra Plugin

Want a Chirping WordPress Blog? Learn How To Integrate Facebook Comments Without an Extra Plugin

When you convert your ideas and technical excellence into an online write-up, you intuitively stick your eyes on your blog seeking people engagement, right ?

But it is true that one of the biggest obstacle bloggers face is the silent blog syndrome. You might have read tons of blogs and analyzed a couple of researches. When you evolve countless hours of work into a blog post and you find them silent. I mean when you find no one argues, no one appreciates, even no one comments on your article. I feel the frustration, you undergo frequently.

Now the question is how to incline people to comment on your blog? what is the tips, tricks and technique of persuasion that allure people to comment on your blog. I found an effective tactics is to enable Facebook comment system. So, let’s dive into the Facebook comment system integration on your WordPress website.

For your convenience I have divided the process into two steps. First we create Facebook App and later we’ll integrate in the WordPress website. Have a look below.

 

Step 1

When you hear the word App, you might thinking you have to code, right? No you don’t. To enble facebook comment, visit the link developers.facebook.com make sure you have logged in your facebook account. Once you there, select My Apps > Add a New App (or Add a New App, if you have an previous App there) from the top navigation. It will open up a popup window asking for a selection, choose “website” from the options. Have a look in the image below

Just after the previous process, you will be prompted to type the name for your App. Once you entered your App name along the line, click on Create New Facebook App ID for your subsequent process.  

Step 2

After that you will be asked to select category for your Facebook App, select any of your desired category from a category dropdown. Afterward facebook will provide you JavaScript snippet to enable Facebook SDK. If your only goal is to enable Facebook comment system on your blog, skip this section . Fill next following form with your web address and click Next.

Now Facebook ask you to test its components embedding on your website body tag. Again, it’s not essential, scroll a bit down to “Next Steps” section and chose the “social plugins” option.  

The previous click will open you a page in the next tab with couple of options. Now choose “comments” other from the sidebar or from the content scroll a little bit to Comments section.

Step 4

In this step, you have to configure Facebook comment box how it looks on your website. Now enter your website url where you want use the Facebook comment on, declare its width (in pixels), set the number of comments that will available on your website by default, and set the color scheme. When you've done with settings, click on Get Code button

Step 05

Now we have snippet of code. Let’s get into WordPress admin panel and we embed the first code block in header.php file. To embed the first snippet of code, click on Editor tab from the Appearance tab one the left sidebar, Open header.php file form right sidebar, and paste the first snippet just after thetag. Have a look on the beneath image.

Step 06

Now in the process of the entire setup, we will put the second snippet in single.php. Open the single.php from WordPress template root and paste the second snippet of code just where I place in the image below.

If you you others separate way to add comment in a WordPress website, let me know I will write on them to teach others.