Twist That Code: How to Add Custom Buttons for WordPress TinyMCE Editor

WordPress version 3.9 uses TinyMCE version 4.0 core, an open source HTML WYSIWYG editor by Moxiecode Systems, AB. This means that all of the buttons you see on your default theme posts and page editor comes from the TinyMCE plugin. WordPress TinyMCE editor version 4 provides comes with the following changes:

  • New UI and UI API
  • New theme
  • Revamped events system/API
  • Better code quality, readability and build process
  • Lots of (inline) documentation

Using the TinyMCE Visual Editor has a lot of benefits as you don’t need to add styles or shortcodes manually. Instead, you can style elements in just a couple of clicks. Unlike other simple plugins, it may take some time to figure it out how to customize or add functionality to the TinyMCE editor.

In this article, you will learn how to add custom button on your WordPress TinyMCE Visual Editor using the previous tutorial about creating tooltips shortcode.

Resources You Need to Complete This Tutorial

  • WordPress Installation
  • Basic Knowledge about PHP, TinyMCE, JavaScript and CSS
  • Time and Patience

What We Are Going to Build:

final

Getting Started

TinyMCE is great for Shortcodes. Most users are comfortable clicking buttons than putting codes manually to display a particular feature or style. You are going to use the following code to display a tooltip text along with its position.

[tooltip class="top_tooltip" title="This is a tooltip"] TEXT[/tooltip]

Now, see how you can add a custom button on the TinyMCE editor for this Shortcode.

STEP 1 – Create a Function That Will Filter a Series of Functions

The first thing you need to do is to create a function that will filter series of functions. You will check if user has permissions and then check if TinyMCE is enabled before finally hooking it using the add_action function. Check out the codes below.

// Filter Functions with Hooks
function custom_mce_button() {
  // Check if user have permission
  if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
    return;
  }
  // Check if WYSIWYG is enabled
  if ( 'true' == get_user_option( 'rich_editing' ) ) {
    add_filter( 'mce_external_plugins', 'custom_tinymce_plugin' );
    add_filter( 'mce_buttons', 'register_mce_button' );
  }
}
add_action('admin_head', 'custom_mce_button');

STEP 2 – Adding and Registering New MCE Plugin for WordPress

Next, you will create another function to create the new custom button. The code will have the path of the JavaScript file that will handle the option of your custom button later on.

In this part of the tutorial, you can name your JavaScript file as editor_plugin.js but, please, feel free to use any name you want for the file.

// Function for new button
function custom_tinymce_plugin( $plugin_array ) {
  $plugin_array['custom_mce_button'] = get_template_directory_uri() .'/editor_plugin.js';
  return $plugin_array;
}

Then, register your new button using a new function. You will parse the variable buttons to make sure it will display the button that you’ve added above.

// Register new button in the editor
function register_mce_button( $buttons ) {
  array_push( $buttons, 'custom_mce_button' );
  return $buttons;
}

STEP 3 – JavaScript for the Custom Button

The next thing you need to do is create the JavaScripts file that registers the custom_mce_button function. This will simply add a new button, that, when user click it, will display the text “Hello World!”.

(function() {
    tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
        editor.addButton('custom_mce_button', {
            text: 'Tooltip',
            icon: false,
            onclick: function() {
                editor.insertContent('Hello World!');
            }
        });
    });
})();

OK, great! You’ve made it! But it’s not done yet. The next series of codes will add the meaty part on your tooltip Shortcode. Replace the code above with the following codes.

(function() {
    tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
        editor.addButton('custom_mce_button', {
            icon: ‘false’,
            text: 'Tooltip',
            onclick: function() {
                editor.windowManager.open({
                    title: 'Insert Tooltip',
                    body: [{
                        type: 'textbox',
                        name: 'textboxtooltipName',
                        label: 'Tooltip Text',
                        value: ''
                    }, {
                        type: 'listbox',
                        name: 'className',
                        label: 'Position',
                        values: [{
                            text: 'Top Tooltip',
                            value: 'top_tooltip'
                        }, {
                            text: 'Left Tooltip',
                            value: 'left_tooltip'
                        }, {
                            text: 'Right Tooltip',
                            value: 'right_tooltip'
                        }, {
                            text: 'Bottom Tooltip',
                            value: 'bottom_tooltip'
                        }]
                    }, ],
                    onsubmit: function(e) {
                        editor.insertContent(
                            '[tooltip class="' +
                            e.data.className +
                            '" title="' +
                            e.data.textboxtooltipName +
                            '"]' +
                            editor.selection
                            .getContent() +
                            '[/tooltip]'
                        );
                    }
                });
            }
        });
    });
})();

The code that you see above will add a pop-up Window that will let the user add the tooltip text and its position.

After highlighting the text, the user can click the tooltip button and this pop-up Window will appear. When the submit button is clicked, it will add or insert the tooltip Shortcodes along with the data the user inserted on the Pop-Up Window. tooltip

Adding Icon to the Custom Button

There are two ways that you can add a custom icon for the custom button on TinyMCE editor.

  1. Adding a custom image URL path to existing stylesheet.
  2. Creating a function to hook the icon’s URL path.

Adding a Custom Image URL Path to Existing Stylesheet

To add a custom image URL path to existing stylesheet, you will simply need to declare a class with the URL path of the image you want to use.

i.custom-mce-icon {
  background: url('../images/tooltip.png');
}

Next, you just need to add class you’ve just created to the icon option.

(function() {
        tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
                    editor.addButton('custom_mce_button', {
                                icon: ‘custom-mce-icon’,
                                text: 'Tooltip',

Creating a function to hook the icon’s URL path

To display the icon using the function, you just need to add a function to load a new stylesheet for the admin panel use.Then, create the file and add class of the image and change the icon option to the class you just created.

function custom_css_mce_button() {
    wp_enqueue_style('symple_shortcodes-tc', plugins_url(
        '/css/custom_style.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'custom_css_mce_button');
(function() {
        tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
                    editor.addButton('custom_mce_button', {
                                icon: ‘custom - mce - icon’,
                                text: 'Tooltip',

What’s next?

Adding custom buttons to TinyMCE is not that hard. I hope that this article helps you add a custom button to your WordPress Visual Editor.

If you are not comfortable doing all this stuff, you might want to use the Custom TinyMCE Shortcode Button plugin. This allows you to add a custom button to TinyMCE which will insert a custom shortcode into the editor. Feel free to tweak and use the codes on your project.

If you have any thoughts about this tutorial, just drop a line on the tutorial.

Powered by WPeMatico

How to Find and Fix Broken Links in a Jiffy

If you are running a website, you will surely have put a lot of hard work to make it an important resource. However if you can’t fix the broken links, it can destroy all the hard work you did.

The problem of broken links can be lot worse with outbound links. You will not be getting notified with the change in your linked website. Therefore, you should have a daily check to see whether all of your links are still working.

Broken Links Can Be Very Harmful to Your Site in Two Ways:

  • Destroying user experience. When the users click on a link and find that it’s dead with a 404 error, they will get annoyed.
  • Bringing down the SEO effort. Broken links disturb the link equity flow on the site and makes negative impact on the rankings.

In order to prevent any of these, you need to check for the broken links on your entire site. If you are wondering how to prevent this, we have the solution for you!

Why Broken Links Are Bad?

Depositphotos_18202977_m

If you ask yourself why broken links should be checked and fixed, here are the answers:

  • Broken links make the impression that you don’t care about your own site. When the users get a 404 Page error, the only thing they think of is that you don’t care for the content on your website and the user experience.
  • Broken links can be very frustrating. Visitors may feel like disappointed when they are unable to find what they were looking for. Also, this will prevent you from getting new visitors on your site and blogs.
  • Fixing the broken links will give the impression that you are keeping your site fresh and alive. SEO will be more effective when you are regularly updating your site. This will signal the search engine sites that you are regularly maintaining the site.

Broken links can have a huge impact on your site’s SEO. If all the links on your site are working, it will make the site more accessible on the search engines. But if you don’t fix these links, your site will be rated negative on the search engine optimization.

How Do Links Become Broken?

There are many reasons to which a link may become broken:

  • The web page doesn’t exist there anymore.
  • The server that hosts the target page stops working.
  • There is blockage from content filters or firewalls.

How To Find The Broken Links?

Depositphotos_15556835_m

The good news is you don’t need to do anything to find broken links. Finding them is not something that you can do manually; however, you can fix them yourself!

Plenty of plugins are available that will check both internal and external links.

  • Internal links – The ones that point from your single web page to any other web page that is available on your site.
  • External links – Points to some other website and take your visitors away from your site for further reading.

Increase Your Blog Experience With Un-Broken Links

Fixing the broken links can be very helpful in increasing the experience of your blog. If you are using some plugin to check the links that are broken, you will stay ahead of everyone.

You may think to just remove the old content, but, if you can simply update it using plugins, then, you will make sure that your site is liked by everyone.

By updating you broken links, you are making your place in the SEO results. A good approach is to check on the links that are linked externally from your site. Keeping them updated will help you to increase your site’s experience and bring more traffic to your blog and websites.

Improve Your SEO By Fixing Broken Links!

Depositphotos_9704898_m

Search engines are becoming smarter now; they only promote the pages in their results that are liked by users. Broken links are counted as bad experience by the visitors which can have an effect on the SEO. If there is a page with lots of broken links, it is more likely to get a negative rating from the search engines such as the Google.

The 301 redirect

The most SEO-friendly way to redirect the broken links is the 301 redirect.

The 301 redirect lets the search engine know that following page has been moved to some other location. This will help you pass the SEO properties for old pages all the way to new pages.

In order to put the 301 redirect in place, you will need to have the access to the .HTACCESS file that is located on your website server. However, this will only work for the links that point to the pages on your website that have moved locations.

In today’s post, we are featuring some useful plugins that will help you to check for the broken links on your site. Also, you will get some SEO tips to get rid of the broken links on your site in a fast and easy way. Let’s start then!

Here are some useful plugin that we have compiled for you to check the broken links:

1. Xenu’s Link Sleuth

xenu1

Image from Online Marketing News

Xenu’s Link Sleuth is a free plugin for Windows that scans the entire site for find the broken links. You only have to provide a URL and it will do the rest for you. This plugin runs the complete scan to check for:

  • Broken links
  • Images
  • Frames
  • Backgrounds
  • Stylesheets
  • Scripts

Besides finding broken links, Xenu can also be helpful in finding duplicate content, missing alt text, page depth, site structure, etc.

2. Screaming Frog

screaming-frog1

Image from Screaming Frog

This plugin is available for PC, Mac, or Linux. It can be installed easily. It is similar to Xenu; you will need to give a URL and the plugin will scan the entire site for you. Screaming Frog is meant for site optimization, and goes in depth for page elements like heading tags and the likes. You will be reported on the following:

  • Client and server errors
  • External links
  • Duplicate Pages
  • Page depth level
  • Anchor text

The plugin can be downloaded for free but, the free version has a limit of 500 URLs. Also, the lite version doesn’t give you full access to configuration. You can purchase the full version for £99 per year, which removes all the restrictions.

3. W3C Link Checker

w3c

Image from Flickr

W3C is another useful plugin to check any of the broken links on your websites. Also, it provides recommendations based on the results that are detected.

You have to set a limit of how deep the search should be made or else, it will keep on going. Link checker will look for the issues related to:

  • Broken links
  • Anchor and referenced objects in a web page
  • CSS stylesheet
  • Page depth

You can download the plugin and run on your computer to checkout on all the broken links that are in your site.

When choosing the best plugin among these will depend on your needs.

  • How much complex is your website?
  • Why do you want to check the broken links?
  • How frequently will you run the scan?

Once you know the answer to these questions, you will easily select the best plugin that you can use for checking the broken links on your site.

Conclusion

Everyone can get frustrated when they are going deep for an article on a news story and find that the link to further material is broken.

This post is meant to teach you the importance of broken links and how to find them through different plugins. We also share how important the links are for improving ranking on the SEO charts. We hope that you found the post useful. Please share it with others as well. If you like to add something, comment in the below section.

 

Powered by WPeMatico

What You Should Tweak in Your WordPress Theme Options Page (But Forgot)

Every website or blog needs some modification in its theme. Only then can you make your blog to stand out from the crowd and bring traffic to it.

WordPress theme options page is a custom admin page that allow users to change theme settings without modifying the theme files. These theme option pages can be simple or have lots of customization split into either tabs or multiple pages.

Theme options are good for majority of the users; however, these options do have a tendency to confuse things on the development side. So if you are a WordPress site developer, here are some of the options that you should be including in your WordPress theme page option. Moreover, the article explains why you should include these features in the WP theme options page.

Avada is the best selling theme on ThemeForest, we are using it as example in this article. We have covered the most important options below. For further information, you can also check complete documentation here.

General Options

Responsive Option

General Options will let people control the look of their site. There are three main sections in this option: Responsive Options, Favicon Options, and Tracking Options

  • Responsive Option – needed to make your website design layout responsive or fixed. Responsive design will adjust your website on different devices, whereas fixed layout is for users who want to display the site in fixed width.
  • Favicon Option – needed to associate an icon with your website URL that represents your website’s favicon.
  • Tracking Option – adds a track code into the footer template of your theme that allows people to use services like Google Analytics, among others.

Header Options

Header Option

The Header Option lets users customize everything above the content area, including the menu. It has three main sections: Header Content Options, Header Background Options, and Header Social Icon Options.

  • Header Content Option – needed to change header design, slider position, transparent header and website’s logo, etc.
  • Header Background Option – required for inserting background image in header. Users can choose various options like, repeat and even modify the heading top and bottom padding.
  • Header Social Icon Option – needed for customizing the social icons that are displayed in header.

Footer Options

Footer Option

The Footer Options help in customizing the different areas of website footer. The footer tab has two sections: Footer Widget Options and Footer Copyright Option.

  • Footer Widget Area Option – needed if you want to set number of footer columns. This option will let you insert an image URL for footer widget area background.
  • Copyright Area Option – useful for displaying copyright text in footer. This option will also will also help you in displaying social icon on footer of page (if you want).

Background Options

Background Option

The Background Options will let you change background for box and wide mode layout.

  • Background Option for Boxed Mode – needed for changing the background colors and pattern. This option is also recommended to change the background image and how the image repeats.

Typography Options

Typography Option

The Typography Options let you to customize fonts. There are five sections in it: Custom Font for the Navigation Menu and Headings, Google Fonts, Standards, Font Sizes and Font Line Heights.

  • Custom Fonts – needed to use custom fonts instead of Google and Standard fonts.
  • Google Fonts – integrating Google Fonts lets the user choose fonts for body, menu, headings, and footer headings for Google Font directory.
  • Font Size – needed to change font sizes for different areas of the theme page including sidebar widget, footer widget and copyright font size etc.
  • Font Line Height – allows setting font line for body and heading of theme page.

Styling Options

Styling Option

The Styling Options are needed to customize the colors of your website. This option has five sections: Background Colors, Element Colors, Element Options, Font Colors, and Menu Colors.

  • Background Color Option – needed to modify colors for several page items including header, content, footer and copyright, etc.
  • Element Colors Option – lets user control the colors for button, sliding bar, footer widget, form, blog grid and social share box, etc.
  • Element Option – used to disable button text shadow, sliding bar text shadow and footer text shadow.
  • Font Color Option – needed for controlling the text color of buttons, header tagline, heading, body, link, sliding bar, footer heading, and footer font color, etc.
  • Menu Color Option – gives you the complete control over colors for menu background, font and header.

Blog Options

The Blog Option can be good if you need to publish blog posts related to the content. It can also be used for customizing different blog aspects such as layout, sidebar, excerpts and date formats, etc.

  • General Blog Option – allows you to choose the title, layout, sidebar position, excerpt length and pagination, etc.
  • Blog Single Post Page Option – allows you to have a featured page with no sidebar and other distracting content.

Portfolio Options

Portfolio options enable user to customize different aspects of portfolio page, such as the number of items per page, sidebar, excerpts and more.

Social Media

Social Media

Social media options can help if you want to display the social icons on your site. These will help grow your social presence; also, they will add to your network marketing efforts.

Contact Page Options

Contact Form

Most people use custom contact form plugins, but having a built-in option can be helpful for non-techie individuals. These options let you customize the contact page on your blog. This option has two sections: Google Map Options and Recaptcha Spam Options.

  • Google Map Option – added if you want to show a Google map, and having direction to your business address. This option also allows you to set the width and height of  the map.
  • ReCaptcha Spam Option – helpful for securing your blog or a website with public and private ReCaptcha.

Sidebar Options

Sidebar options are needed for customizing the width of the content area and sidebar. This option is also needed if you want to choose sidebar background colors to match your content.

Custom CSS Options

Custom CSS option will be needed if user wants to overwrite or add new CSS properties to the theme. The HTML themes cannot be modified; however, custom CSS provides the power to create a custom design.

Conclusion

Every popular WordPress Theme has a powerful options panel. It offers a great way for customizing the page that can be managed and understood easily. Many users don’t know what a CSS is but, they can easily use these options to change colors, headings, fonts, and more.

Any developer who is creating a website or a blog on WordPress should consider these options for the theme option page. Which of these options have you included in your theme option page? Please share your thoughts in the below comment section.

Powered by WPeMatico

Are Web Design Schools Losing Their Magic?

Just a few months ago, 1stwebdesigner released its Flat Design course, teaching web designers the secrets in mastering the beautiful art of flat design.

That got me asking: Now that online education is becoming more and more popular, is it still relevant to go to web design schools these days?

This question is perfectly normal to ask. With the advent of web design blogs that teach beginners and experts alike, some people may feel that going to a web design school might no longer be relevant at all.

Why Go to a Design School?

Going to a design school helps in some degrees and cases. It trains you for the basics of web design. Commonly, design schools teach you some basic knowledge like color theory, basics of typography, composition and basics of design.

classroom

Some schools also give you a peek at the basic coding languages like HTML, CSS and PHP. In addition, schools train you to work hard on deadlines. Projects, assignments and term papers condition your mind for the future you will face.

You will learn that this will be a great amount of help for you as you will be dealing with clients. You will learn how to work with tight schedules to a point where you no longer sleep. Somehow, this is foreshadowing to your future fate as a web designer.

One more thing that would make you consider going to a design school are the mentors. Some universities are packed with wonderful professors who do not only teach you but train you as well.

In design schools, you submit projects and professors either critique or appreciate your work. This gives you a lot of leverage because you can readily improve your work without risks of staining your reputation.

web-design-class

Lastly, design schools give you time to tweak and tinker. You may have those designs which may make you hit your face with your palms but those are left at schools. In the course of your stay, you can continually hone your talents and, eventually, become better.

Why Design Schools Are Irrelevant

Online education is now booming. With the Internet becoming a part of daily human activity, pretty much everything can be done online: arranging tasks, ordering food, paying bills and even learning new skills.

  • Diplomas no longer matter

The first reason why going to a web design school might be irrelevant is that diplomas are no longer instant passes for jobs. This goes true despite what most parents say. According to Adecco, a job placement firm, 60% of US college graduates do not find a full-time job in their chosen profession.

job-interview

What does this mean?

Andrea Campbell, now Art Director of Orange Element in Baltimore, may have summed it all when she said that employment decisions are based on interviews and the applicant’s portfolio, and that’s all of it.

This may well be supported as Janna Haggan, a Toronto-based designer said,

“Despite what your teachers or parents tell you, your diploma won’t necessarily get you a job.  Proving what kind of work you are capable of producing through your portfolio or demonstrating passion and potential to an employer will more likely catch their eye; compared to a student who has more formal education. Having a killer portfolio and personality will land you a job anywhere.”

  • Experience is the best teacher

One more thing that they don’t teach at design school is real-life experience. Most classes would just teach you theories on how to deal with clients and you will never know the works until you get one. Sometimes, as a rookie in the world of design, you will have difficult times adjusting from one client to another.

  • There are alternatives now

Unlike engineering or architecture, the online database for information on web design is very rich. With countless design blogs out there, you will never run out of ways to learn. Nowadays, more and more courses are offered where you can learn things that you’ll never learn (or will take a lot of time to learn) in school. All of that, for a more reasonable price, of course.

  • Web Design is a rat-race

Years ago, when you were at design school, flat design probably hasn’t been born yet. You may have never heard of responsive design, either. You probably adjusted a bit in terms of knowledge and style to fit the trend.

Web design is a fast-paced rat-race. You chase the technology and the trends as it move in a constant speed as you are traveling. You can never keep up. That makes sitting on a classroom irrelevant. Your chosen path is continually expanding and you can’t just sit in a classroom forever.

I am a web design student. Shall I drop out now?

For students, this is a pretty difficult question. Honestly, I would sit in a fence regarding this matter. The answer as to whether you should quit design school totally depends upon you.

There are cases where people who quit school turn out to be successful. Take our founder, Dainis, as a great example. However, this doesn’t work all the time.

student

For this, here are a few questions to ask yourself:

  • Am I financially ready to start working?
  • Is my portfolio ready? (or do I even have one?)
  • Am I willing to struggle for long periods?
  • Am I efficient in self-studying?
  • Do I know people that might help me get clients?

You should at least be ready with all of these items before dropping out. But it totally rests upon your hands to steer the wheel.

Alternatives to Design Schools

If you have already quit design school and you want still want to learn, there are great websites that might help you:

My Take

Let me argue that these schools are no longer relevant. With the continuous development and expansion of the uses of Internet, learning new tricks and techniques concerning web design becomes easier, more convenient, and less costly. Imagine this: you can spend thousands of dollars over a four-year education plan that would teach you web design. But then, you can just visit a course, buy it for a hundred dollars or so and learn the same thing for a span of weeks (or even days).

Pondering on this, ask yourself, where would you like to be? In a place where you bury yourself with bills you will pay for in the future? Or in a place where you could learn the same thing in the most comfortable and less costly way possible?

Conclusion

Remember, Web design is a fast-paced race. You will keep on chasing a pot of information that goes constantly increases speed as you run towards it. Will you keep up if you just stay in the four corners of the classroom? Or will you start running?

What are your thoughts? For you, is going to web design schools still relevant? Did you go to one? Let’s discuss.

Powered by WPeMatico

Talk It Out: Best WordPress Live Chat Plugins for Easy Customer Access

The focus of this article is to provide you the best WordPress live chat plugins that you can use in your websites without any difficulties. There are many reasons to why using a live chat plugin will benefit your WordPress site or blog.

For example,

If you have a theme developing website, you are going to be asking the people to invest their dollars for your product. It’s only fair that you make yourself available to visitors to answer any questions that they may have. A research showed that having a chat feature on your site can increase the conversions by 44 percent!

Here are some benefits that you can have by adding a chat plugin to your site:

  • Live chat is convenient for the customers and provides an immediate access to help.
  • Live chat cuts down your expenses by lowering average interaction costs. It increases the efficiency by allowing live chat representatives to handle multiple chats simultaneously.
  • Live chat increases sales by immediately taking the customers through your product and sorting out any confusion they have that can make or break a sale.
  • Live chat gives you an edge on your competitor. According to a study, the cost savings and convenience for customers and staff make live chat a viable option for your business today as a freelancer.

So without delaying any further, here are some of the best free and premium WordPress live chat plugins that freelancers can use in their business.

Free WordPress Live Chat Plugins

Free live chat plugins bring a two-way communication with your visitors on site. You can easily host your own live chat sessions, interact with visitors and boost sales without needing any of third party Javascript.

However, a few free live chat plugins have some limitations such as you can’t log-in the chat room automatically, no full screen chat, and no Youtube video. But, as far as the chat goes, these free plugins are excellent to try!

1. Bankcle Chat

Bankcle Chat

Bankcle Chat is a WordPress plugin that provides a reliable, highly customizable, and economical platform for live chat. Besides giving live support to customers, it also keeps you updated regarding your site visitor activity and tracking.

You can also view the demographic and technical information of visitors. Bankcle can be easily integrated and configured, and automatically activates the free plan for your own account.

2. ClickDesk Live Support

ClickDesk Live Support

This WordPress plugin is one of the fastest live chat services available. ClickDesk allows the web visitors to click to call and voice chat with you (website owner) directly from the browser. Visitors can also dial the local access numbers available in 40+ countries.

You can manage your emails and offline chats with new integrated help desk. Agents can answer live chats and calls from online agent panel through Google Talk and Skype.

3. WP ChatBlazer

WP ChatBlazer

This plugin allows you to embed the Chatblazer application to chat on a WordPress page. You can post with an easy to use shortcode. You can host your own chatroom on your blog for interacting with your audience.

It has an easy-to-use interface that allows users to video chat, chat by sending instant messages, and share all types of media.

4. Video Chat Plugin

Video Chat Plugin

This plugin is highly flexible and supports and rooms, moderators, private messages, and public and private video chat, etc. It is BuddyPress-compatible, and automatically adds the avatars to user profiles in the video chat. It is simple to install and compatible with all search engines.

5. Flexy Talk

Flexy Talk

Flexy talk plugin allows you to get started with chatting to the Facebook fans and site visitors. You can easily do it from any device, including the mobile and tablets, etc. You can create a free account and enjoy unlimited chats with your visitors.

6. Acobot Live Chat

Acobot Live Chat

Acobot plugin displays chat widget on your website, behind which is an intelligent virtual robot that can automatically say hello to every visitor on your site. This plugin can capture their email addresses or phone numbers for you.

Also, it can answer their questions and address their concerns. This 24/7 customer help can turn your visitors into paying customers.

7. Vivocha Activation Tool

Vivocha Activation Tool

This is a multi-channel communication platform for the websites. This plugin can be used to assist customers during their visit, provide support, and answer questions. There is no coding skill required for it.

This plugin will enable Callback, VoIP, and Video on your website. Also, it includes fully customizable graphics and real time analytics.

8. Formilla Live Chat

Formilla Live Chat

This plugin allows you to chat with your visitors with a clean and easy to use interface. You can respond to chats from your iPhone, or Android device. You can also enable the proactive chat to trigger live chat automatically with visitor after some defined seconds.

9. Live Chat by OggFlow

Live Chat by OggFlow

This plugin lets you easily add beautiful live chat to your site or blog. You can handle all the live chats, emails, tickets, Facebook and Twitter feeds. You can easily modify the look and feel of this plugin with custom CSS, logos, and messages.

10. Chat

Chat

With this chat plugin, you can bring two-way chat to your website. You can host your own live sessions, interact with your visitors and boost your sales without taking help from third party JavaScript or other codes.

Chat plugin allows you to add a site wide-chat window in the bottom corner of your site. You can also add chat to any blog post or page, and answer support questions.

Premium WordPress Live Chat Plugins

Premium Live Chat plugins have no limitation at all; you can do whatever you like with your chatroom. These plugins make your site look more official. Top plugins help you in building your brand reputation for your products. By getting the reputation as a people-pleaser and as a business that value its customers can go a long way in making a good impression. All these premium plugins are a must for you!

1. Live Chat

Live Chat

Live chat uses Ajax technique instead of Web Sockets because it is simple and works on all major browsers. No more server modifications with this live chat plugin. It works perfectly with PHP 5 servers and WordPress.

Some of the features are:

  • More than one operator can reply the same user’s question
  • Visitors can fill out contact form when all operators are offline
  • Email notifications when visitor logs in a chat.

The plugin is available in US$17.

2. Visitor Chat

Visitor Chat

This plugin is fully featured real-time chat for your WordPress website. This plugin has a window-based client out of the box. Without having to visit the admin interface, you will be notified from your Windows tray from where you can start chatting straight away.

Some of the features are:

  • Adaptable templates and translations
  • Easy integration and use
  • Clear administrator chat interface

This plugin will cost you US$33.

3. WordPress Live Chat

WordPress Live Chat

This plugin provides real time chat for the customer support. The plugin has a 3-way widget embedding including auto, shortcode, and a WP widget. It also provides high quality emoticons and avatars.

Some of the features are:

  • Multiple operators and guests chatting
  • Initial ‘welcome’ messages after guest logs in
  • Message views auto-updating their relative delivery time

This plugin is available in US$28.

4. Chat X

Chat X

Chat X answers the support questions, and solves the technical problems and product defects on your website easily. You can easily customize your chat skin, and change the colors to fit your website look and feel. The plugin runs on Firebase technology to make your chat faster and reliable.

Features are:

  • 50 users can chat at one time
  • SSL support
  • More than one operator can reply the same user’s question

The plugin will cost you US$24.

5. Rhino Live Support

Rhino Live Support

This plugin provides premium customer service for your visitors. It allows you to have unlimited operators and departments, invite website visitors, transfer customers, track IP location, and advanced statistics, etc. It also includes customer feedback form, star rating and extended statistic.

Features are:

  • Unlimited Standard Responses
  • End Conversation as an operator
  • Send any conversation to any email address

This plugin is available in US$24.

Conclusion

There you have it: plenty of WordPress Live Chat plugins to choose from. All these plugins have something little different to share with you. Start making interactions and start converting your visitors into buying customers.

What’s your favorite chat plugin? If you think I missed any important plugin that should be on the list, please do share it with us in the below comment section.

Powered by WPeMatico

What is WordPress Jetpack Advantage on Your Site (and Why You Should Care About it)

How would you like some useful premium features for your WordPress site for free? Features include email subscriptions for new posts, commenting with Twitter and Facebook log-ins, and automatically sharing new posts to your social media network. WordPress Jetpack will let you perform these cool features on your website, for free.

Jetpack is a complete toolbox full of mini-plugins. If you are in need of installing 30 separate plugins, you would have to find and install each one of them.

But Jetpack gives you all needed features in a single plugin. Today, you will learn what the Jetpack plugin is all about and how can you get it on your site. Also, this article will help you decide which modules you need for your WordPress site.

Why you should care about using the Jetpack plugin

Website Stats

Site Stats

Website stats measure the behavior of visitors and track the details of your website. Jetpack has extremely concise stats with no additional load on your server. It provides information such as Referrers, Top Posts and Pages, Search Engine terms, Subscriptions, and Clicks.

Comments

Comments

WordPress users often search for a plugin to improve the comments and make it easy for people to subscribe posts or blog. With Jetpack, your visitors can write comments and even have several ways to identify themselves. Your visitors can leave a comment as guests, or they can choose to use their accounts.

Sharing Made Simple

Sharing

JetPack allows you to easily incorporate social media sharing buttons. Just drag and drop from the given list of most relevant social networking sites available. You can also use different options to customize such as using a Facebook share button rather than using the Facebook Like button and so on.

Spelling and Grammar

Proof Reading

This can be a huge benefit to your site. Jetpack helps you avoid grammar errors and spelling mistakes that can be sometimes embarrassing. Once you have finished writing your post, you only have to hit the ‘ABC’ button for a full review of your post.

If you host your WordPress-powered site and want to take advantage of these awesome features that JetPack provides, here is how you can install and activate this plugin.

How to get the Jetpack Plugin?

Majority of hosting companies install Jetpack with the 1-click WordPress Install. If your WordPress site didn’t come with an already installed Jetpack, you can get the plugin from here. After downloading the plugin on your computer, go to Plugins > Add New.

Click the button ‘Add New’ and upload the file that you downloaded on your computer. Once you click the ‘Activate’ button, it will set up with WordPress yet will not be fully activated. This is because you need to connect Jetpack with WordPress.com to get authorized.

Activating

Activating Jetpack Plugin

For activating the Jetpack plugin, you will need to connect it to your WordPress.com account. If you are using the WordPress.org for your site, you will still need an account with WordPress.com. But don’t worry because it’s possible to get an account without using the blog service.

When you go to WordPress.com for creating your account, remember to specify that you only need a username and not a blog. Once you have created the account, just click on the Jetpack plugin on your WordPress dashboard. Your Jetpack plugin is now fully activated on your site.

Authorize Jetpack

Configuring the Modules

Once you activate the Jetpack plugin, most of the modules will be automatically turned on. However, you can have the option to only turn on the most useful ones. This will help your site to keep up with the speed and loading time. For configuring the modules, click the Jetpack on your dashboard.

Next, click the settings and uncheck the ones that you want to deactivate on your site. Once done, you can simply hit the ‘Apply’ button.

But, which module should you consider? And why should you consider it? Find out:

Which modules and why do you need them?

There are more than 30 features or modules to choose from. By clicking on title of each one, you will get a brief description of what that feature does. These are the recommended ones:

Carousel

Carousel

This module will turn your WordPress image gallery into an easy scroll in a carousel mode when users will click on your photos. If you don’t have a carousel turned on, all images that user click on will open in a new page, which can be annoying.

Contact Form

Contact Form

This module enables a simple and easy to use contact form that you can also edit. Click on the button ‘Add Contact Form’ and you can edit the fields, and then insert the form in your post or page.

Extra Sidebar Widget

This module will allow you to add widgets to your sidebar without changing any code. If you want to add an image to your sidebar, you only need to drag and drop. It allows you to display galleries, top posts, Twitter timelines and more.

Subscriptions

Subscriptions

This option provides a simple way to enable email notifications of new posts and comments to the readers of your site. Your readers can manage the frequency for receiving new posts through email, and also follow any discussion.

Sidebar Visibility

This is one of my favorite features! If you have a crowded sidebar, this module will write rules for each widget. This way, you can have specific posts appear on specific pages and will not appear on others.

Shortcodes

ShortCodes

This module allows you to write some simple codes for embedding other media on your site or blog. If you want to embed YouTube, rather than writing the code, you can simply use the following code:

[youtube=video-URL]

Mobile Theme

With this module, you can enhance user experience by customizing your mobile website and making your site load fast.

Photon

This module is great for speeding up your blog. All your images are uploaded to content delivery network (CDN) hosted by WordPress. This means that the browser can download more images at a single time, which results in a faster page load.

Publicize

Publicize

This feature makes it easy to share your site’s posts on different social media networks automatically when you publish a new post. If you don’t want to include any of the social networking sites for your post, you can uncheck from the Publicize edit link.

Infinite Scroll

Instead of having to click a link to get on next set of posts, Infinite Scroll pulls the next posts automatically when the reader reaches the bottom of page.

How much does it cost?

The cost to using all these features is absolutely free! However, according to the website, some of the individual Jetpack features may require payment in the coming future. But, you will be notified in advance about anything.

The Good

  • JetPack gives you quick and easy access to excess of features at one place.
  • Transitioning from WordPress.com to self-hosted WordPress is very smooth and improves your new site’s look and feel.
  • It has excellent anti-spam protection.
  • Perfect for personal bloggers whose needs are lightweight and not specialized.

The Bad

  • Some of the features require a manual activation while some of the widgets are auto activated, which can be little annoying.
  • Jetpack is a single plugin which has multiple plugins within, therefore, the more plugins you use, the slower your site becomes.

Why Do I recommend the Jetpack plugin?

There are plenty of WordPress plugins available on the Internet that it can sometimes become hard to choose. Jetpack has a collection of exciting features, that are all part of the same plugin, so you can be assured that they will work together.

Jetpack was developed by the Automatic, the same company behind WordPress.com, and they are also big contributors to the WordPress software. The coding is done with high quality and according to the needs of WordPress users.

Above all, the support provided is exceptional from the community support forum and through the official support channel. If you ask me to use Jetpack or not, my vote is YES!

Jetpack is useful for both experts and beginners because of its simplicity-based principle. It has a significant value when you consider how much it would cost to install all the features alone. With all these features, I would recommend that you try it on your site.

If you have tried it out, why not share your experience with us? Leave a comment below!

Powered by WPeMatico

Master the Core: Web Design Code of Ethics

Web design, like any other profession, should always be ethical. It should always adhere to a set ­­­of norms set by the whole community. These codes guide designers to perform their tasks in the most honest and professional way possible.

But for the world of web design, being dynamic and fast-paced as it seems to be, still has not recognized a single set of ethics, the web design code of ethics.

authority

That is why we propose these codes in this particular character:

  1. I will uphold honesty and fairness in treating my clients by giving my best effort in finishing projects within agreed time and budget.
  2. I will protect the interests of my clients and refuse to disclose confidential information.
  3. I will play with competition honestly and professionally and never resort to spreading scandalous, libelous and malicious information against others.
  4. I will scrupulously ensure that the designs I publish are not, in any way perceivable, misleading to potential customers.
  5. I will not distribute, use and collect unlicensed or pirated software in my projects.
  6. I will protect the Internet, and its users, against copyright violations, property theft and plagiarism to the best of my abilities.
  7. I will not make use of any spyware, inject codes within websites for my own interests.
  8. I will stay away from looping or using codes to disable the “Back button” and trap the visitors to view a page they don’t want to.
  9. I will not use techniques such as “Web Rings”, and “Black Hat” to optimize my search engine popularity.
  10. I will do away with pop-up windows and technologies that intrude private data for advertising.
  11. I will code in the simplest way possible.
  12. I will not participate, link to, or even provide my services to sites that promote, develop and showcase pornography, exploitation of women, children, racial and ethnic minorities, violence, hate groups and terrorist organizations.
  13. I will design while putting in mind the easiness and speed of user experience.
  14. I will not participate in website redirecting  to pages users don’t expect.
  15. I will design not, in any way, destroy a competitor website.

Honesty and Fairness in Treating Clients

Honesty to clients should be the premier concern of web designers. As a professional, you have to say the truth about what you think and feel about the client and the project. You need to be fair to them and never resort to overpricing, misleading work and all those shenanigans.

If you want your clients to be honest with you, you have to be honest with them first.

Things you should be honest:

swimming-in-cash

  • Pricing

Some clients are cheated in terms of pricing. At times, in the web designers’ wanting to earn more money using the least of efforts; they resort to overpricing their clients.

As a responsible web designer, you should remember to be honest about money. You should be paid at the rate of your work. Don’t put hidden charges. Be clear about additional payments for revisions and more.

How would you price your clients? These articles provide great insights:

rush

  • Deadlines

Deadlines are probably one of the things most designers lie about. Normally, clients have two ways in setting deadlines:

  1. They set the deadlines by themselves.
  2. They ask you how long will it take to design.

Scenario 1.The client sets the deadlines. This option can be pressuring for a web designer. Your client gives you a certain time to finish your project and you have to deliver on or before this said day ends.

That is a privilege you can’t take away from them. They, too, have their own deadlines to meet.Now, what will you do if the client gives you a deadline you’re not sure you can finish?

Most greenhorn designers will surely choose to take on the project, compress the time, cram and rush their task.

Some other experienced ones will still take the project on. But when the deadline approaches, they are unable to finish it.

So, what you supposed to do?

  • If you say yes to a deadline, be sure you can finish it.
  • Plan your time wisely.
  • Ask yourself: Is the payment for this project worth the rush?
  • If you feel you need some extra time, negotiate.
  • If you can’t finish it, don’t take it.

Scenario 2.You set your own deadline. This option gives the designers some flexibility with how will they finish the project. Most designers want this because they will be able to work at their own timeframe.

In this option, designers have choice how to juggle their own time.This gives the designer some flexibility on finishing the projects because they can work at their own timeframes. However, doing this will be prone to procrastination.

This gives the designer some flexibility with how the designer can finish the project. Most designers want this because they will be able to work at their own pace. Because of this, the designer has the ability to juggle his own time. However, being able to set your own deadline can lead to procrastination.

So, what are you supposed to do?

  • If you set it, then finish it.
  • Plan your time wisely
  • Set some extra time just in case things don’t work out.
  • Craft a productive schedule

Client Confidentiality

Privacy has been a well-discussed issue online nowadays. With risks in the divulgence of unsolicited information, confidentiality has become a pressing issue in web design.

An ethical designer will:

  • Always adhere to protect the identity of the clients
  • Not divulge information that the client has requested to remain secret

client-silhouette

Some clients state these things in the contract, and web designers should follow it by the dot.

Following this code would mean that you will not, in any way, discuss to competing clients and other designers the specifics of your project. Doing so might jeopardize the company and you! So, better be careful with what you blurt out.

Here are some articles that you would want to read:

Honest Competition

100-m

Of course, you are not the only person who is into web design. Whether you want it or not, there will be competition. There are some designers who came before you and they could be way better.

The best you can do is to improve your skills and talents to a point where you can compete fair and square.

Ethical designers play by the rules.They don’t engage in dirty tactics like smearing on others’ reputation. They also don’t involve themselves in hacking other designer’s works to destroy them.

To be an honest competitor, you should:

  • Play by the rules
  • Continue to improve your talents
  • Build bridges not burn them

Avoiding Software Piracy and Idea-Theft

Responsible designers are not thieves. Because they know how precious ideas are, they do not support piracy and copyright infringement. To them, using someone else’s work without giving the creator enough credit is an abomination.

Depositphotos_18564443_m

What is Software Piracy?

Software piracy is the unauthorized use and replication of software. It’s the act of using a for-one-computer-use-only software to other computers as well. This is illegal because it cripples the industry that develops the programs.

Imagine if you worked on a software for so long only to find out that days after you released it in the market, it had been copied by pirates. Your efforts, ideas and frustrations would be all for nothing.

Despite the efforts of the government, the stakeholders and programmers, software piracy is impossible to contain. There are existing laws that cover such act but with the great number of Internet pirates, it’s impossible to keep up.

Common types of software piracy are:

  • OEM unbinding
  • Softlifting
  • Hard disk loading
  • Corporate software policy and internet software policy

Depositphotos_19703235_m

What Is Idea Theft?

Idea theft is the act of snatching ideas, using and popularizing them before the victim does first.This act may include code plagiarism, copyright infringement and patent stealing. Idea thieves cripple the industry as they destroy originality in business.

There are a lot of ways to prevent this. Let’s enumerate a few:

  • Don’t reveal too much.
  • Use Non-Disclosure Agreements.
  • Apply for patent (companies or products), register your domain (web development and design) in advance.
  • Trademark your brand.
  • Document everything!

Spyware, Unsolicited Advertising and Black Hat Techniques

Depositphotos_26259243_m

Aside from stolen ideas and software, there are techniques some web designers use to harm others. As a responsible and ethical designer, you have to be knowledgeable of these practices because for all you know, you are practicing them.

Spyware

According to Microsoft, Spyware is:

“A general term used to describe software that performs certain behaviors, generally without appropriately obtaining your consent first, such as: advertising, collecting personal information, changing the configuration of your computer.”

Spyware is often paired with software that uses adware or software that tracks your personal and sensitive information.

How spyware affects you:

  • Often created for different uses, spyware is very difficult to remove.
  • They commonly alter settings in your computer causing it to crash or slow down.
  • They may either change your homepage, search tool or add bookmarks and toolbars without your consent.

Black Hat

Black hat is a famous word in SEO. However, it touches web design too as it is often used in connivance with web designers. When we say Black Hat, we refer to the aggressive use of SEO techniques and schemes to fool search engines and put a certain website in the first pages.

Popular examples of this act include:

  • Keyword Stuffing
  • Invisible text
  • Doorway pages
  • Addition of unrelated keywords to page content

Protection of Women and Children

Depositphotos_24184213_m

As a web designer and a responsible human being, you have to protect the causes of children and women. Designing web pages that can be debilitating for the reputation of women and children should be avoided. As much as possible, you shouldn’t agree to designing pornographic, pedophilic and violent websites.

Conclusion

We build websites to make the world a better place. We adhere to norms that guide us to become better web designers. For after all, we are responsible for what we build. The team here at 1stwebdesigner is one in following this code of ethics. Are you up for the challenge?

Powered by WPeMatico

Know Your Top 5 PSD to WordPress Conversion Services

Over the years, website design and development has become one of the highest paying jobs across the globe. It has become a great career option.

No matter how big is your business, a website serves as an effective tool in promoting your products and services. That is where  PSD-to-WordPress conversion services come in since the processes involved are complicated.

Why hire a WordPress conversion expert?

When you choose to convert Photoshop into a WordPress theme, good coding is vital. A company needs to hire a PSD to WordPress conversion expert because:

  • Complexity of the process – involves programming expertise
  • Website customization – proficiency in HTML and CSS coding is needed
  • Project management – best handled by a trained web developer
  • Addition of user-friendly features – a set of themes and plugins are added to give easy access with clients

A PSD-to-WordPress conversion is a process that involves several complicated operations such as PSD slicing, HTML & CSS coding, designing the initial HTML file and so on. A professional PSD-to-WordPress- theme-conversion specialist is familiar with all the complicated operations related to WordPress file structure so it makes all the elements in the project work flawlessly.

To ensure that you have a perfect website capable of delivering a superior result, why not check these top PSD to WordPress conversion services.

1. PSD to WordPress Experts

psd to wp

Image from Flickr

Being at the top of the list, this service does not require you to develop a separate website for mobile users; the service gives you a 100% responsive WordPress website for better viewing experience.

The responsive WordPress design ensures smooth navigation with no horizontal scrolling, regardless of the screen size and resolution. Moreover, their commitment to deliver on time is superb. They give better service to quality, response time, clear communication and regular customer support.

To add more, services include:

  • 100% unique PSD to WordPress themes/templates
  • SEO-semantic for improved search engine rankings
  • 100% tableless layout for fast loading speed & easy navigation
  • Completely hand-coded markups with W3C validations
  • Flawless PSD to WordPress integration with cross-browser compatibility
  • Dedicated 24/7 technical assistance
  • Exhaustive WordPress customization solution

2. CSS Chopper

csschopper

Image from Flickr

Being the leading web design and development firm in India, CSS Chopper provides high quality PSD-to-WordPress conversion services to its clients around the world. With its new service called 50/50 business partnership, web designers can showcase their designing skills via freelance web design projects.

You can get maximum profit and exposure with freelance projects. With their new system upgrade, they  level up their services by providing status about your project. You can communicate with their sales executive via email or online chat through Skype.

3. Markupcloud.com

markup clouds

Talking about efficiency and support, with Markupcloud’s professional team composing of 150+ developers, they are truly effective in giving quality services to their clients. They have a group of efficient individuals who are easy to work with. Plus, they give insight throughout the project development process.

If you are a client, it is not difficult for you to pitch in a lot of ideas. Just by giving them some input,  Markupcloud can create highly intuitive insights for your project. The technology they use is also update, ensuring that you get the best results. It also follows rigid standards as it is ISO 9001:2008 certified.

Markupcloud.com offers:

  • Seamless communication
  • Fast, high-quality conversion
  • Comprehensive workflow
  • Competitive pricing
  • Money-back guarantee
  • 100% satisfaction guarantee

4. PixelCrayons

pixelcrayons

Image from Flickr

Are you opting for a systematic correspondence and quality coding? When it comes to your website, you better choose PixelCrayons. Pixelcrayons gives maximum service to their clients by charging very affordable prices, especially for small businesses or start-ups.

They are very efficient in customizing projects that give superb results and do amazing projects in quick turnaround time.

They also have custom solutions like:

5. MarkupBox

Markup box

Image from Flickr

For over 5 years, Markupbox has been delivering specialized PSD-to-HTML conversion services based on their set of industry ethics. With proficient developers that meet your expected satisfaction level, their turnaround varies depending on the complexity of the design. Normally, MarkupBox would take 1 business day for them to deliver their first page code and 4-6 business hours for each additional page.

You can pay MarkupBox by:

  • Paying directly with your credit card through Visa, MasterCard, DISCOVER, American Express and Diners Club.
  • You can also make your payment using your PayPal account.

To Conclude

Creating a good design is a challenge of creativity which not everyone has. Coding the design requires deep knowledge of PHP, HTML, JavaScript and CSS. Thus most people can create a PSD image of their design but coding it is often a challenge. That is why you need conversion services to get things done in an easy way.

What’s the best efficient conversion services for you?

Powered by WPeMatico