Connect with us

WordPress Coding & Design

Accessible Comment Form

Published

on

I’m not a designer so the idea of designing my own theme doesn’t appeal to me, however there are plenty of free themes available which means I can have a decent looking site and use my time to actually write content for it rather than procrastinating over how it should look.

However, the first thing I do when I download a new WordPress theme for my site is fix the markup. Unfortunately, whilst the themes look great they’re often not coded that well (that’s not saying all theme designers are bad at markup, but I’ve downloaded some horrendous code at times!). The section that often needs the most work is the comments form, which admittedly is often just copied from the Classic theme, although looking through a few themes I’ve downloaded over the past, this isn’t always the case.

Even to me, the comment form from the classic theme isn’t perfect. The input and labels are wrapped in paragraphs, the label comes after the input that it’s for, there’s no label for the comment textarea, and there’s no fieldset defined. That doesn’t sound so bad, but another form I just looked at had no label tags at all, which is not so good. Don’t worry if half of that made no sense, I’ll explain it step by step 😉

The Classic Comment Form

First off, let’s look at the Classic comment form. If you open the comments.php file from the Classic theme and go to line 41, this is where the following code starts:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">< ?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="< ?php _e('Log out of this account') ?>">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: < ?php echo allowed_tags(); ?></small>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>

So where do we start? Well the labels are set for the Name, Email and Website, however not the comment area. For those who don’t know what label tags do, the label tag holds the label for a field. The ‘for’ attribute within the label has to be identical to the id attribute in the field element that it’s for. So for example the label Website above has a for attribute value of ‘url’ and the input id above it is also url. What does this do? It associates the label with the input box which is good for accessibility. From a usability standpoint it also means that if you click on the label ‘Website’ it will put your cursor into the input box. That may not sound exceptional, but imagine instead that you have a group of radio buttons or checkboxes. Being able to click on the label instead of aim for that tiny box (especially when on a laptop using a stick or touchpad) is so much easier.

Anyway, so we’ve got labels for all but the comment area so we need to add this in. Obviously it will make sense to have the label before the comment form, so we can insert the following just before the opening textarea tag:

<label for="comment">Comment</label>

You may have noticed at this point, that the problem we now have is the label will come directly before the comment box on the same line. Don’t worry, we can fix that with a bit of CSS which we’ll cover later.

For the first 3 input boxes we have the label coming after their text field. From an accessibility point of view, this is wrong as the label should come first to define what’s about to appear (read more on Label Positioning). If you still want the text after the input you can do this with a bit of CSS. This is just a simple case of swapping the tags over eg.

[sourcecode language=”php”]


Comment

[/sourcecode]

Finally we want to add in a fieldset and legend. As per the definitions on the W3Schools Site

Fieldset
The fieldset element is used to logically group together elements in a form, and draw a box around them.
Legend
The legend element defines a caption for a fieldset.

So we use the fieldset to group the fields in elements in the form together. The box that a fieldset creates can be styled/removed with CSS. First we add in the opening fieldset tag and the legend just after the form has been opened using the code

<fieldset><legend>Post a Comment</legend>

This will then insert a caption above the form with the title ‘Post a Comment’. Then we need to close the fieldset just before the end of the form using the </fieldset> tag.

Final Code

So now we should have the code as follows

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<fieldset><legend>Post a Comment</legend>
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">< ?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="< ?php _e('Log out of this account') ?>">Logout »</a></p>
<?php else : ?>
<div><label for="author"><small>Name < ?php if ($req) _e('(required)'); ?></small></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /></div>
<div<label for="email"><small>Mail (will not be published) < ?php if ($req) _e('(required)'); ?></small></label>
><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /></div>
<div><label for="url"><small>Website</small></label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /></div>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: < ?php echo allowed_tags(); ?></small>-->
<div><label for="comment">Comment</label>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></div>
<div><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>
<?php do_action('comment_form', $post->ID); ?>
</fieldset>
</form>

At this point, if you try this in a theme things may look a bit of a mess. That’s just because we’ve not added the CSS yet.

Styling Your Form

Working from top down, first we deal with the fieldset. If you want to keep the border on the fieldset then skip this part. You can control the fieldsets borders with the border property in CSS. For a comment form I tend to turn the borders on the fieldset off. I also remove the margin and padding on it, so this can be achieved with

[sourcecode language=”css”]#commentform fieldset {
border: 0;
margin: 0;
padding: 0;
}[/sourcecode]

Then we can style the legend. I recommend making this bold so that it stands out ie.

[sourcecode language=”css”]#commentform legend {
font-weight: bold;
}[/sourcecode]

Then we move onto the divs and their content of the label and input. We’ve moved the label to the left of the input now within the markup. If you still want to have the label appearing on the right of the input we float the label to the right which will automatically put the input to the left of it ie.

[sourcecode language=”css”]#commentform label {
float: right;
width: 75px;
margin-left: 10px;
}[/sourcecode]

Personally I prefer to have the label to the left of the box. To do this we just float the label left and add a right margin instead ie.

[sourcecode language=”css”]#commentform label {
float: left;
width: 75px;
margin-right: 10px;
}[/sourcecode]

Regardless of which method you use, we then need to set it so that the label/input pairs are on their own line for each pair. To do this we target the div and clear the float ie.

[sourcecode language=”css”]#commentform div {
clear: both;
margin: 5px 0;
}[/sourcecode]

I’ve also added a top and bottom margin on the div to give us a little spacing between each line.

These CSS styles will need to go after the comment or form styles you’ve already got set. Ideally they should replace certain styles within your stylesheet however take care to not remove settings that are still required.

Conclusion

Are these changes a necessity for a personal blog? No. However, whilst an accessible or usable form isn’t a requirement, it’s still good practise to make your site user friendly. Also, hopefully some of the tips and info given here will help you with standard forms used on other sites too 🙂

  •  
  •  
  •  
  •  
  •  

A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

Continue Reading

WordPress Coding & Design

Will Artificial Design Intelligence Takeover Web Designing and Development?

Published

on

Artificial Design Intelligence

The worlds are colliding.

Web designing and development happens in two primary ways:

  1. DIY (bloggers and small business owners buying readymade themes, web hosting account, and setting up the website after reading a lot of online resources)
  2. Agencies (dedicated agencies that create websites from scratch, using manual coding and templates, and these are usually high budget)

There is a third way, which in the next couple of years can replace both the above methods to a large extent. Will it? Let’s see.

Artificial Design Intelligence

Artificial Design Intelligence (ADI) is the ‘third’ way wherein companies are creating technology where a website could design and build itself. In 2003, prior to ADI, Adobe unveiled its suite of web designing tools and the industry experts spelled it as a doomsday for designers.

Will this ADI technology completely eradicate the need for website designers and developers? Certainly not, says David Kosmayer from Bookmark. Bookmark is a website builder that uses ADI to cater to each user’s specific and unique needs. Kosmayer opines that ADI technology will become a productivity tool for innovative developers and designers where the technology will improve and escalate the efforts of the team involved in automating the website development process. He is anticipating a website building ADI revolution with Bookmark, thriving to be at the forefront of this inevitable movement.

David gave me an insider peek into the ADI technology they are developing, scheduled to release in the next couple of weeks. Here it is:

The ADI technology improves possibilities.

I create my own websites and blogs. Now, if I have access to technology that Bookmark is designing, it will simplify my work. It’s unassumingly perfect for eCommerce stores. The ADI asks what kind of store does the user want – from a Bistro to a Laundromat, the user has tons of varieties. Once the basic is uploaded, you can add Focus Groups and Modules, and make the site live.

This ADI technology is akin to a personal assistant that understands my business needs and creates a customized ‘product’ to use.

After Bookmark, companies like Wix and TheGrid have ventured into the AI technology space too.

AI for website development and designing is an uncharted area. Chris Lema has a brilliant article title, Has Website AI Arrived?

The world of content marketing should rejoice. AI technology will strategically and dynamically depend on content to design the layout of the site. Here, content could be anything – article length, article quantity, images, videos and more.

Artificial design intelligence is still in nascent stages.

Who could use ADI technology? Bloggers, digital marketers, affiliate marketers, consultants, and other small business owners will find AI entertaining and useful. This group of professionals is usually a one-man army with a small remote team. It cuts down cost on resources as users will probably use the ADI service on a monthly subscription basis. As such, businesses can focus on branding and generating revenue.

The stress of creating dynamic websites, learning technology, and implementing them is removed entirely.

Personally, I agree with Lema that AI technology for website development and designing is yet to mature. With the coming of chatbots and other AI software, give this a year or two before the artificial design intelligence technology for websites booms.

  • 8
  •  
  •  
  •  
  •  
Continue Reading

WordPress Coding & Design

How to Stop Comment Spam in 60 seconds with CleanTalk

Published

on

Blog comments can be one of the most valuable assets to your blog, but they can also be a huge burden at the same time. Even with Akismet installed on my blogs, I still have to manually go through and remove the junk and spam comments many of my sites gets on a daily basis.

When I login to my WordPress dashboard, I will continually junk like this just sitting there and waiting for my approval or deletion. The majority of comment spam happens because they are trying to get a backlink to a site, either through a link within the comment or from the username.

How_to_Stop_Comment_Spam

If you have a small WordPress site, you might not be getting overwhelmed with spam comments yet, but it’s simply just a matter of time. The worse part is that it’s pretty much all coming in on an automated basis, which means cleaning up your spam comments manually can waste endless hours of your valuable time.

Comment spam is something all bloggers have to deal with, and while there are ways to minimize worthless and fake comments with plugins like Akismet or using CAPTCHA forms, these methods either don’t work or are just too annoying to setup.

CleanTalk.org felt the same way and they wanted to create a comment spam solution that works for all blog site owners, while also having a solution that actually works.

How CleanTalk WordPress Spam Plugins Works

Like most things in the world, you just want the product or service to work and not have to deal with the complexities of how it’s made. This is how most online marketers and bloggers feel — they just want a solution and not have to deal with coding, programming and working with a dev team to figure it out.

CleanTalk is quite advanced on the backend, but super easy to setup and use from a site owner perspective. Through it’s cloud based platform, CleanTalk actively monitors the visitors on your site and makes sure the comments being made, are from actual visitors (not spam bots).

The process of how CleanTalk works, is as follows:

  1. A visitor writes a comment or registers.
  2. CleanTalk plugin sends action parameters into the CleanTalk cloud.
  3. Service analyzes the parameters.
  4. If this is a visitor, the comment will be published. If it’s a spam bot, then CleanTalk blocks this comment or registering.
  5. Parameters are written to the log which can be viewed in the Control Panel service.

Not only does CleanTalk protect your blog comment area, it also covers all forms throughout your site (contact, registrations, etc). When logged into your account through their site, you will also have access to real-time stats on how well it’s protecting your site and showing you what activity is happening where.

How to Install CleanTalk on WordPress

Since CleanTalk is a WordPress plugin, it’s super easy to setup. All you need to do is visit their main site at http://cleantalk.org, create an account and grab your access key on the following page.

After that, all you need to do is head over to your WordPress dashboard, go to the “Plugins” section and search for “CleanTalk”.

CleanTalk Installation

Install the plugin and then throw in your access key and you are ready to go!

CleanTalk_Dashboard

To make sure the plugin is properly installed and running, go back to your blog and complete a dummy comment, registration or contact message with the email address stop_email@example.com and you should then see the plugin react with the message like the one in the screenshot below.

CleanTalk_anti-spam_setup_on_WordPress

You can also head back to the main dashboard at CleanTalk.org to monitor your site comment stats and manage how many sites you would like to add the plugin to.

Get Your Free 14 Day Trial of CleanTalk

You can register on the CleanTalk.org site and install the plugin right away. After completing this step, you will have 14 days of free access to their comment spam blocking service. After the 14 days, you will then have the renew your account.

The good news is that the cost of CleanTalk’s comment spam blocking plugin is just $8 per year, and you can save even more by using coupon code “BLOGGINGTIPS“.

Head over to http://cleantalk.org, create your free account and add the plugin to your site. It’s only takes a couple minutes and it will save you a massive amount of time in the long run. Eliminate comment spam from your site forever!

  • 3
  •  
  •  
  •  
  •  
Continue Reading

WordPress Coding & Design

The Importance of Responsive Web Design

Published

on

Responsive web design is quickly changing how sites are viewed on the internet and on mobile devices. Back when I first started making money online in the mid 90s, everything was so basic and simple with web design… it was pretty much all HTML.

Then in 2007 I started using WordPress to create my first blog and the rest of my sites there after.

However, this was only the beginning. Now with everyone so focused on using mobile and other various devices to browse the internet and with the wide range of desktop sizes for viewing, it’s now more important than ever to make sure you have a site that is capable with all solutions.

I still find it amazing that I can look up sites on my phone or iPad and still come across sites that aren’t mobile optimized or that don’t load correctly. It’s quite a shame and something that really needs to be fixed immediately. Statistics show that 25% of internet users only access the internet via a mobile device. Have you checked how your site loads on a mobile device lately? If not, it might be time for you to invest some resources into your web design and development. By working alongside a respectable design team, they will be able to improve the performance of your site, while making sure it is fully optimized in the process.

Thus bringing us to responsive web design

Responsive web design refers to a website designed to adapt to whatever device a visitor is using. The same applies for desktop viewing as well. You can make the browser bigger or smaller and the content on the site will continue to adapt to your viewing solution.

Most premium wordpress themes are now responsive as well, as it’s almost become a requirement for site owners now.

When it comes to designing and coding wordpress themes, I’m the last guy that wants to deal with these issues. Fortunately there are designers and teams dedicated to mastering the art of design and wordpress.

For those of you who are wondering how responsive sites are created and the various tech specs involved, be sure to check out the infographic below from verveuk.eu.

What is Responsive Web Design

  • 1
  •  
  •  
  •  
  •  
Continue Reading










Trending