Invoicing is one of those tasks every business has to perform, whether big or small. Whether you have one thousand employees or one employee. If you are a Limited Liability Company, (in the U.S., LLC) raising invoices is mandatory when doing business. They are used for record-keeping purposes, as well as being a handy way for you to keep track of what a client owes, and what has been paid. in this guide, I will show you how to prepare an invoice by hand, and then how to prepare and send invoices using WordPress. This last part will be useful especially if you use WordPress to conduct your business.

Preparing An Invoice

This guide walks you through preparing an invoice, but I’m assuming you have already discussed with your clients what the payment arrangements are, and that they are in writing so that both you and the client have a copy. Having a written copy of payment arrangements, (as well as documentation for other parts of the project, such as scope, deliverables, ETC.), means that everyone is on the same page and knows what to expect. The invoice is part of that process of communication. it details how much is owed, how much work has been completed, and how payment should be made.

What Should An Invoice Include?

The first thing your invoice should include is company or contractor details. These are:

  • Company or contractor’s name
  • Company or contractor’s address
  • Company or contractor’s telephone number
  • Company or contractor’s email address

Invoice Number

Each of the invoices you generate should have its own number. The numbering scheme you use is up to you, but the numbers should be in sequential order. This is so that you can keep track of outgoing and incoming invoices, and so that you have something to refer back to if questions arise.

Dates

Your invoice should include two dates:

  • The date the invoice was raised
  • The date the invoice is due

if no due date is specified on the invoice, then it is assumed to be thirty days after the invoice was generated and sent.

Client Details

Every invoice should include client details. The name should be included at a minimum, but other details such as an address or phone number can be included as well.

Fees

The fees section of your invoice should include the following:

  • A description of the services rendered
  • The gross amount due
  • The taxes due, if applicable
  • The total amount due

Terms of Payment

The terms of payment section should include how the invoice should be paid. How you accept payments is up to you. If you need the invoice paid via money transfer, that should be specified here along with your baking information:

  • Bank name
  • Account number
  • Routing number if you bank in the U.S.

Sending the Invoice

Once you have finished adding all the above details to your invoice, it’s time to send it. How you do that depends on the relationship you have with the client and what has been previously discussed concerning invoicing. Some clients want paper copies of invoices, while others will accept digital copies. If sending a digital copy, a good practice is to send the invoice as a PDF so that it cannot be altered. You can also send invoices via email or in some other attached format.

Invoicing With WordPress

As discussed above, you can generate your invoice manually. But if you’re working with WordPress, there are several plugins that will help with the invoicing process, allowing you to automate as much of it or as little of it as you like. Elegant Themes has an excellent roundup of invoicing plugins for WordPress, (both free and paid), as well as a few themes specifically created for invoicing. I personally use a plugin called WPInvoice, which leaves a lot to be desired as far as accessibility goes, but comes with a lot of features in the free version, including the ability to accept payments using Stripe, and integration with the WPCRM plugin so that I can keep track of clients and automatically select the client’s information when generating an invoice.

Summing Up

Invoicing is a necessary task. It helps ensure that you get paid. You can generate them manualy, but you can also streamline the process using WordPress, which will make invoicing much easier. There are also other non-WordPress solutions for generating invoices. If you have a favorite WordPress or non-WordPress one, share it in the comments below.

The providers of the Conductor plugin have compiled an extensive guide to developing with WordPress. There are links to free and paid tutorials, as well as podcasts and books, and they are accepting submissions to the guide through comments to the post. The guide highlights best practices and is pretty thorough so far. If you have development resources, free or paid, why not go over there and add them? I have not checked to make sure all of the listings are accessible, specifically the paid ones, and I do not think the books are available on Bookshare. Most of them are, however, available on Kindle, which you can use accessibly if you have an iPhone, iPad, or iPod current model. The guide is an excellent resource whether you’re just getting started with development or have any level of experience in that area. It’s definitely worth adding to your bookmarks/favorites if you’re interested in development for WordPress in any way, whether that be for themes, plugins, or core code.
CloudFlare a href=”http://blog.cloudflare.com/introducing-universal-ssl/”>announced on their blog today that they have started offering free SSL to all of their customers, both free and paid. There’s a lot of detail in that post, but the roll-out promises to be quick for everyone, within twenty-four hours. This is clourFlare’s contribution to a completely secure web. They’re hoping that their example will influence other providers to start offering SSL for free. We’ll see how this develops and what kind of influence CloudFlare has on the hosting/CDN industries. I’m completely in favor of a secure web and am glad that CloudFlare is making SSL accessible to a lot more people who might otherwise avoid it due to cost and/or difficulty in setting it up. This wouldn’t have happened if Google weren’t behind the SSL push. I can’t help but think of what could happen if Google got behind accessibility in a serious way like they are with SSL.
http://www.youtube.com/watch?v=XeP5Kl4GDgA
No one wakes up in the morning and says “You know what? I think it would be great if a very large subset of the web-using public couldn’t use my website”. Or web application. Pick your poison for the last word in that sentence. Nonetheless, accessibility often is last in line when it comes to project priorities. The Section 508 Refresh is right around the corner and with it, the expectation to make all government web properties compliant to WCAG 2.0 AA. For most organizations, this is nothing short of a nightmare. But does it really need to be? Accessibility requirements challenge development practices and jeopardize a project’s profitability. As accessibility affects every contributor, it is not advisable to base its liability on a single person’s shoulders. Sharing responsibilities between different specialists is the key to making accessibility happen. What if the only things an organization needed were a blueprint, a strategy and the right mindset? The slides below, delivered by Denis Boudreau at this year’s Accessibility Camp Terronto demonstrate the piitfalls of allowing accessibility to be the responsibility of one person, and also how to make the job of compliance easier for businesses.

Since I live in WordPress, I’ve heard about Easy Digital Downloads by Pippin Williamson a lot. He’s a prolific plugin author who contributes in a huge way to the WordPress community with both his plugins and the tutorials he writes, both for free and cost.

I’ve been pondering the idea of putting together some guides for WordPress that focus on performing tasks with accessibility in mind. I will still publish free tutorials on this site, but would also like to write more in-depth material.

So I took Easy Digital Downloads for a spin yesterday. I wrote a plugin that I thought would be useful and put up a post about it. As part of the work for that post, I tested Easy Digital Downloads.

The documentation promises that it’s easy. It is indeed that. But what pleasantly surprised me is that along with the ease comes accessibility. I was able to configure every option using a screen reader for the plugin, and I didn’t have to perform any crazy maneuvers to get it working. Given everything the plugin can do, I was a little worried that accessibility would have been compromised. I’m glad that I found that not to be the case.

If you’re a blind businessperson selling products that are digital, like music or ebooks, and you’re also running WordPress, give Easy Digital Downloads a spin.

Thanks Pippin. This is how you do accessible user experience. I’ll be buying extensions.

JavaScript: The Right Way is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices. It is a project hosted on GitHub that gathers together tutorials, tips and tricks that show both beginners and seasoned developers the best way to write their code so they can get things done.

It can also be used as a free JavaScript course, because it starts at the beginning. It doesn’t cover everything yet, but because it’s hosted on GitHub, that means that multiple people can contribute. Content version control in action.

You can find the tutorial here, and of course add it to your bookmarks if you want to consume it.

Many websites start out being created with nothing more than HTML, CSS, and a few images. For some, that will always be enough and there will never be any need to change. For others, however, there will come a time when more is required.

You may want to add social networking capabilities to your site. Or you may want to add e-commerce. Or you may have a large number of pages that are cumbersome to manage and update by hand. Whatever the reason, WordPress is almost always an excellent fit, and can handle a lot of the heavy lifting for you. Adding the Genesis framework will position you to more easily keep up with what the search engines want and what your readers want, and thus help you create more and better engagement, and if you’re a business, leads and sales. This combination creates a win-win for everybody.

This tutorial was written specifically for those who are ready to make the jump, but are not sure how to go about it. At first, the prospect of making this transition might seem daunting and you might wonder where to begin. Rest assured that there’s no need to feel overwhelmed because we’ll cover the process from beginning to end so that you will never get lost along the way.

In this post, you will learn how to:

  • Prepare for the transition
  • Temporarily keep your new website hidden from both visitors and search engines
  • Transfer the content from your old website into WordPress
  • Create a genesis-powered child theme using your current template
  • Protect your website’s position in the search engines
  • Make sure that your new website is error-free

Preparing for the transition

Before going any further, it’s extremely important for you to create a backup of all of the files that currently make up your static website. That way you can ensure that none of the data from your original website is lost. This is important for two reasons. The first being that it’s always best to keep a copy of every version of your website because you never know when you might need to refer back to it for one reason or another. Secondly, during the transition, you will need your static website to remain online and functional until your WordPress website is ready to go live. Should one of the files from your current website accidentally get deleted before the transition is complete, you can easily upload a replacement copy from your computer to get things back in working order.

After backing up all of the necessary files, you will next need to document the name of each of your web pages and its web address. I do this using a spreadsheet. Open your spreadsheet program and then label the first column File Names . Next, label the second column URLs. Visit your website and then begin recording this information in your spreadsheet.

This step is important because, before your WordPress website is made visible to the search engines, you will need to use this spreadsheet, along with a redirection plugin, to create several 301 (moved permanently) redirects so that the previous URL for each of these web pages points to its new location.

Hiding your new WordPress installation

Normally , after installing WordPress, you would get right to installing a theme, configuring the software to your liking, and then adding content. In this case, however, additional steps need to be taken to ensure that your WordPress installation temporarily remains hidden. Secrecy, at this point, is important for two reasons:

  • When migrating from static HTML to WordPress, it’s important that you continue to direct visitors to your original website for as long as possible. This measure will avoid a great deal of inconvenience and confusion that your visitors might otherwise suffer.
  • While creating the WordPress version of your website, you don’t want it to be prematurely indexed by the search engines because, at this point, it’s still a work-in-progress.

So, the first thing that you need to do to keep your new website temporarily under wraps is locate the index.php file located in the main folder of your WordPress installation and then rename it to 1index.php . Adding the number one to the beginning of the file name will make it easier to locate when it comes time to return this file to its original name since it should appear at the top of your file list just under .htaccess . Renaming index.php guarantees that your index.html file will continue to act as your website’s home page for the time being.

Having done that, your WordPress website is now hidden from visitors. Now you need to take steps to ensure that it’s also hidden from the search engines crawlers. To do this, begin by logging in to your WordPress administration panel. Once there, click on Settings|reading. On this screen, you will find a section labeled “search engine visibility”.

In this section, you can choose to make your site visible or invisible to the search engines. Since you don’t want the crawlers to index these pages just yet, check the box labeled “discourage search engines from visiting this site”. Then, click Save Changes .

This setting doesn’t guarantee that search engines won’t crawl WordPress since websites with this option selected have been known to have been indexed. Taking this measure does, however, at least reduce the likelihood of your WordPress website appearing in the search results until you’re ready to reveal it to the crawlers and the world.

Adding Your Content

Since your content lives on your static site as pages, you’ll want it to do so in WordPress as well. You will need to manually add all of your pages. This process may seem daunting at first, and depending on how many pages you have, it can be time-consuming. We’ll walk through this process so you can get a feel for how it’s done.

For this example, suppose that you’re recreating a page from your static site called Services . To do this, navigate to Pages | Add New . On this screen, enter Services as the title of this page. Then, paste all of the content that was previously included in the body of your static Services page into the text area. Well, almost all of the content. If you’ve included HTML 5 markup in your static pages, you won’t need to add this information, because your theme will add it for you. Now, click Publish to add this page to your site. Repeat this process for each of the web pages found on your static website until all of your content has been transferred over to WordPress.

Partially revealing WordPress

At this time, you will need to locate 1index.php on your server and then return it to it’s original name of index.php . Next, find index.html and then rename it to 1index.html . Both of these steps must be taken at this point because, once your theme is activated, you will need to be able to access your WordPress home page in order to proceed. With index.php in place and index.html renamed, your WordPress website will now be visible to visitors, but it will still be hidden from search engine crawlers.

Turning your current template into a theme

You may think that migrating to WordPress means that you will also have to give up your current website design. This, however, doesn’t have to be the case. If you’re happy with the way your website looks now, then it’s entirely possible to continue using your current design. To do this, you will need to convert your static HTML/CSS template into a theme. Since we’re using Genesis for this tutorial, you’ll need to convert your template into a child theme. This is not going to be as hard as you may think. When you purchase the Genesis framework, you get a sample child theme you can use to build cool things. We’re going to use that sample in this tutorial.

Introducing WordPress To Your Theme

In order to use your new theme with WordPress, your theme needs to arrive with some information that lets WordPress know what to call it, and that it’s a theme in the first place. To add this information, first open the style.css file in a text editor. The style.css file is found in the genesis-sample file you get when you download the Genesis framework. Unzip this file and put it somewhere you can find it on your computer. Once you’ve done that, you’ll be able to open the genesis-sample folder and find style.css.

First, you’ll need to give your theme a name. In the sample stylesheet, replace the word “sample” with your theme’s name, and keep the formatting of the line exactly how it appears. This will make things easier later if you want to make changes to this theme. Next, do the same with the description line. It’s a good idea to write an accurate but short description, so that you can easily determine which theme this is in your WordPress administration panel. After this, fill in the author (that’s you), the author’s URL (that’s your web site), and finally the theme’s version number.

After these lines, you’ll see a bit about tags. These may be useful if you plan on selling this theme later on. Next, you see some lines about the template, template version, and type of license used. Leave these intact.

Getting Down To Business

Now we get into the meat of the style. You’ll see a section within CSS comments called “table of contents”. This lets you know exactly where each section of the styling is in the stylesheet. When making your customizations, it’s helpful to add any that don’t already have an entry here to this list, and add comments above the customization. This keeps everything well-documented. Are you noticing a trend?

At this point, because StudioPress has already included most of the styling elements you’ll need for your static site, you can fill in the details where appropriate, and add anything you don’t see a style for.

Let’s Talk About Functions

If you’ve never written a program, and your only exposure to websites is to HTML and CSS, playing around with PHP can seem very scary. I promise, it’s not that bad. StudioPress has included all the functions you need for you in the sample theme, at least for a completely static web site. Of course, you can always add more later, but for now, the fact that they’ve already included what you need will save you a lot of work on the theming front. All of this documentation and inclusion is where Genesis really shines. If you were doing this with another theme, or creating a theme from scratch using the standard method used by most free themes, you’d still be creating templates and styling everything yourself.

Maintaining search engine ranking

During the process of migrating from a static website to WordPress you will be adding new pages and posts. You will also eventually delete all of your original HTML pages since they will become unnecessary and redundant. This means that your previous content will now exist on pages that are located at completely different web addresses. If nothing was done, then your website would lose its search engine ranking and PageRank for each of those deleted pages. Another consequence would be that anyone clicking those outdated links would arrive at 404 pages rather than the web pages that they hoped to visit.

This is a less than desirable situation and, luckily, it can be avoided by installing the Redirection plugin. With the help of this plugin, when the search engines arrive to crawl your website, they will be sent to the updated location for all of your old web pages. These redirects will also be beneficial should a visitor happen upon an outdated link since they will also be redirected to the page’s new location.

Introducing Redirection

The Redirection plugin is primarily designed to manage 301 redirects. This functionality is especially useful when migrating from a static website to WordPress because you’ll need to do a lot of redirection in order to get the search engines and your visitors to your new pages. In addition, this plugin also has the ability to track 404 errors. This will prove useful as it will allow you to monitor your website for errors and to ensure that everything is performing as it should be.

In order for this plugin to operate properly, permalinks need to be enabled on your site. You should, therefore, configure that WordPress setting before installing and configuring the Redirection plugin, so click on Settings | Permalinks . On this screen, in the Common settings area, choose any of the available options other than default. Then, click Save Changes .

Setting up and configuring Redirection

After installing and activating the plugin, go to Tools | Redirection . This will take you to the first page of the Redirection settings and configuration area. It’s on this screen that you will enter all of the necessary 301 redirects.

To do this, open the spreadsheet that you previously created. Copy the URL of the first static page listed in the spreadsheet and then paste it into the Source URL textbox. Next, enter the new URL for that web page into the Target URL textbox. Then, click Add Redirection . Repeat this process for each of your static web pages.

Clicking Groups , Modules , and Options will take you to additional settings screens for this plugin. These remaining options can, however, be left at their default settings and everything should run smoothly.

Completing the switch to the new website

You already began to make the switch over to your new website when you reverted index.php back to its original name and renamed index.html . With your 301 redirects in place, it’s time to complete the transition. The first thing that you need to do is delete all of the files that comprised your original website.

Next, return to settings|reading and check the box to allow search engines to begin visiting your new site.

Testing your new website for errors

One of the last steps you need to take to check your website for errors. In regard to markup and CSS vaidation, if you’ve kept to the documentation and style examples in the genesis-sample theme, your markup should be good to go, and so should your CSS. You’ll want to take the time to visit the World Wide Web Consortium and validate your links, because by doing so you’l find out which links are broken so you can fix them before you start adding new content. Waiting to do this could prove to be a huge time vampire later. You’ll also want to take the time to make sure your site is cross-browser compatible to the extent that it can be. Test it in different browsers to make sure it looks and acts as it should.

That’s It

If you’ve made it to the end of this tutorial, congradulations. You should have a fully functional website on WordPress. This is a long process, but once you’ve made the switch, managing your site becomes so much easier in a lot of ways.

Show Me Yours

I want to see what you’ve build. Feel free to leave a link in the comments and I’ll drop by.

You’ve written a stellar piece of content. Your visitors are commenting like it’s going out of style. They hit “post comment” and look through the list of comments to find there’s. They get a message saying “your comment is awaiting moderation”, and they have no idea when you’ve approved it that their juicy comment is showing up.

You can fix this

Emailing your visitors to let them know their comment is approved is something you probably don’t have a lot of time to do. It’s one thing if there are only a few of them, but when you start getting a lot of interaction, it’s just not practical. Make WordPress do it for you. Go get the Comment Approved plugin by by Neils van Renselaar.

It’s simple to use. Once you activate the plugin, you’ll find its settings in Settings > Comment Approved. Check the box to enable the “comment approved” message, and whenever you approve a comment, your visitor will get an email letting them know you’ve taken care of that for them.

The plugin comes with a couple of shortcodes, but you can customize the message using HTML. It’s a great way to award first-time commentors with a free ebook or other promotional item.

I saw on Twitter last week that the next WordSesh is being planned. So I want to share some of my favorite talks from previous events. The first one I’m sharing is on design.

This talk by Michelle Schulp is one of my favorites because it looks at design as solving problems strategically and not just making things look pretty. I’ve worked with several sites that look pretty, only to dig deeper and find that the implementation is what I end up fixing because it bleeds over into making features of the site in question break. So it was refreshing to see design treated as problem solving and not just adding what too often turns out to be a superficial varnish.

In both the Intro To HTML 5 And CSS and Intro To WordPress And CMS Fundamentals courses at the Cisco Academy for the Vision Impaired, we stress the importance of adding rich media to sites you design and build, even if you are totally blind. The web is a rich place, and its denisons have grown used to, (and like), all of that rich content. But how do you find images for a site if you are totally blind and cannot usually take the pictures yourself, and you don’t have a dedicated team of light slaves (sorry sighted people, we love you, but that’s just what we call you sometimes), to beta test the pictures you take, or you don’t have the money to use a service like this to have all the images you need described for you? (Protip: Use that service the next time you need to take a picture for a job interview. They’ll give you accurate, objective descriptions of yourself, and once you have a good picture, you can use that on resumes as well, or have it cropped to use as a social media avatar).

Fortunately, all hope is not lost. There is a reliable way to find good free images for your site that are easy to use. It will take a little work on your part, and you need to be familiar with your screen reader, but it’s definitely worth it. This method has been tested with Jaws 14 and 15, and Internet Explorer 10 and 11. Your milage may varry with other screen readers and other browsers.

We use Flikr for this, because it’s free and has lots of images that are released under the Creative Commons license. You’ll need a Yahoo ID for this, because you sign into Flikr using that ID and password. Here are the steps you need to take to start finding images:

Plan Your Images

Before you can do any searching, you need to plan what kind of images you need. What kind of images will butress your content and add flare to it. what kind of image will evoke the kind of feelings or thoughts or associations you want for your readers. For instance, if you manage a cooking site, and you’re posting a recipe for the most amazing cake ever, then an image of a scrumptious cake is what you want. Or, if you’re managing a site about beekeeping, then a picture of cultivated beehives or honey extraction is what you need.

  1. Go to the advanced search page on Flikr.
  2. Type keywords in the search box for images that you need. Also, make sure to type words you don’t want to show up in the search in the appropriate boxes. For instance, you might want roses, but not pictures of the band Guns and Roses, so type guns in the box for words you don’t want to show up in your search.
  3. Check the box that searches for photos only if you don’t want other kinds of images, and check the box that narrows your search to photos and images released under the creative commons license.
  4. Press the submit button and wait for results.
  5. Look through the page of results and pay attention to what tags are applied to
    the photos and what kind of comments people make about the pictures.
    Tags are keywords people use to describe the photo. Comments can tell
    you more about what the picture is like and how well people like it.
  6. 7. When you find one that is highly rated and sounds like what you want, press enter on its link. Its link is usually a long random string of
    letters and numbers.
  7. Do not download from this page since it defaults to a huge full screen
    picture that is 1024 by 768. It’s not what you want for a website.
  8. On that page, look for and press the actions button. It’s after the
    follow and fave buttons.
  9. Now comes the screen reader magic part. There is a silent menu
    that comes up once you press the actions button. You will need to use
    your JAWS cursor or object nav in NVDA to find the view/download all sizes button. Click that
    button with the key that’s next to the numlock key on a full-sized
    keyboard, the left mouse button.
  10. Once you click this, you’ll need to use your JAWS cursor again to
    click the view all sizes button. It’s on the same line as the download
    button, so you’ll need to be sure you click on the correct button.
  11. You’ll reach a page with multiple sizes for your chosen image. For
    icons, you’ll want the smaller format, the square or the thumbnail. For
    a regular image to use on the website, try one of the medium sizes,
    around 320 by 240 or in that neighborhood. Don’t go higher than 500.
  12. When you press the link to download the size you want, it’ll take
    you to a page where the download starts.
  13. This is very important. When the download finishes, immediately go
    to the folder with your file and give it a real name. By default the
    photo has a name that is a long string of random numbers and letters. If
    you don’t give it a better name, you’ll forget what that file is six
    months down the road. Call it something like “pink rose icon” or “red
    mountain bike medium” and make sure to keep the original file extension
    of .jpg.
  14. Now hit your back button twice. Tab to the link where you would
    follow a person’s photo stream. Press your context key and choose copy
    shortcut. This copies the URL for the person’s photo stream to your
    clipboard.
  15. The price for being able to use someone’s photo is that you must
    give them credit. People either do this by using the caption attribute
    in the img tag or by providing credit as an aside in the article where
    the photo is posted. You could also use space in your footer tag to
    provide attribution.
    Attribution consists of letting your viewers know who took the photo as
    well as posting the link to the person’s photo stream on Flickr. It’s
    not required, but I also send the person a message on Flickr to thank
    them for sharing the photo.
  16. This process works equally well using HTML or a WordPress site. Just
    do the attribution inside the caption area when you upload a photo to
    the WordPress post where the photo will be used.

We used Flikr in this tutorial, but there are tons of websites that offer creative-commons images that you can use throughout your content. As you spend more time creating content and adding images, the process becomes a lot easier and you’ll be following it like it’s second nature.

Your Turn

Now I’ll turn it over to you. If you don’t take your own pics for your site, what sources do you use to find images? Are they free? Are they paid? And if you’re a screen reader user, what accessible sources of creative-commons images have you found? Why not share your findings in the comments below?

We normally think of HTTPS (Hyper-text Transfer Protocol Over TLS) as something e-commerce or banking websites use. There are other types of sites that use it too, (webhosts can, for example, force logins to their user administration panels using https, and any site dealing in the exchange of any personal data is using it if they want to keep their good reputation intact), but banking and e-commerce are the two types of sites most users associate with secure. As of yesterday, Google is strongly encouraging everyone to use it, whether their website has e-commerce functionality or not. Google has indicated both on its Webmaster Central blog and on its Online Security blog that whether or not a site employs https will effect its ranking within Google’s search results.

For now, Google says that the https ranking signal carries very little weight, and will effect only about one percent of all rankings, but it hopes to ramp up in the future, which means that it’s likely that, at some point, if you want high rankings, your going to have to get yourself an SSL certificate, and then either learn how to install and deploy it or get someone to do that for you. It’s not a simple process.

I can see a market segment growing up around this, in both the white-hat and black-hat SEO communities. I can also envision all manner of spam opportunities arising from this, depending on how big it gets, which is something I never thought I’d hear myself say in relation to SSL certificates. I wonder when Google’s going to take the plunge and make Blogger secure?

From the official WordPress blog:

WordPress 3.9.2 is now available as a security release for all previous versions. We strongly encourage you to update your sites immediately.

This release fixes a possible denial of service issue in PHP’s XML processing, reported by Nir Goldshlager of the Salesforce.com Product Security Team. It  was fixed by Michael Adams and Andrew Nacin of the WordPress security team and David Rothstein of the Drupal security team. This is the first time our two projects have coordinated on joint security releases.

WordPress 3.9.2 also contains other security changes:

  • Fixes a possible but unlikely code execution when processing widgets (WordPress is not affected by default), discovered by Alex Concha of the WordPress security team.
  • Prevents information disclosure via XML entity attacks in the external GetID3 library, reported by Ivan Novikov of ONSec.
  • Adds protections against brute attacks against CSRF tokens, reported by David Tomaschik of the Google Security Team.
  • Contains some additional security hardening, like preventing cross-site scripting that could be triggered only by administrators.

For more information, see the release notes or consult the list of changes.

Download WordPress 3.9.2 or venture over to Dashboard ? Updates and simply click “Update Now”.

Sites that support automatic background updates will be updated to WordPress 3.9.2 within 12 hours. (If you are still on WordPress 3.8.3 or 3.7.3, you will also be updated to 3.8.4 or 3.7.4. We don’t support older versions, so please update to 3.9.2 for the latest and greatest.) If you want to update on your own, you still have the option of manually downloading the update from your dashboard and installing it yourself.

If you’re testing WordPress beta 4.0, the third beta is now available (zip) and it contains these security fixes.

Chris Lema announced on his blog yesterday that he’s joining Crowd Favorite as its CTO on September 15th. I think this can only mean good things for the community. Chris as been writing a blog since 2012 through which he inspires us all on a daily basis, for free, and he’s also been giving talks at WordCamps all over the place, through which he inspires attendees as well as those of us who catch his speeches afterwords. And Crowd Favorite? Well, they’ve been at the core of WordPress development ever since its birth back in 2003, and they’ve contributed a ton in their own right. Things such as the Carrington suite of products, (which includes Carrington Core, a completely free WordPress theme that promotes best practices when it comes to its code, and Carrington Build, a package that scratches the drag-n-drop itch while still maintaining code best practices), along with several free plugins. Yeah, Crowd Favorite is definitely part of the concrete.

Chris has been using his experience in the corporate world to help WordPress freelancers become successful. And he’s done a lot of it for free, and it’s been excellent dvice, not just some sort of teaser that says “Oh here’s some stuff I know is absolutely amazing, but you can only have it if you pay me $29,999, and even if you’re a small business you should still do it, because invest in yourself”. (I’m not saying coaches or marketers shouldn’t be paid, or even that they shouldn’t necessarily earn the amounts they are. My point is that Chris has given of his time and talent to our community, and I know several people who have turned that information into successful businesses). So we have inspiring, and a rock-solid foundation for development in the WordPress community, coming together. What could possibly go wrong with this combination?

If you don’t know who Chris Lema is, or haven’t read any of his posts, you can find out more about him over at PostStatus, and you can visit his site and subscribe to his newsletter to get the latest from his keyboard on WordPress. I promise. He’s absolutely worth every minute you spend reading.

Create HTML Tables With WordPress

Tables are an important part of many websites. They are the best way to display data that reads best in columns. Examples of this kind of data might be the numbers for a company’s balance sheet, a list of files with their descriptions and release dates, a book list showing titles and authors, or an address list.

In this tutorial, I’ll first show you how to create data tables by hand, using HTML and CSS, (I’ll leave out Sass for now), and then I’ll discuss some plugins that will make the task much easier.

The Basics

You define a table and include all of its elements between the “table” tag and its corresponding “/table” end tag. Table elements, including data items, row and column headers, and captions, each have their own markup tags. Working from left to right and top to bottom, you define, in order, the header and data for each column cell across and down the table.

Tables are treated by most browsers as a separate browser window within your page. A table can contain almost any type of HTML tag that holds content such as paragraphs, forms, images, links, scripted applets, and even other tables. Tables can be quite simple or quite complex, depending on your needs.

Tags for Tables

When making tables, you’ll use five tags. There are more tags if you want to get fancy with layouts, but the ones we’ll cover are the tags you’ll use in almost every table you create.

The Table Tag

The table tag is the way you begin every table. It tells the browser that everything you do until you close the table tag is going to be part of a table.

The “table” tag and its “/table” end tag define and encapsulate a table within the body of your document. Unless otherwise placed within the browser window by style sheet, paragraph, division-level, or other alignment options, the browser stops the current text flow, breaks the line, inserts the table beginning on a new line, and then restarts the text flow on a new line below the table.

The only content allowed directly within the “table” tag is one or more “tr” tags, which define each row of table contents, along with the various table sectioning tags: “thead”, “tfoot”, “tbody”, “col”, and “colgroup”.

The “table” tag has several optional attributes as well as many CSS properties that can be used. Some of the optional attributes are being replaced with CSS. You may want to Google these or read a book like CSS The Missing Manual to learn how they all work. We’ll focus on those used most often.

For now, optional attributes include border, cellspacing, cellpadding, background (bgcolor), bordercolor (bordercolordark), (bordercolorlight), class, cols, dir, height (hspace), (), id, lang, nowrap, rules, style, summary, title, valign (vspace), and width. There are also around a dozen mouse and key click events that you can explore if you intend to use scripting in your tables.

Preparing The Ground

Because we’re doing this using WordPress, you’ll need to add any CSS rules to your theme’s style sheet. If your theme already has styling for data tables, you can either modify those styles, or leave them as is. If not, you’ll need to go ahead and add those rules to your style sheet. If you’re using a Genesis child theme, there’s already a structure in place, including a table of contents documenting all the styles that are provided for the theme. You may wish to add an entry in the contents for the tables section. That way, you’ll be able to more easily find that section should you want to make future changes to your table styling. Next, add any style rules for tables. Make sure you add them before the media queries.

Colors

In HTML 5, it is best to specify both the background and other colors using CSS with either a tag selector for all tables or by assigning your table a class and setting colors that way. It saves you time, and the color attributes for the table tag will be going away in a few years.

Aligning Your Table

Like images, tables are rectangular objects that float in the browser display, aligned according to the current text flow. Normally, the browser left-justifies a table, abutting its left edge to the left margin of the display window. Or the table may be centered if under the influence of a centered paragraph or a centered division. Unlike images, however, tables are not inline objects. Text content normally flows above and below a table, not beside it. You can change that display behavior with a CSS definition for the “table” tag using the align property.

The align attribute accepts a value of either left , right , or center , indicating that the table should be placed flush against the left or right margin of the text flow, with the text flowing around the table, or in the middle with text flowing above and below.

Borders

Borders can and should be handled using CSS. However, if you must use this attribute in your table code, here is how it works. The optional border attribute for the “table” tag tells the browser to draw lines around the table and the rows and cells within it. The default is no borders at all. You may specify a value for border , but you don’t have to with HTML. Alone, the attribute simply enables borders and a set of default characteristics, slightly different for each of the popular browsers.) With XHTML, use border=”border” to achieve the same default results. Otherwise, in HTML 5, supply an integer value for border equal to the pixel width of the 3D chiseled-edge lines that surround the outside of the table and make it look like it’s embossed onto the page.

Cellspacing and Cellpadding

Both cellspacing and cellpadding can be handled nicely in CSS and will save you time. Use a tag or class selector, and you’re golden. However, if you want to use the attributes in your “table” tag, here’s what you need to know.

The Cellspacing Attribute

The cellspacing attribute controls the amount of space placed between adjacent cells in a table and along the outer edges of cells along the edges of a table.

Most browsers normally put 2 pixels of space between cells and along the outer edges of the table. If you include a border attribute in the “table” tag, the cell spacing between interior cells grows by 2 more pixels (4 total) to make space for the chiseled edge on the interior border. The outer edges of edge cells grow by the value of the border attribute.

By including the cellspacing attribute, you can widen or reduce the interior cell borders. For instance, to make the thinnest possible interior cell borders, include the border and cellspacing=0 attributes in the table’s tag.

The Cellpadding Attribute

The cellpadding attribute controls the amount of space between the edge of a cell and its contents, which by default is 1 pixel. You can make all the cell contents in a table touch their respective cell borders by including cellpadding=0 in the table tag. You can also increase the cellpadding space by making its value greater than 1.

Combining the Border, Cellspacing, and Cellpadding Attributes

The interactions between the border , cellpadding , and cellspacing attributes of the “table” tag combine in ways that can be confusing. You will need to experiment a bit to understand how these attributes work together.

While all kinds of combinations of the border and cellspacing attributes are possible, these are the most common:

border=1 and cellspacing=0
produces the narrowest possible interior and exterior borders: 2 pixels wide.
border= n and cellspacing=0
makes the narrowest possible interior borders (2 pixels wide), with an external border that is n + 1 pixels wide.
border=1 and cellspacing= n
tables have equal-width exterior and interior borders, all with chiseled edges just 1 pixel wide. All borders will be n + 2 pixels wide.

The Cols Attribute

Setting this attribute can make your web pages load faster and assist with screenreader navigation in large tables. Always use this attribute if you can. To format a table, your browser has to read the entire table contents, determining the number and width of each column in the table. This can be a lengthy process for long tables, forcing users to wait to see your pages. The cols attribute tells the browser, in advance, how many columns to expect in the table. This applies to the virtual buffer used by most screenreaders as well. The value of this attribute is a number, an integer value defining the number of columns in the table.

The cols attribute only advises the browser. If you define a different number of columns, the browser is free to ignore the cols attribute in order to render the table correctly. In general, it is good form to include this attribute with your “table” tag to help the browser do a faster job of formatting your tables.

The Summary Attribute

The summary attribute was introduced to HTML in the 4.0 standard. Its value is a quote-enclosed string that describes the purpose and summarizes the contents of the table. Its intended use, according to the standard, is to provide extended access to nonvisual browsers, particularly for users with disabilities.

The TR Tag

The “tr” tag defines rows in your table. Every row in a table has the same number of cells as the longest row; the browser automatically creates empty cells to pad rows with fewer defined cells. In early versions of HTML, closing the “tr” and “td” tags wasn’t necessary. Most browsers will still display your table if you don’t do this. However, for best compatibility with all browsers, close each row with the “/tr> tag.

Use CSS if you need to style rows in your tables including colors, alignment, and such. If you define classes for rows that need formatting, you won’t have to type a bunch of attributes every time you make a new row.

The “TR” tag will hold either the “td” tag or the “th” tag to make cells. Don’t put data immediately inside a “tr” tag without first adding a “td” or “th” tag first.

The th and td Tags

The “th” and “td” tags go inside the “tr” tags of a table to create the header and data cells, respectively, and to define the cell contents within the rows. These tags make the columns in your table. The tags operate similarly. The only differences are that the browsers render header text, (meant to entitle or otherwise describe table data), in boldface font style and that the default alignment of their respective contents might be different than for data. Data usually gets left-justified by default while headers get centered.

The contents of the “th” and “td” tags can be anything you might put in the body of a document, including text, images, forms, applets… even another table. Browsers automatically create a table large enough, both vertically and horizontally, to display all the contents of any and all the cells.

If a row has fewer header or data items than other rows, the browser adds empty cells at the end to fill the row. If you need to make an empty cell before the end of a row, for instance to indicate a missing data point, create a header or data cell with no content in it.

if the table has borders, empty cells look different than those containing data or headers. The empty cell does not appear embossed onto the window and is simply left blank. If you want to create an empty cell that has borders like all the other cells in your table, use a minimal amount of content in the cell: something like a single “br” tag, for example.

You can use CSS to control the appearance of cells using the “td” tag selector or by giving certain cells a class that contains a style.

The Ccaption Tag

A table often needs a caption to explain its contents, so browsers provide a table-caption tag. Authors typically place the “caption” tag and its contents immediately after the “table” tag, but it can be placed nearly anywhere inside the table and between the row tags. The caption may contain any body content, much like a cell within a table. Screenreaders do read the caption, and it can be helpful to blind and sighted users alike. Unlike the summary attribute, the contents of the caption tag always show visually on screen.

This is a time vampire! Can’t I use a plugin?

One of the great things about WordPress, (or any CMS for that matter), is that it does the heavy lifting for you. And when you’re writing content, and you want to display data in a table, allowing WordPress to handle the creation of that table with a plugin is a lot less time-consuming than switching to the code editor and manually creating it yourself. So if you’ve read this far, here are some plugins that will help.

Ultimate Tables

Ultimate Tables is a free WordPress plugin that allows you to insert tables into posts, pages, and other custom post types.

Six different styles are available with the plugin. Alternatively, you can define your own class or apply no styling to the table. Tables are configured in the settings area. From here you can define rows and columns, and enter text or HTML into cells. Rows and columns can be reordered by defining their row or column number at the side of the table.

The output of Ultimate Tables looks great. Additional rows of data can be broken up into pages.
Ultimate Tables supports search, filtering, and sorting. Once you have completed your table, you can insert it into your website using a shortcode. The table can also be placed in a widget.

TablePress

TablePress, (formerly known as WP Tables Reloaded), is easy to use and offers more custom options than does Ultimate Tables. In the settings area, you define the table name, description, number of rows, and number of columns. It supports any type of data in cells (even formulas). Rows and columns can be moved, inserted, and duplicated. Cells can also be selected and combined into larger cells. One of the great features of the plugin is the ability to select a cell and then add content using an advanced editor. This allows you to style content and insert images. Table headers and footers can be added too. There is also an option for alternating row colors and enabling row hover highlighting. TablePress features search and sorting functionality and table rows can be divided into pages. Custom CSS can be added via the plugin options page and then called in the settings area for individual tables. However, if you don’t want to add your own CSS, the default design will work as well. With the ability to import and export data using CSV, HTML, and JSON, it is a practical option for anyone who works with data tables on a regular basis.

These recommendations should get you started. If you’d like more options, Elegant Themes has compiled a list of WordPress table plugins ranging from simple to advanced, and from free to premium.

I hope you have found this tutorial useful. If you have any questions, please feel free to leave them in the comments. While you’re at it, if you have a favorite table plugin, why not leave it in the comments and I’ll add it to this post.

Shameless kiss-up: I love Genesis Office Hours. I think it’s one of the best WordPress podcasts out there, not least because it deals with the Genesis framework, which I also love.

What Is Genesis Office Hours?

Genesis Office Hours is a podcast hosted by Carrie Dils, a designer and developer using the Genesis framework. Along with designing and developing sites for cost, she provides a lot of tutorials for Genesis, showing users and other developers and designers how to get Genesis child themes to go beyond their original designs and functionality. On top of that, she hosts Genesis Office Hours, which is a podcast featuring interviews and tips from others in the Genesis community, along with the opportunity for users to ask questions and have them answered by the guest hosts and herself.

Note: I’m not going to get any money for this post, nor have I been featured on the show. I have, however, chatted up Genesis a lot, especially to my students, and I really do believe this is one of the best Genesis podcasts they, and you, could spend your time listening to.

Anyway, back to what it is. Carrie has feature guest hosts ranging from small business owners to some of the folks from Studio Press itself, and everyone’s been amazingly helpful and more than willing to share what they know. Not that this doesn’t happen with the rest of the WordPress community. But Genesis is my favorite framework, so I’m focusing on that.

Can I Watch?

Of course you can! That’s what I’m trying to get you to do after all, right? If you click on the link to Carrie’s site above, and then click on the Genesis Office Hours page, you can watch all past episodes. You can also submit your questions via the Twitter hashtag #gohchat. And here’s a helpful link to a post where Carrie gives you a bit of behind-the-scenes action. And be sure to read Carrie’s blog where she posts the show notes along with her other tutorials.

I hope that Genesis Office Hours will become a regular addition to your list of resources. It’s always great to have those to rely on.

Version control: It’s one of those handy tools developers use to keep track of changes to a project. It also makes it easier to “code in the kitchen”, as it were, by allowing for small changes we may have come up with while, say cooking dinner or cleaning the house to be made and noted, so that we can come back later and decide if we want to keep the little change, or roll it back without having to dig through lines and lines of code to find and delete it. But did you know that Git (or any other method of version control, for that matter), can also be used for design, and even content writing?

I first came across version control in the form of Murcurial while working on a project last year with Monica that involved adding content to a hand-coded site. To be honest, at first, I thought the owner of the site was crazy for insisting on version control for a hand-coded, relatively simple site, but after having switched my own processes over to version control from plain-old work-as-you-go text files, I’m thankful I was introduced.

So how do you, as a content writer or designer, implement version control? There’s an excellent post over at Flywheel that will get you started. It lays out some reasons why version control, (specifically, Git), is a good for designers, and provides some free resources for getting started. Admittedly, the concept took me a while to get used to, and I ran into some issues while getting everything initially set up, but once I got rolling, I’ve never looked back.

WPTouch is a plugin for WordPress that automatically enables a mobile theme for those who may be visiting your site on a smartphone or tablet. With five million downloads to date, it’s one of the most popular plugins in the WordPress plugin directory. Earlier today, Sucuri reported that WPTouch has a dangerous security vulnerability, and users are strongly advised to update immediately. The short version is, unless you’re running the latest update, WPTouch allows users who do not have administrative priveliges to upload php scripts directly to the server, meaning that someone with not-so-good intentions has the capability to take over any site running anything but the latest version of the WPTouch plugin.

The unpatched version of the plugin uses the “admin_init” hook as its authentication method. As was discussed previously, “admin_init” should not be used as an authentication method because it is invoked not only when an administrative user visits any page within wp-admin, but also when wp-admin/admin-post.php is visited, thus allowing anyone to upload potentially malicious code to an effected site.

If you’re using this plugin to create a mobile-friendly experience for your users, update it as soon as possible. Sucuri made the vulnerability known to the authors of the plugin, and they have uickly released a patch to the plugin directory. the only thing users of the pugin need do is update to the latest version.

Via PostStatus:

PhpStorm is a full-featured IDE that has somewhat of a cult following among WordPress developers. Made by JetBrains, it’s notable for being more light-weight than most IDEs, web development specific (though not just PHP as the name implies), and very customizable.

Today, they’ve announced that PhpStorm will begin officially supporting WordPress project management. WordPress-specific features include:

  • WordPress integration in PhpStorm for new plugins (with plugin skeleton) and existing projects
  • Development environment configuration for WordPress
  • Hooks support (Completion for registration functions parameters; Navigation from hook registration functions to hook invocation; Callbacks from hook registration; and other hooks-related features)
  • Search WordPress.org right from the editor
  • WPCLI integration

They also link to a complete tutorial on using PhpStorm with WordPress. The tutorial includes screenshots as well as text. All of the above features are available to those in their Early Access program, and will be fully baked into version 8.

Those that are familiar with using a full IDE will probably get along just fine with PhpStorm. Those that primarily use text editors like Notepad++ or Sublime Text or Coda may be overwhelmed at first. There are many advantages of using an IDE, but they’ve historically been plagued for being slow and complicated. PhpStorm works hard to not be. Along with the above-linked tutorial, there is also a paid tutorial called Make PhpStorm Pretty by Jeffrey Way (formerly of Envato).

From the Sucuri blog:

In most cases when dealing with infected websites, we know where to look and what to remove, generally with a quick look we can determine what’s going on. Despite our experience and passion for cleaning up a hacked website, there are always surprises lurking and waiting for us, almost every day. Some of the most interesting routine cases we deal with are often websites with SPAM. SPAM is in the database, or the whole block of SPAM code is stored in some obscure file. We also deal with cases where the SPAM is loaded within the theme or template header, footer, index, etc. Sometimes these SPAM infections are conditional (e.g. They only appear once per IP), sometimes not. More often than not however, these infections are not too difficult to identify and remove. In the case we’re writing about in this post, we were able not only to remove malware, but also take a look at what’s going on behind the curtain.

In this case there’s an offending plugin that’s causing the problem, namely a fake one called Pingatorpin. This plugin is not in the official WordPress plugin repository, has fake plugin headers, and googling it comes up with a lot of websites with the thing installed. Finally, all of this plugin’s files are malware. Following is a list of the files and what they do:

  • config-generator.php – Creates the config file serializing the array.
  • executor.php – Responsible for injecting require_once() into the files and logging which file is infected into files.dat.
  • remover.php – Malware cleanup script which is pretty interesting. In other words, here’s a nice script that checks for malware removal plugins or scripts, and then removes them.
  • consumer.php – The payload which will get the content from the config.db file, process the content, and echo it into the pages it wants to infect.

Just a reminder: If you can afford it, subscribe to Sucuri’s malware cleanup and detection service. It’s about $90US per site. But if you can’t afford that, be doubly sure all your WordPress-related files are up-to-date, and you can also use Sucuri’s free site check service. Also, make sure that, unless there’s a really really good reason, you install plugins only from the WordPress plugin repository. As a related note, if you’re running any other content management systems on your server besides WordPress, make sure those are up-to-date as well. And if there are any subdomains you’re not using or taking care of, it’s probably a good idea to get rid of them if they’re running a CMS so you have less to worry about updating.

Every once in a while, we need to spend time pruning our WordPress databases. But if part of your pruning task includes deleting a metric ton of posts, this can become time-consuming if you’re using the WordPress Dashboard to do it. Fortunately, there’s a quicker way to delete those hundreds, or even thousands, of posts without checking a bunch of boxes and clicking a button a couple of hundred times.

Enter MYSQL

WP-Guru has a great tutorial, complete with screenshots and example code, that will walk you step-by-step through creating the queries you need to delete those posts. I’ve used this tutorial myself, and it has saved me loads of time. So head on over and take a look, and if you’re in need try it out.