Tag Archives: tutorial

WordPress News: CDN Enabler – WordPress CDN Plugin

CDN is short for Content Delivery Network which is a network of servers that deliver cached static content from websites to users based on the geographic location of the user. A CDN will not take the place of your web hosting account but simply improve website speeds.

Advantages of Using a CDN

When a website has a high volume of traffic then the site can overload the server, which leads to a slow loading site or even server crash. This is where a CDN comes in handy because it is a network of servers, but most importantly these servers are spread throughout the world.

When a CDN is being used, the static content is cached and stored on all of these servers. Static content includes images, stylesheets (css files), javascripts, Flash, etc. When a user visits the site (original server), the CDN technology redirects them to the closest server to their location.

If your website is receiving heavy traffic and you have not yet enabled an CDN here are some good reasons to get started today:

Choosing a CDN That’s Right For You

According to Brian Jackson, most people will configure their CDN with a caching Plugin such as WordPress Cache EnablerWP Rocket, WP Super Cache, or W3 Total Cache.

However, if you are running on a managed WordPress host such as Kinsta, WP Engine, or Pagely you might not want a full blown caching plugin just to enable your CDN. This is where the free lightweight CDN Enabler WordPress plugin from KeyCDN comes into play. Note: You don’t have to be using KeyCDN to take advantage of this plugin. It will work with any CDN provider.

Installing CDN Enabler – WordPress CDN Plugin

To install your CDN Plugin follow the simple five step process with screenshots. Once the Plugin is installed you will find the following features:

  • Ability to set up CDN URL. By default it will already have the “wp-content” and “wp-includes” folders setup.
  • By default it will have “.php” setup.
  • Relative paths are enabled by default.
  • Ability to enable HTTPS.

This is a screenshot of the CDN Enabler Settings in WordPress

 

For More Information on CDNs

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

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

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

WordPress Tutorial: Categories/Tags

The following tutorial will teach you about categories and tags.

What are the categories and tags?Think of the categories as a table of contents in a book. Categories are important because they help organize, and group content so it’s easy for users to find. Tags are a lot like the index of a book.  Tags are keywords designated to an article, or a post that when a search is done, and a keyword matches a designated tag the content attached to the tag will show up. Tags can either be specific to one piece of content or multiple pieces of content.

Where to find the categories and tags?

When creating a post categories, and tags can be found to the right of the screen.

A picture of the category and tags option in post editing

Where to find categories and tags on the front side of a website?

Tags can be found at the bottom of a post.  Categories can also be found at the bottom of the post.

How to Change the WordPress Page and Post Authors

An author is the person who is credited with writing a post or page on WordPress. By default, the author is set to the name of the logged-in user who originally created the post or page. In some WordPress Themes, the author appears a a link to the users Gravatar biography, in others it may the biography as part of the page or post.

How to Select or Change Authors

Page and post authors may be changed from the edit screen on new pages/posts, or by editing existing ones Admin Side Bar > Posts/Pages > All Posts/Pages then click item to edit.

By default, the author selection menu is hidden. To unhide it, click Screen Options > Author.  The Author Menu is now added below the Visual/Text Editor (click-and-drag the menu title to move).

Screenshot showing the location of the Screen Options and Help menus in the upper-right of the Post Edit screen.

To change authors, click the drop-down selection menu:  Author > Selection. (Only one author selection is permitted; be sure to update or save).

Authorship may also be changed from the All Posts and All Pages screens, either by using Quick or Bulk Edit.

WordPress Tutorial: Adding Comics To A Blog

If you are a cartoonist or artist, you may want to share your cartoons online in a way that they incorporate into your blog. Even if you do not draw pictures, you may want a way to showcase other images at the top of your blog. This tutorial will show you how to do this in both the Twenty-Eleven Theme, and the Panel Theme.

Setting Up Shop

Before we even decide on a theme, we need to make sure the digital images or digital images of comic strips are named properly, and include alternative text, or alt tags. This is important to do as you upload the media the first time, and make a habit out of it.
Continue reading WordPress Tutorial: Adding Comics To A Blog

WordPress Plugin: Formula 1 Racing

The F1 widget is for serious race enthusiasts. It’s a countdown clock that shows time left until the next Formula 1 competition race. It updates automatically for the next race. You can use the F1 real time countdown widget on your site, phone, blog or other online platform. Always be prepared for the next race. Keep this one on your computer desktop or blog/webpage too.

Here is the widget

screen shot of the widget

Add Plugin

Start by going to your WordPress backend and select “Plugins.” Search for “One Widget Countdown.” Select “Install Now.”

screen shot of the plugin backend

Install Plugin

From “Appearance” select “Widgets” and then drag the “Formula 1 Countdown Widget” into the sidebar or other widget area based on your theme.

screen shot of the plugin backend

Configure Plugin

In the sidebar you can then configure the widget to display as narrow or wide, choose the language (default is English), and then choose F1 cars or MotoGP motorcycles.

sidebar configuration of the  plugin

Language

sidebar configuration of the  plugin language

Narrow

sidebar display of the widget configuration page

Wide

sidebar display of the widget configuration page

Code

In addition to adding a widget in WordPress, you can copy code provided on their website and add flash to other non-WordPress sites.

flash code used to generate  widget data on non-wordpress websites

The Formula 1 Widget is very easy to install. Whether you use a widget in WordPress or just copy the code and insert it into your site or blog wherever you want, you can keep a close watch on the countdown to the next big race. That is all, enjoy!

Resources

How to Write a Comment Policy

When creating a business or commercial site/blog, you’ll want to hash out your policies, especially your comment policy if you are going to allow comments anywhere on your site.

A Comments Policy is a statement defining your policy regarding comments on your blog. It is also a “responsibility statement”. It informs the reader of what you will allow on your blog, what you will not allow, and what they are allowed to do. It establishes publicly the responsibilities of each party involved.

Lorelle VanFossen

These days, a Comment Policy have become a web standard to help your readers better understand the rules when visiting.

As you decide how your comment policy is going to be laid out, consider the following: Continue reading How to Write a Comment Policy

WordPress.com Site Stats Help You Track Visitors to Your Site

They love you. They really love you! Or do they? How do you know? Site Stats.

Site Stats is a feature of WordPress.com and Jetpack WordPress Plugin that gives you information about your WordPress site visitors and statistics.

WordPress.com Site Stats tells you how many visits your site is getting, where in the world those visitors are located, which posts are the most popular, who is referring your site, tags and category data, top authors, and more. Continue reading WordPress.com Site Stats Help You Track Visitors to Your Site

Using Post Sandbox Examples for Testing WordPress Themes

You’ve just started your new WordPress site, and you are browsing the selection of Themes WordPress has to offer. You fall in love with a Theme and start filling it with content. Then you discover a huge flaw. You hate how your pictures align, and how your headings look. With a Sandbox post you can alleviate that issue.

According to the WordPress.org article “Test Driving WordPress:”

A Sandbox is a term related to the sandbox you might have played in and built sand castles in as a child. It is a playground for working on concepts and exploring your imagination.
Test Driving WordPress – WordPress Codex

Essentially, a sandbox post lets you take a test drive of your theme before you put it live on your site. It is a post that shows you an example of every HTML and CSS code and how it will be displayed. Continue reading Using Post Sandbox Examples for Testing WordPress Themes

Tutorial: How to Create a Link List

Links are a vital part of the World Wide Web. Anything can be made into a link, from words and phrases to images. A link list is, as the name implies, a list of links. In HTML, a list of links can be easily coded with <ul>, <ol>, <li>, and <a> tags. In WordPress, these are the same exact tags used to create a link list inside a post.

In this tutorial, I will walk you through the process on how to create a link list inside a post. Lorelle’s article, “The Art of List Making,” is a valuable resource on making link lists and it serves as very useful information for this tutorial.

In this tutorial, I will guide you through creating three different types of link lists in both the text and visual editors: the unordered list, the ordered list, and the nested list. Continue reading Tutorial: How to Create a Link List

WP News: Adding SVG’s with CSS, Security Releases, and Vancouver Meetup

The Clark College WordPress class students review WordPress news around the world to bring you the latest news and WordPress resources during the academic year.

WordPress Development

Styling And Adding SVG’s With CSS: This is an informative article on how to add SVG’s using CSS, written by Sara Soueidan a freelance front-end web developer. This article shows you how to export SVG’s from Adobe Illustrator, and gives you links to other articles and instructional material to optimize your SVG’s.

“CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements.”

Short Title: Summary with link of a second WordPress Development news item. Continue reading WP News: Adding SVG’s with CSS, Security Releases, and Vancouver Meetup