Category Archives: Tutorials

Tutorials on WordPress, blogging, web writing, and related topics.

Web Accessibility: Low-Bandwidth Users

As of 2013, we have an estimated 2.7 billion users on the internet, which is nearly 40% of the entire human population (7.3 billion, as of July 2015). Of those users, only 1.8 billion are connecting to the internet at broadband speeds (this includes both land-line and mobile broadband connections). With web pages becoming more and more data heavy, thanks in large part to Plugins, large images and videos becoming common content, the 33% of internet users who have connection speeds under 150 kbits/s are at a major disadvantage when it comes to accessibility.

So what can you, as a developer, do to better serve the lower third of internet users who suffer from low connection speeds? Well, Aptivate has already put together a very comprehensive guide to developing with low-bandwidth users in mind, so in this article, I’ll just be reviewing the most important aspects of their approach.

Size Matters

One of the main points that you must be aware of when developing for low-bandwidth users, is to keep the total size of a page (including all HTML, Javascript, CSS and images) under 25kB. I know that this may not sound achievable in some situations, but in the modern age of design, minimalist structure and design is not only good for low-bandwidth users, but also for all users in general.

After all, when users arrive at a page that has too much (or too little) information displayed on a single page, they are likely to leave. This requires designers and developers to work hard at distilling the raw idea of what you need to convey to users on your site, instead of just filling your site with content.

A Picture Takes as Long as 1000 Words

Though this metric isn’t completely accurate, the message is this: If you can convey a message with words, instead of pictures, always use words. When you do have to use a picture, have it in the correct format to reduce size, and if the image is very large, consider using a thumbnail that links to the full-size image. This way, the user isn’t forced to download those large images when your page loads initially.

Cache and Inform

Allowing your site to be cached enables users to save duplicate content (like images) so they don’t have to re-download that content each time they visit your page. There are several techniques that you can utilize for this, and the full guidelines go over those techniques in their section about caching.

Lastly, it’s best to warn users of page sizes when you link to them. This way, they can decide whether or not they want to follow the link. For example, if you provide a link to a chart that details more about the subject you are talking about on your site, a user would probably be very interested in the link. However, if that chart is a 20MB image, the user may want to know that before they prepare for the 5-minute or more download time that it will take to access the information.

Additional Resources

More information on this subject can be found in thew following locations:

Web Design and Section 508

In the Rehabilitation Act of 1973, US lawmakers recognized that the emerging information technologies could restrict the opportunities for those with a disabilities. This law started the process of enforceable requirements to ensure all individuals can receive the same benefits of internet access.  Section 508, as it is known today, provides web developers the guidelines for being compliant.

This section bars the Federal government from procuring electronic and information technology (E&IT) goods and services that are not fully accessible to those with disabilities.
WebAIM.com Overview of the Rehabilitation Act of 1973

It is very clear, to do business with US federal government agencies, or any company or non-profit organization that adopts these policies, must be consistent with the Section 508 requirements. Be too creative and web design proposals can be rejected.

Web Design Requirements for Section 508

Section 508 1194.22a-p provides the 16 requirements for web design. Since they have been the standard for many years, most are included in web development tools or are considered best practices. For easy reference, listed below are the first five.  All the requirements with explanations are available at the Quick Reference Guide to Section 508: Web Based Internet and Internet Information and Applications.

  • 1194.22 (a) A text equivalent for every non-text element shall be provided.
  • 1194.22 (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
  • 1194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color.
  • 1194.22 (d) Documents shall be organized so they are readable without requiring an associated style sheet.
  • 1194.22 (e) Redundant text links shall be provided for each active region of a server-side image map.

Win Government Contracts

Web designers seeking the award of government contracts should understand the law. They should be familiar with the accessibility requirements of those with disabilities and incorporate them in all web projects.

Resources:

How to Manually Update WordPress

This tutorial will show you how to manually update your WordPress site. There are many steps, and the auto-update feature of WordPress works typically with few issues, but if you need to do this process manually, this tutorial will aid you.

Begin the process by backing up your site first. Backup your current site data by going to Tools > Export.

WordPress admin menu: Tools

Export your site contents and use that file to import the data in-case of installation failure and your site crashes.

Also take time to download all of the files of your site, especially any outside of the wp-content directory. After downloading, you may zip the files to keep them together and save space. Between these files and the XML file export, you should be able to restore your site if there are problems.

Prepare for the Upgrade

To prepare for the upgrade, you should create a maintenance file and download the latest version of WordPress.

WordPress automatic updates initiate a maintenance file, an HTML file with information that the site is in Maintenance mode and will be offline shortly. You can create one easily in a text editor by doing the following:

  1. Create an HTML file with content that alerts visitor to the site’s maintenance mode.
  2. Save the file as index.html.
  3. Upload the file to the root directory of your web host server.
  4. Uploading uploading it will overrule the index.php file and be active.
  5. To “deactivate” the maintenance file, rename it from index.html to index.maintenance. When you wish to use it again in the future, rename it back to index.html.

Go to WordPress.org and download the latest WordPress zip (or tar.gz) file, and unzip it to its own directory/folder.

  1. Update WordPress Themes: Either manually or using the auto-update feature, update all WordPress Themes. If you have Themes you are no longer using or need, consider deleting them.
  2. Updfate WordPress Plugins: Either manually or using the auto-update feature, update all WordPress Plugins. If you have Plugins you are no longer using or need, consider deleting them.
  3. Deactivate WordPress Plugins: Some manual installation methods recommend disabling WordPress Plugins, then turning them of again after the update. This is optional, but highly recommended.

The next step is to replace your existing WordPress files with the new ones.

Replace Your WordPress Files

Installing WordPress manually involves uploading files from your computer to the web server. While it might work to simply upload the files and replace the existing files, glitches in the Internet connection could result in partially uploaded files or file uploading errors. It is highly recommended that you manually delete the files before uploading to ensure a better chance at a clean upload, thus a clean update.

Ensure you protect and do not change the wp-config.php or .htaccess file and other files necessary for your site to function beyond WordPress files.

  1. Delete the old wp-includes and wp-admin directories on your web host using an FTP client or Shell access.
  2. Upload the new wp-includes folder and wp-admin. (Do not delete your existing wp-content folder, and only delete directories that you are going to replace.)
  3. Upload any remaining loose files from the root directory of the new version to your existing WordPress root directory, protecting the wp-config.php, .htaccess, and other critical files not part of WordPress.

Run the Update

In a web browser, enter the address of the site followed by update.php such as http://example.com/wp-admin/update.php. This will run the update for WordPress to ensure any modifications to the database is complete.

Go to WP-Admin > Plugins to reactivate WordPress Plugins if you deactivated them.

If you have problems logging in, try clearing your cookies.

If your old site is still showing and you have caching enabled, you may need to clear the site cache.

If for any reason you can’t figure out how to complete your installation please view the WordPress Codex page for the extended upgrade instructions.

You can also restore your backup and replace the WordPress source files from your old version by visiting the release archive.

For More Information on Manually Installing WordPress

How To Embed Storify In WordPress

For those who know about or are familiar to Storify, the social media tool that allows users to create timelines using social sites from gathering and customizing information in a way they want it to look on social media. There are now options to get it for WordPress.

On a self-hosted blog (WordPress.org), there are a couple options to get Storify. Those options are:

  • Storify’s embed codes that are designed to work anywhere supporting HTML codes: copy and pasting the code of your
    published story onto your blog post.An example of a Storify embed code.
  • If that doesn’t work, install the Storify plugin . It would make posting Storify stories much easier. A WordPress plugin for Storify.
  • If a WordPress theme doesn’t allow some of the Storify embed codes, find a WordPress plugin like User Role Editor that allows “unfiltered” HTML code.
    A WordPress plugin for user role editor that allows "unfiltered" HTML code.

How to Embed Storify in WordPress.com or WordPress Sites Without a Plugin

On a hosted site like WordPress.com, Storify embed codes or HTML by default aren’t allowed, however, you can still link to Storify posts and content with Twitter embeds, blockquotes, and screen captures, such as this example from a Storify story on WordPress security news during a major security incident a few years ago.

The screenshot example would be shown below, with a custom link around the image or before or after it to the actual news story:

Screenshot example of a Storify Article image embedded in WordPress about a WordPress Security Issue.

Using Twitter embeds in WordPress.com, or linking manually from a self-hosted version or WordPress (or one using the Jetpack WordPress Plugin), you can simple paste in the links to the tweets, often the source of the material used on Storify such as these on the same news story.

The effect is very similar to Storify, as shown in this screenshot from the original Storify story, what an embed might look like:

Storify example of the WordPress Security News Story.

Be creative and you can emulate the Storify effect.

How to Embed Storify on a Self-hosted Version of WordPress

If using the self-hosted version of WordPress, you can seamlessly embed or create Storify stories into your post using Storify plugin for WordPress VIP for WordPress.com VIP members, Storify WordPress Plugins, or use some of the other Storify WordPress Plugins.

Storify is an easy way to find, collect, and share stories to friends and family and these were options in getting it for WordPress.

For More Information on Embedding Storify in WordPress

WordPress Tutorial: When to set Attachments as Media Files

When writing a post or a page it is often useful to attach audio, video, images, text files, or zipped files to your post or page. The method you use to attach your files will play an important role in how your documents are presented in WordPress. This article will discuss when, and why you should set your attachments as Media Files, and will provide a step-by-step tutorial on how to do this. Continue reading WordPress Tutorial: When to set Attachments as Media Files

Tutorial: How to Change Your WordPress Slug

Slugs are used in the permalink structure and are created by default in WordPress. If you do not choose to define the slug, it will be automatically generated using the title of the post or page, separating each word using hyphens. While the auto-generated permalink may contain some key words, WordPress has given the user the ability to set the slug to contain the most optimized key words. The following tutorial will show you how to edit your slug in WordPress.

Go to Site Backend

Click All Posts or Pages as seen in the new interface or run your mouse over the Page or Post icon and click All Posts or All Pages as seen as the WP–Admin. All images in this tutorial will feature these two examples in the same order.

Screen shot of WordPress backpage highlighting the icon

Screen shot of WordPress backpage highlighting the icon

Select the Post or Page You Want to Edit

Here you will simply click Edit as seen in the first image or click Edit from the drop down box as seen in the second image.

This is a screenshot of selecting

 This is a screenshot of selecting

Edit the Slug

In the new WordPress interface you can simply edit the slug or click edit as seen in the second screenshot.

This is a screenshot of the slug closeup on your backpage.

This is a screenshot of where to edit your slug.

Slug Maximized

After you have edited your slug don’t forget to click on Update for your entire Post or Page.

This is a screenshot of the Update button on your Page or Post editor.

For More Information on WordPress Slugs

Tutorial: How to Contribute to WordPress

Are you interested in becoming more involved in WordPress? There are various ways in which the extreme coding extraordinaire, or even the most amateur of bloggers, can be a part of WordPress.

What is Your Interest?

Your choices are as follows:

By selecting one of the teams above, you’ll see a blog that pertains to that topic and the opportunities listed in the top portion of that post (if available):

Screen Shot from WordPress.org with links and options of how to contribute to WordPress.

To join the Core Team to help with the development of the site, you must start by reading the Core Contributor Handbook, and following the instructions to ensure you’re qualified to apply.

There are many options that you could contribute to any of the teams. Not only do you have the possibility of diving in and getting your hands dirty, but you can also attend  weekly meetings hosted via Slack , or simply just subscribe to the posts.

Beside each recent post, there will be an option to subscribe and receive email updates each time a new post is published on that topic:

Screen shot of blog in WordPress.org under Core opportunites.

Opportunities are just a click away, depending upon how involved you’d like to be.

For More Information

How to Use CSS to Stylize Headings in Your WordPress Content

So the extra-large font on the post titles and teeny-tiny text on the headings of Twenty Eleven are not doing it for you? This tutorial will show you how to spice up any theme headings using CSS and discuss the pros and cons of doing so.

Styling Headings with the WordPress Customizer or Appearance Settings

Maybe just changing the font and colors will be enough for you to style the headings.

Experiment with the WordPress Customizer settings in Appearance > Customize. It’s all automatic, so there is no need to know how to code CSS.

Pros: You can customize the appearance of your theme to your exact specifications, though the specifications maybe limited or constrained.

Cons: If you switch themes the fonts will carry over, but the CSS will not. You will also lose your customization if you upgrade your current theme for security reasons. Take a look at the Frequently Asked Questions about Customizer for all the other restrictions. Continue reading How to Use CSS to Stylize Headings in Your WordPress Content

Forms: The Real Connection to the User

A form allows a user to enter data that is sent to a server for processing.
Wikipedia

Forms on WordPress have the same limitations that an HTML form has. Granted, WordPress comes with a built-in form-making tool to make a contact form, and a tutorial for how to use that can be found in the “More Information” section below, but that’s not what I’ll be talking about.

WordPress also has numerous Plugins that allow you to utilize a tool for creating custom forms, or you could create your own with some HTML. If you just install a Plugin, the creation process is dictated by that specific Plugin, so in this tutorial I’ll be talking about making forms with raw HTML.

What Can a Form do?

A form consists of a number of varying input types, that you supply to the user, in hopes of receiving feedback. There are 23 different input types, along with the “select” element for creating a drop-down list. The full list of input types can be found on an HTML input tutorial page.

Since forms have so many input types, the applications for their use are almost endless. You could create an embedded calculator to determine a person’s BMI (Body Mass Index), or you could use a form to have users complete a survey. You could even use a form to allow users to alter program variables for software that you are running.

How do I Make an HTML form?

Technical Cafe actually has a great video that goes over the basics of creating an HTML form. Just watch the video below, and you can apply the basic input types they talk about with other input types to fully utilize the form creation possibilities of HTML.

More Information

How to: Configure Milestone Widgets

It can be exciting to display the days until a big event. An online holiday retailer may want to highlight the shopping days before Christmas. To inspire urgency, a candidate website may post a countdown to election day. Both these tasked can be automated with the Milestone Widget found on WordPress.com sites or added with a WordPress Plugin.

Listed below is a process for adding a Milestone Widget to a website. In this example, the traditional user interface is used. The fields are similar in the new UI.

Adding the Milestone Widget to WordPress.com Sites

Go to Appearance Widgets and scroll down to Milestone. Expand the Milestone Widget to present the sidebar and footer options.

A copied image for showing the selection of Milestone Widget and the assignment to the Main Sidebar

  1. Expand the Milestone Widget
  2. Select the sidebar or footer location option
  3. When complete, execute the Add Widget button

Customize the Milestone Widget with text and termination date.

A Screen shot of the Milestone Widget test field for configuring the widget

  1. Title is a short title for the milestone.
  2. Event is the text displayed in the message box along with the target date.
  3. Time and Date sets the expiration date and time.
  4. Message is the text presented in the display box after the target date expires.

This is a screen shot of the Visibility options for configuring a Widget.

  1. Visibility Button will drop down the configuration options for Showing or Hiding the Widget.
  2. Save the configurations and Close

Milestone Widget Configurations

A Milestone Widget image included a Holiday Milestone Title, a black box with Days until Christmas December 25, 2015 written in it and abox containing 1 month to goThere are a variety of ways to configure the Milestone Widget. Here are some examples:

  • Title: Holiday Milestone
  • Event: Days until Christmas
  • Date and Time: 12-Dec, 25,2015,0,00
  • Message: Merry Christmas

With only a handful of steps, a Milestone Widget can be added to a website and bring awareness to an important date.

Additional Information on Milestone Widgets

Tutorial: How to Auto Update WordPress

WordPress has two ways to update. There is a three-step process through the WP-Admin screen, while WordPress.org has a tutorial for updating for multiple versions, as well as package you can download. There is a warning: The updates can affect your files and folders including the main WordPress installation, so backing up WordPress is highly recommended.

It’s important to update; updating WordPress applies fixes and patches. WordPress does automatic updates for security and maintenance that is done in the background.

In WordPress, you can easily update your application directly from the Admin screen. When a version is available, you will see a notification in the WP Admin area. You can choose to update the newest version from this screen. There will be an important message that provides you with a button “Update Now.”

Automatic Updates

Screen shot of update notification in the WordPress WP Admin area

The following are step-by-step instructions on using the automatic WordPress update method.

  1. From the WP-Admin screen, select Updates. If there are updates that need to be installed, there will be notifications.
  2. Under WordPress Updates from the WP-Admin screen, there will be a blue button entitled “Update Now.”
  3. Select the blue button and WordPress will update. Your notification will change to “Update WordPress.”Screen shot of WordPress updating
  4. After the update has completed, you will receive a “Welcome to WordPress” notification.

Screen shot in the WP-Amin area, welcoming the new update

For More Information

WordPress Words: DIV

A “DIV” is an HTML element that divides sections of your WordPress site.

Example: A user can customize their site by adding DIV tags around their content sections in the text editor. Then they can add custom CSS to their DIV’s by going to the Theme Editor in
Appearance–>Editor–>style.css and adding a new line in the file.

.main-grid-content {display:inline-block;background-color:#FFF;}

About the Word

The DIV tag in HTML is used widely on most websites today. By default, a DIV is a block level element, which means it will take up all of the horizontal space  in its current container. In WordPress DIV’s are used to create new sections of content within your site, that may be linked to current classes or new ones.

New sections can help you separate portions of your site to add embedded maps, special offers, promotions, contact information, images and other content.

For More Information

WordPress Words: Administrator

“Administrator is a user role in WordPress. When a user installs WordPress, it creates a new user with the username and password defined during the installation. That first user is assigned the user role of administrator. They can perform all actions on a WordPress website and have full capabilities.”

What is: Administrator

Example: A WordPress Administrator is automatically setup when installation of the WordPress platform is complete. The Administrator account manages all features and users on a specified site.

About the Word

The role of Administrator on a WordPress website is to manage all users’ roles and responsibilities and features on a single WordPress site. Not to be confused with a Super Administrator, which has the capability to manage everything over multiple websites instead of one. The Administrator is the only one who has the ability to upgrade the WordPress installation. However, you can add other users to help manage content such as moderators, editors, and publishers to help build your site and maintain it. It is possible to have multiple Administrators on a single website but typically there is only one.

A screen shot on a windows operating system of the admin panel.

Only Administrators that operate a single site have the capabilities listed below. If you are however, the Super Administrator for multiple sites, these features will be available.

  • update_core
  • update_plugins
  • update_themes
  • install_plugins
  • install_themes
  • delete_themes
  • delete_plugins
  • edit_plugins
  • edit_themes
  • edit_files
  • edit_users
  • create_users
  • delete_users
  • unfiltered_html

For more information on the roles, capabilities, and beginner tutorials, check out the links below.

For More Information

Interview with Andrew Telegin

Andrew Telegin is an online editor for the Independent, the Clark College student newspaper.

Q: Do you like WordPress?

A: Yes, I really do enjoy WordPress. I think it is easy to use and fun to figure out with cool features. It has been an adventure, too.

Q: The Good and the Bad about WordPress?

A: To me, the good is how is it easy for someone new to catch on, learn, and use. I’m using WordPress.com in class and the bad is that you there is less customization of the back end and dashboard. All you can change is the colors and I would like to switch around some of the functions so they are not on the side bar and I cannot do that on WordPress.com but I can with the self-hosted version of WordPress, and we are using that on the college site.

While most of WordPress is easy-to-use and semi-intuitive, I really want to learn HTML and some basic web code to know more about how all these things work. While I’m not ready to dive fully into web programming, I know the brush with the code will help me in the future. We are into the web forever and I’m riding the wave.

Screenshot of front page of Clark College Independent.

Q: Have you worked with any other Content Management Software? What’s different?

A: I have briefly worked with SquareSpace and I do not recommend it. The menu’s are very confusing. I may have problems with learning WordPress, but it was worse there. Still, it is important to experiment with the variety of options we have out there. Continue reading Interview with Andrew Telegin

Tutorial: How To Delete Your WordPress Site

There may be a day when you realize that the WordPress.com blog address that you signed up with, may not be the one you want to stay with. If that is the case, you have a few options.  You can:

  • Change your domain name and keep all your current content.
  • Take out all of your posts, or at least the ones you don’t want, but keep the same name.
  • You can make your site completely private so that no one can see it.
  • You can transfer your site to someone else.

If you really want to completely delete your WordPress.com site, there is a way. You need to understand though that
it will be permanent!
Continue reading Tutorial: How To Delete Your WordPress Site