Adding Twitter Cards to your website can help you present your brand on Twitter in a more engaging way. By adding a simple HTML snippet to the <head> section of your page, you can make Twitter display rich content (including a summary and image) when your readers share your posts or pages on the social network. By default, when someone tweets your posts, Twitter only displays a plain URL that doesn't tell much about your content. To make Twitter show Twitter Cards rather than URLs, you need to add extra...
Semantic HTML tags allow you to add meaning to your markup so that search engines, screen readers, and web browsers can make sense of it. By default, when a user agent reads your content it doesn't understand the context and meaning. Semantic HTML tags let you serve structured content to your users, which is especially important for on-page SEO and accessibility. Although semantic tags existed in earlier HTML versions, the HTML5 specifications added several new semantic elements to the syntax—both...
Websites created with static site generators like Jekyll or Hugo are on the rise. Their popularity is not surprising. They're fast and secure, as there's no data on the server side. The web server builds and serves web pages on the fly. You don't have to worry about databases and server-side security. You can write your posts in Markdown or HTML that gets rendered nicely with the help of templating engines (Jekyll uses Liquid, while Hugo uses Go Templates). Everything is fine until you want to add dynamic...
In this weeks tutorial we'll be creating a WordPress widget to display the current weather for a specified location. To do this we'll be using the great Weather Underground API. You can sign up for a free developer account here, or sign up for a professional account to get increase request rates. Signing Up ... Once you've signed up and registered for your API key, you should see something like the following. To actually query the API we just need the API key. The Wunderground API does not use OAuth to authenticate...
In HTML5 forms got a major upgrade with the addition of some simple, yet flexible validation attributes. To support these added attributes CSS3 also added several new pseudo selectors styling controls based on their validation state. Adding validation ... To illustrate the new attributes and some of the new input types, we'll be building up a simple sign up form. Every sign up form is essentially the same, you fill in your details and click submit. How many times has the form been reset on you after you've...
Ever written a long article worthy of a table of contents and decided not to do it because it's just too much hassle? This week we'll be writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We'll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you're writing a help file for your product,...
Continuing on from last weeks introduction to OAuth 2.0 using the Twitter API, this week we're going to focus on an alternate implementation of OAuth 2.0 used in the LinkedIn API. This implementation requires that you manually authorize the application before you can get a token. This implementation is a more complex as it requires you to be re-directed to the authentication server, which then re-directs you back to your own site with the approved token. This allows LinkedIn to add additional permissions...
A few weeks ago in my Google Maps Shortcode for WordPress tutorial I covered how to create a basic shortcode. All of the settings required for the Google Maps API where included as configurable attributes for the shortcode. It was discussed in the comments that perhaps it would be better to set some of those options globally. One option discussed was modifying the wp-config.php file, this I don't think is a great idea. It would mean that it could be potentially overwritten by upgrades and is not easily...