WordPress 5.3 has a new default theme called Twenty Twenty. Like all new things on the web, we get more space around everything.
But what else is new? We also get MASSIVE fonts! I’m talking GIGANTIC. Stand across the room and still read this kind of huge. Also, by default it gives you a narrow area to show all the content, and embedded fonts which waste bandwidth. Insert sad face here.

TL;DR: The WordPress Twenty Twenty Theme is pretty good. But it has too much empty space around everything, a tiny width for the content area by default, and ENORMOUS fonts! But we can fix it!

What is it?

The new Twenty Twenty theme is simple and focuses on usability in the WordPress Gutenberg Block Editor.

Kinsta has a nice write-up for the new theme. Check that out for some high level details about Twenty Twenty. As they put it:

“Twenty Twenty is a minimalist WordPress theme, with a single column layout.”

Problem

Single column layout.. with a very narrow column for text. Not ideal. Actually, most Gutenberg Blocks that I’ve tried can’t be changed to wide. So text and most other Blocks are using a single narrow column. That’s unfortunate.

The great thing about WordPress is it let’s you customize pretty much anything. So if you choose to use the new Twenty Twenty theme, you can improve it! That is, if you have the patience and/or skill.

In case you were wondering, this website is now using the new WordPress Twenty Twenty theme. It had a few modifications done to change things I didn’t like. Overall, it is a well done theme. But let’s just say there is room for improvement. Mainly the large fonts, the white space around everything, and the narrow area to display text and most content. Yes I could make certain blocks “wide” in the Block Editor. But not text, and I don’t want to bother with changing so many blocks.

Continue reading for my guide to improve WordPress Twenty Twenty.
If you don’t want to make all the changes manually, you can use my project on GitHub as a template to get started.

Note: Some of this will be technical and require you to edit CSS and PHP files. Be careful! It’s good to have some experience with WordPress.

Summary of what we will improve

• Reduce heading font size
• Reduce space around headings
• Increase width of text areas
• Remove Tags from bottom of Blog and Archive Page
• Delete Category from top of Blog Page and Posts
• Remove Excerpt from Blog Page
• Delete embedded fonts
• Remove Twenty Twenty 2.0 new font – Noto Serif

Here are a few before and after screenshots of these changes from one of my previous posts. Images are reduced by 50% (on a 1080p monitor).

Where did all the empty space go! So much better!
Okay, let’s get started.

Setup Twenty Twenty Child Theme

First, create a child theme for Twenty Twenty. Then add everything below into your child theme.
As previously mentioned, if you don’t want to do this manually check out my project on GitHub. It has everything that I discuss in this post!

Reduce WordPress Twenty Twenty heading font size

If the font size of the headings in the new theme bothers you. Let’s change it!

In your child theme style.css, or the CSS editor in WordPress (In Customizer, go to Additional CSS), add the following. If the font is still too large, reduce 6.4 and 4.4, etc even more.
This will only modify headings, on “wide” screens (non-mobile).

/* Smaller Heading Font please */
@media (min-width: 700px) {
  h1, .heading-size-1 { font-size: 6.4rem; }
  h2, .heading-size-2 { font-size: 4.4rem; }
  h3, .heading-size-3 { font-size: 3.8rem; }
  h4, .heading-size-4 { font-size: 3.2rem; }
}

Also copy your style.css to style-rtl.css.

Reduce space around headings

Next up, we will trim some of the extra space around the top of pages, posts, widgets, and the footer.

Again, in your child theme style.css (and style-rtl.css), or the CSS editor in WordPress, add the following.

/* Reduce white space around stuff */
@media (min-width: 700px) {
  .widget .widget-title { margin-bottom: 2rem; }
  .post-inner { padding-top: 3rem; }
  .footer-widgets-outer-wrapper { padding: 3rem 0; }
  #site-footer { padding: 3rem 0; }
}
.singular .entry-header {
  padding: 2rem 0;
}
body:not(.singular) main > article:first-of-type {
  padding: 2rem 0 0;
}
.archive-header {
  padding: 2rem 0;
}
.error404 #site-content {
  padding-top: 2rem;
}

Increase width of text areas

The Twenty Twenty Theme uses a narrow template. Some blocks can be changed to “wide” but not text. If you don’t like the narrow text area or don’t want to manually change blocks in WordPress, then this change is pretty easy. You can change this right in the WordPress Admin area using “Bulk Actions”.
Make this change to both Pages and Posts if you want wide areas in both by default.

1. In the Admin Area, go to Pages.
2. Select (with check box) all Pages you want to change.
3. Click the “Bulk Actions” drop down box, then “Edit” and finally Apply.
4. Beside Template, click the drop down box and select: “Full Width Template”
5. Click “Update”

Repeat the same steps for your Posts using the Bulk Editor.
Remember that any new Post or Page will need this changed.

Remove Tags from bottom of Blog and Archive Page

This change will eliminate the list of tags used in a post from the bottom of the Blog Page and also the Archive Page for every post.

Again, in your child theme style.css (and style-rtl.css), or the CSS editor in WordPress, add the following.

/* Hide Tags from Blog page */
.blog .post-tags.meta-wrapper {
  display: none;
}
/* Hide Tags from Archive page */
.archive .post-tags.meta-wrapper {
  display: none;
}

Delete Category from top of Blog Page and Posts

I don’t like having the category at the top of the Blog Page and at the top of the post. So let’s remove it! It’s pretty easy actually.
Just edit your functions.php file to add this:

add_filter('twentytwenty_show_categories_in_entry_header', '__return_false');

Remove Excerpt from Post

WordPress Twenty Twenty wants to show an except at the top of every post. That’s a problem for me. All of my previous posts have an excerpt that’s shown on the Blog Page. I want to keep that, but remove the excerpt from the top of the Post. Maybe some day they will add an option for that. Until then, we need to fix it our self.
To change this, copy the file template-parts/entry-header.php into your child theme and edit line 59 to add && false like so:

if ( has_excerpt() && is_singular() && false ) {

This will always evaluate the if statement to false.
Another option is to just remove that section of code.

Don’t forget, there’s a project on GitHub with all of these changes already done. So you can use that for reference.

Delete embedded fonts

The WordPress Twenty Twenty theme has embedded fonts that can’t be easily removed (yet).

Why remove the fonts? Because it adds 450kb of unneeded files to your website. Speed is important for a website. A smaller site is a faster site, and a faster site is always good! Don’t believe me? Ask any search engine that question.
Side note: Want to know more about making WordPress faster? Check out the Guide to WordPress as a Static Site. And also this great post by Mark Saric.

Back to the fonts. Until this issue is resolved, the easiest work-around to remove the included font is to zero out the file. To do this, log in to your web server where WordPress runs. Go to the Twenty Twenty main theme and empty the font files.

$ cd ~/wp-content/themes/twentytwenty/assets/fonts/inter
$ > Inter-italic-var.woff2
$ > Inter-upright-var.woff2

This isn’t a very good option since the files will be restored when the theme is updated. Let’s hope that issue is fixed soon so it can be removed properly.

Another option is to edit the main Twenty Twenty theme’s style.css and style-rtl.css, but this is also not a good option since changes there will be overwritten when the theme is updated.

$ cd ~/wp-content/themes/twentytwenty/
$ sed -i 's,src: url(./assets/fonts/inter/Inter-upright-var.woff2) format("woff2");,,g' style*.css
$ sed -i 's,src: url(./assets/fonts/inter/Inter-italic-var.woff2) format("woff2");,,g' style*.css

This removes the fonts from being embedded, on lines 265 and 273 (for current version of the theme in WordPress 5.4) of your style.css and style-rtl.css files.

Remove Twenty Twenty 2.0 new font – Noto Serif

The update for Twenty Twenty 2.0 added a new font which is much larger than the previous font. And this is used because the above bloated embedded fonts are removed!

To remove this new font, called “Noto Serif”, edit your child theme style.css to add:

.entry-content {
  font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
  letter-spacing: normal;
}

Conclusion

Now you have customized the Twenty Twenty theme!

It’s now easier to read and navigate because the headings don’t take up the entire page and your text isn’t squished into a tiny space. Goodbye massive fonts! The category was removed from the top, tags were removed from certain pages, and the excerpt is also gone from the top of every post! Lastly, it is also faster because the embedded fonts are removed.

Want to know more about making your WordPress website even faster? Check out the Guide to WordPress as a Static Site.

The post How To Set Up And Customize WordPress Twenty Twenty Theme appeared first on Ryan Daniels.

Running your own WordPress site can have it’s challenges. What if you could have all the benefits of WordPress, and also all the benefits of a static site? WordPress as a static site is the answer.

Why static HTML files? There are many benefits when serving your website as static HTML files. Here are just a few reasons:

• Speed – Static HTML files are much faster than generating a dynamic website on every page load. Page load times are so much faster!
• Security – Avoid security issues that come with PHP and WordPress Plugins since there’s no way to access PHP or the Plugins.
• Cost – Save money. You need a smaller server to host your website since less memory is required when using only HTML files.

You could create a static site using a static website generator such as Jekyll, Hugo, or Pelican. But what if you already use WordPress? Or you like all the flexibility WordPress can give you?

A WordPress Plugin called Simply Static can turn your dynamic WordPress site into static HTML pages.

This lets you use your WordPress site as a development site. When changes or a new post is ready, run Simply Static to generate the static HTML files. Then your main site is just static HTML files.

Certain types of websites will be better as a WordPress static site. Others may not.

This great post by Brian Shim with more benefits and drawbacks is worth checking out.
The main problem when turning WordPress into static HTML files is that anything dynamic will no longer work! If you’re not okay with that, there are a few fixes.

To build on Brian’s article, this was my experience and some workarounds for a short guide to WordPress as a Static Site.

Spoiler Alert: This site is using WordPress converted to static HTML files. It has been for the past 7 months. It’s really not that hard to set up if you have some experience with WordPress!

How to setup WordPress as a Static Site

As previously mentioned, follow this great post by Brian Shim first. Then follow these steps to create a WordPress static site.

Site Search

To get search working on your static WordPress site, check out my previous post: WordPress Search using DuckDuckGo.

Then, add to Simply Static’s “URLs to Exclude”:
https://dev.example.com/search
https://dev.example.com/search/.*

• Check the option: Do not save
• Check the option: Do not follow

WordPress Permalinks

Plain WordPress Permalinks are a problem (previously known as Ugly Permalinks). A normal dynamic WordPress site will figure out what to do with them by performing a database lookup. WordPress as a static site doesn’t have a database so your main page will be shown instead of the post.

Plain Permalinks look like this: https://dev.example.com/?p=123
Where 123 is the Post ID in WordPress.

Even if you don’t use Plain Permalinks, they can still show up on your site as a “shortlink”.
Note: They are also present in your RSS feed pages, but they seem to have to affect.

It’s safer to just remove the shortlink reference from the posts. You can do this by modifying your theme. Add to your child theme’s functions.php:

// Remove shortlink
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

Check that it is removed. On a post, make sure the source code doesn’t have something like this near the top:

<link rel='shortlink' href='https://dev.example.com/?p=123' />

Something else to consider with shortlinks:

If your site is new, chances are nobody has been using the shortlinks. However, if not, you should add redirects to your web server (Apache or nginx) configuration.

RSS Feed

Simply Static creates the /feed directory with an index.xml file inside. Your web server needs to know about it.

Modify your Apache or nginx configuration so the web server’s index search looks for xml files as well.

Apache: DirectoryIndex index.html index.php index.xml

nginx: index index.html index.htm index.xml;

Don’t forget to add your RSS Feed URL to Simply Static’s “Additional URLs”, for example:
https://dev.example.com/feed/

AMP

I use the WordPress AMP Plugin to generate AMP pages. There was an issue with an infinite loop of AMP pages. To be safe and avoid that, ignore any URLs inside a post’s AMP path.

For example, add to Simply Static’s “URLs to Exclude”: https://dev.example.com/blog/.*/amp/.*

• Uncheck the option: Do not save
• Check the option:   Do not follow

Disable WordPress Update Services

Not sure if this is still a thing.. but better to disable the WordPress Update Services. Since your WordPress site is now used for development, nobody should know about it.

In the WordPress admin dashboard, go to: Settings -> Writing” and delete everything in “Update Services”. Click “Save Changes”.

Test Everything on your WordPress static site!

Check your sitemaps, RSS feeds, some pages, some posts, archives, tags, and everything else mentioned above. Also check for 404 errors (pages not found).

You will probably have to add more items to Simply Static’s “Additional URLs”.

Hide Your WordPress Site

Very important! Now that WordPress is your development site, nobody should be able to access it. Don’t forget to add a password to your WordPress site with HTTP Basic Authentication for Apache or for nginx.

Conclusion

Your WordPress site is now converted to static HTML files. You can still have the benefits of WordPress to create your website, and also the benefits of static HTML files to improve speed, security, and reduce cost.

Want more speed? Do you still use the Apache web server? Stop using Apache and switch to nginx for even faster page load times!

The post Guide to WordPress as a Static Site appeared first on Ryan Daniels.

Why use an external Search Engine?

The Built-in WordPress search feature can be slow, and can cause performance issues if you run a large WordPress website.

Also, if you want to create a static website from your WordPress site you need to change the search feature to use an external search engine.

Important: This is for self-hosted WordPress websites, not a wordpress.com website.

What Search Engine to use?

There are a few options. The obvious choice is Google Custom Search Engine, because Google knows search.

However, a more privacy friendly alternative would be beneficial to your users. Since unfortunately not all users are using Firefox for privacy with a content blocking add-on. This is where DuckDuckGo comes to the rescue.

How to use WordPress Search using DuckDuckGo

There’s a few options for adding a search box to your WordPress self-hosted website.

DuckDuckGo has basic instructions for adding a search box. More specific information for WordPress is below.

Custom HTML widget

The easiest way is to add a “Custom HTML” widget to wherever you need a search box.

<form action="https://duckduckgo.com/">
<input type="hidden" id="sites" name="sites" value="ryandaniels.ca">
<input type="search" placeholder="Search &hellip;" value="" name="q" />
<button type="submit" class="search-submit"></button></form>

This is creating a form which is sent to DuckDuckGo search, using a hidden field with the value of your domain. Be sure to change it from “ryandaniels.ca”!

Of course, you will need to make some changes with CSS to make this fit into your theme.

Also be careful, other places could be using the built-in search, like on an error page. The next option solves this problem.

Create a Search Page in WordPress

If you are familiar with modifying WordPress themes this is the best and easiest method.

Create a custom search form (searchform.php file) using the WordPress Codex documentation, and be sure to put it into your WordPress child theme folder. The benefit is there’s no need to mess around with CSS, and if your theme uses a search box on a 404 page, this will automatically work!

As an example, this is based on the Twenty Seventeen WordPress theme. In your “child theme” folder, create a new file called searchform.php with the contents:

<?php
/**
* Template for displaying search forms in Twenty Seventeen
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/

?>

<?php $unique_id = esc_attr( uniqid( 'search-form-' ) ); ?>

<!-- <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>"> -->
<form role="search" method="get" class="search-form" action="https://duckduckgo.com/">
<label for="<?php echo $unique_id; ?>">
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentyseventeen' ); ?></span>
</label>
<input type="hidden" id="sites" name="sites" value="<?php echo esc_url( home_url() ); ?>">
<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="q" />
<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentyseventeen' ); ?></span></button>
</form>

The only new or modified lines are the “<form …” to tell the search box to use DuckDuckGo.
The hidden input name to use your site.
The search input name is now “q” instead of “s”.

Now anywhere on your site that uses a search box will use this new search form! You can add a search widget to your sidebar and it will go to DuckDuckGo.

Use a WordPress Plugin

WP Google Search
DuckDuckGo Plugin (unfortunately no longer available)

Other options

These are other options, which probably aren’t a good idea. I’ll list them anyways. But just don’t.

Use .htaccess to redirect the search query yourdomain.com/?s=search before it gets to WordPress. Since WordPress redirects searches to /?s=search (where search is the search text), you could use .htaccess redirects to catch the /?s= and do a redirect to an external search engine. Why this is a bad idea? Don’t have any root directory redirects, it could hurt your SEO (used for search engine ranking). There’s also a performance impact having Apache (or nginx) web servers perform this operation on your root web directory!

Create a PHP page to do the redirect. This can also work, but unless you need more control of what’s sent to the external search engine, the other options work fine with less overhead.

Conclusion

Now you have created a custom search form on your WordPress site. You’ve reduced your overhead needed by WordPress and now have the option to setup a static WordPress website!

Want to try a demo? Use the search box on my site! I created a custom search page in my WordPress theme.

The post WordPress Search using DuckDuckGo appeared first on Ryan Daniels.

Most people have pictures on their website. If you don’t have any pictures, you probably should! When these pictures are original works you don’t want other people using them. A watermark can help deter unwanted use of your pictures. Another reason to add a watermark is if you want your logo on your pictures so people can identify your brand.

One way to help do that is by adding a watermark. Using a WordPress Plugin, you can automatically add watermark to your pictures. This is the second post in the Essential Guide to Images on your Website series.

Automatically Add Watermark

I like the free WordPress plugin Easy Watermark. It has many options to use text or a picture for the watermark. It can also automatically apply the watermark to your picture when you upload it to WordPress. If you don’t want that, you can do a batch watermark on all your pictures or manually choose which existing pictures to watermark.

You might not want all images that WordPress automatically created to be watermarked. For example, the Thumbnail size is so small you might not want to see the watermark on it when reading your article. You only want the full size picture to have the watermark. Easy Watermark has the option to only apply the watermark to the image sizes you want.

The settings I use so both portrait and landscape pictures look good with a watermark:

Notice I use an Image for the watermark. You can create the watermark image using paint.net. More about that tool in my next post about Image Optimization Guide. Be sure to use a PNG file with transparency, and you’ll be good to go.

Wrapping Up

Adding a watermark to a picture is simple using a free WordPress plugin. If you don’t want to use a plugin for this task, you can also manually add a watermark using your photo editing software of choice. I’d rather save some time and let WordPress handle the job!

The post How to Automatically Add Watermark using WordPress appeared first on Ryan Daniels.

Don’t let your website be a victim of content theft!
Stop other websites from using your website content with their message (overlay) over top.

Some websites offer a “service” to create their own call to action over top of any website. Why is this a problem? If some other person is using your content with their own call to action or ads on top it can appear that they created the content.

They are getting the benefit from your content. Some would consider that content theft. At best it’s pretty shady.

How to Stop iframe Content Theft

To stop this, there are a few options.

1. Add one line of code to your web server config or .htaccess file
2. Use a WordPress Plugin to add that one line of code
3. Use a WordPress Plugin to use JavaScript

One line of code

The most efficient way to stop this is to add one line of code to your web server configuration file. This will block any website that is trying to use an iframe to load your website. Don’t worry, it won’t break anything on your own website if internally you want to use an iframe.

In your root .htaccess file or Apache httpd.conf (/etc/apache2/httpd.conf) add this:

Header always append X-Frame-Options SAMEORIGIN

The SAMEORIGIN option means you can still use an iframe to load anything from your own website in an iframe.

Plugin to add that one line of code

There is another option if you can’t edit the .htaccess file or are not comfortable with that. You can install the WP no-iFrames plugin (free) to do this for you.

The above methods will completely block any website trying to use your content in an iframe. Some of these overlay “services” won’t even let a user create content from your website because it is now “secure“. Your content is now safe from this iframe content theft!

Here’s an example of what it now looks like when blocking the iframe content theft.

Plugin using JavaScript – Frame Buster

A third option is using a bit of JavaScript to gracefully block any overlay, and then redirect the user to your website. This is a great way to still get the visitor to your website when a shady overlay website is trying to use your content. That will show them!

A free plugin called Frame Buster from Warfare Plugins can do this for you.

[Tweet “Don’t let your website be a victim of content theft”]

Conclusion

If you want a quick way to block content thieves from using an overlay on top of your content you can use one line of code to block them. No plugin needed.

However if you want to redirect that user to your own website and don’t mind using another plugin to do this, then Sniply Buster is for you.

Apparently only 1% of websites are blocking these tools. Let’s get this number higher. Don’t let your website be a victim of content theft!

The post Stop iframe Content Theft appeared first on Ryan Daniels.

Too many websites have a poor look and feel to them. The user experience of your website needs to be awesome.

One easy way to improve the user experience is by having your pictures displayed beautifully. How? In this post I’ll talk about the best WordPress Lightbox plugin, and a few alternatives. For other great plugins be sure to check out The Best WordPress Plugins to Kick-Start your Blog.

Ok, lets talk about Lightbox.

A great way to improve your website is by having beautiful pictures that look even better when a user clicks on them and they open up smooth and seamlessly to a larger picture.

Being seamless is the key idea here. You don’t want a user to click on a picture and they are taken away from your website.

Here’s an example of what I mean:

You click on the above picture, and you are taken away from my website. The picture opens and to go back you need to click your back button. Hopefully you do click on your back button and continue reading this!

That’s a problem. I’ve essentially left the website I was on to look at a picture. Will I come back? Will your visitor come back?

How to fix this bad user experience?

Lightbox has been around for several years. It is a way to display images (and video) by filling the user’s screen and dimming the rest of the webpage. (Thanks Wikipedia)

The Best WordPress Lightbox Plugin

WP jQuery Lightbox

The WP jQuery Lightbox (free) WordPress plugin is extremely simple to use. Just install it, change a few settings and everything else is automatic. All your pictures will automatically be displayed using Lightbox and look great.

Also, the resource usage is very light compared to other Lightbox plugins. Your website will continue to load fast for your visitors.

Give it a try now, with the Lightbox effect enabled. Doesn’t it look so much better than the first time you clicked on it? You can even have a caption displayed with the picture.

Two other alternatives:

Simple Lightbox (free). Also easy to use, but uses more JavaScript/code than WP jQuery Lightbox so it is heavier on resources and page loading time.
WP Lightbox 2 (free/premium). Has more options if you pay for it. Also needs more resources.

These all work for pictures, but what about video?

Another plugin to the rescue. WP Video Lightbox (free) can handle youtube and vimeo videos in a Lightbox display. Is it worth adding another plugin to do this? In my opinion no, it is not needed. The built-in WordPress support for embedding works well enough.

Notable mention

Gmedia Gallery (free) is another alternative which can do images and local video. The one nice thing about this plugin that I really like is the thumbnail view. It looks great. If you need something more advanced this is the plugin to use.

[Tweet “Improve your website user experience. The Best #WordPress Lightbox Plugin”]

Conclusion

Adding the Lightbox effect to your WordPress website can really enhance your pictures and overall user experience. The best WordPress Lightbox plugin is WP jQuery Lightbox. It is easy to use, and light weight on resources and page loading time.

If you need something more advanced (with a very nice thumbnail view effect), try Gmedia Gallery.

What do you think about the Lightbox effect? Have you found a better plugin? Let me know in the comments.

The post The Best WordPress Lightbox Plugin appeared first on Ryan Daniels.

In this post I’ll discuss how to update WordPress. Along with why you need to stay current, and tips for knowing when to update.

WordPress is a popular platform. With that popularity, sometimes it creates unwanted attention. Having a large number of websites all running the same software could create an easy target if there is a security vulnerability.

Don’t let your website fall behind with updates. Keeping WordPress up to date also helps to keep your WordPress site secure. Other important WordPress components I’ve mentioned before are plugins and your theme. It is also recommended to keep those updated.

3 reasons to update WordPress

Security, bug fixes, and new features.

You don’t want a bad guy getting into your website. Keeping WordPress up to date is a good start to reducing the risk.

The second and third benefits of keeping your WordPress installation updated: you also get all the bug fixes and new features from the WordPress core team and the plugin & theme developers.

You want everything to be secure, running smooth and as efficient as possible.

What to update? Your entire WordPress installation

WordPress core

WordPress has a major and minor version number. Currently the WordPress version is 4.2.2. By default the major version is not automatically updated. However, the minor versions are. Any security patches are included in a minor version and automatically updated. Leaving this default behaviour is recommended.

WordPress Plugins

Plugins need to be updated manually (except in special cases).

WordPress Themes

Themes need to be updated manually (except in special cases).

Know when to update WordPress

By default, the only way to know an update is available is when you log in to your WordPress website. At the top of the WordPress Admin Screens is a bar telling you to there’s an update.

Plugin to notify you by email

It’s not always possible to check for updates regularly. WP Updates Notifier is a useful plugin to let you know (by email) when there is an update available for the WordPress core, plugins or themes. Set how often to check for updates, enter your email, and notify on all plugin and theme updates. That’s it!

How to update WordPress

You need to be careful when you update the WordPress core, plugins and themes. You don’t want an update to break your website. It’s best to manually update them.

Here are the steps you can follow when there’s an update available:

1. Backup development website and verify the backup works
2. Update WordPress development website
3. Test website functionality

Hopefully all goes well. Do the exact same thing on your production website:

1. Backup production website and verify the backup works
2. Update WordPress production website
3. Test website functionality

It is always better to update your development site first. This way you can test for any issues without the risk of breaking your “production” website. Make sure you make a backup first and verify it works! Sometimes testing on a development website isn’t possible all the time. In this case, make sure you at least have a backup so you can rollback to a working state.

[Tweet “How to Update #WordPress”]

Conclusion

Keeping everything in your WordPress installation updated is a great start to keeping your website secure and running smoothly. Use your development environment first to test the new update and then perform the update on your production website. Don’t forget to make a backup.

The post How to Update WordPress appeared first on Ryan Daniels.

In this post I’ll talk about how to make a WordPress backup for your website.

Nobody wants their website to go down. But if it does you will need a backup of your website to get up and running. Don’t get stuck in a situation of being without a backup when disaster strikes.

Did you make a change and lock yourself out? Did you make a change and the only way to go back is from a backup? Make sure you have a WordPress backup!

What is a WordPress Backup?

Creating a scheduled backup is one of the most important maintenance tasks you can perform. Most hosting providers (including SiteGround) offer an option to back up your WordPress website. However, just to be safe (and so you can quickly have access to your backups), you should also take your own backups.

There are two items you need: Your database and the files on your website. The database contains all of your posts, pages, links, etc. The files contain the core WordPress installation, all of your plugins, themes, and pictures.

How often you perform a backup is up to you. If you post once a week, then a weekly backup is probably enough. If you have a very busy website and you post more often, you’ll also want to create backups more often. Think of it this way, realistically, how much data are you willing to lose?

Also, be sure to store your backups in two or three places. Only keeping them on your local computer isn’t recommended. It’s best to keep a backup in a few places, including on your local computer, “in the cloud”, and in your email (if size permits). By keeping backups in multiple locations you can ensure at least one will be available.

File Backup

The files on your website can be very large. So emailing them isn’t an option. To easily backup your files, I recommend the free plugin WordPress Backup to Dropbox. It gives you the option to specify how often you want to take a backup. Plus, once your files are on Dropbox, you can copy them to your local computer so you store your backup in a few places.

Database Backup

Backing up your database is just as important as backing up the files on your website. An easy solution to back up your database is the free plugin WP-DBManager. You can set a schedule to send the database backup as an email. The database backup size shouldn’t be too big so emailing it won’t be a problem.

Premium Solution for File and Database Backups

The last option I recommend is VaultPress. They offer premium solutions starting at $5/month. If you don’t mind spending $5 per month this option is even easier than the above mentioned plugins. In addition, if you use the Jetpack plugin (which you really should) there is already built-in integration with VaultPress so you don’t need to install another plugin.

Conclusion

Keeping a recent WordPress backup will save the day if your website goes down. Having a simple solution is important to ensure you have a WordPress backup and the above solutions will give you that simplicity.

If you don’t have a WordPress backup yet, create one right now!

The post How to Make a WordPress Backup appeared first on Ryan Daniels.

Nobody likes to click on a link and get an error page. It’s frustrating, and as a website visitor you usually just give up.

Picture this, as a website owner, you want your customer to go to a great post about something amazing but, instead, your reader gets the dreaded 404 error page. Odds are, they gave up after that error and left your website. That’s not good for anyone.

Another problem with broken links is that search engines don’t like them. You need search engines to show your webpages to potential customers, and it’s more difficult for search engines if the internal link is broken.

In this post I’ll show you how to find broken links on your website and fix them.

How to Find Broken Links

It’s important to regularly check for broken links on your site.

To find broken links on your website you can:

• Manually check
• Use an external tool
• Use a WordPress Plugin

Let’s take a look at each option.

Manually check

To find broken links on your website you could manually click on every link on your entire website. However, this could be very time consuming to do on a regular basis.

There is one time when you should actually do a quick manual check. That should be done before you post a new article or page.

Use an external tool

Instead of clicking on every link on your website, you can use a tool to find broken links for you.

The best way to check is using a tool like Link Checker by W3C. Enter your website address, and it will scan your webpage to find broken links. The results the tool finds will be displayed so you can take action to fix them.

Another tool to help find broken links is Google Webmaster Tools. Under the section “Crawl > Crawl Errors” you can see which pages had errors from Google trying to index your website.

Use a WordPress Plugin

One other option is to use a WordPress plugin. If your goal is to limit your plugins (and it should be!) then I recommend manually checking for broken links every month using the above two tools. But if you really must, you can try the Broken Link Checker plugin.

How to Fix Broken Links

Internal Broken Links

As an example: If you change a category name or your “About” page to “About-Us” you could have internal broken links, but it may not show up with the previous tools. This happens if other people use the old links to get to your website.

To easily fix this scenario, use the plugin Redirection to create a 301 Redirect rule from the old (broken) link to the new internal link. It’s best to do this right after you make the change in the category “slug” (the URL-friendly version of the name) for example.

The Redirection plugin is great for fixing internal broken links.

This plugin can also show you how many 404 errors your website has after it has been running long enough to collect the data.

External Broken Links

Another example is if you make a typo in a link to an external website. If this is the case using the previous tools like Link Checker by W3C would identify this and you will need to edit your post to correct the broken link.

Conclusion

Finding broken links on your website is all part of maintaining your website. It’s not the most exiting task in the world, but it’s something that needs to be done. Lucky for us there are tools available to help automate the job.

What methods do you use to find broken links on your site? Leave a comment and let me know.

The post Find Broken Links on your Website appeared first on Ryan Daniels.

In this post I will take a close look at all of the things you need to consider when choosing a WordPress Theme. I will also provide you with some of my picks for the best WordPress themes.

Imagine this, you have the greatest content on your website (or plan to shortly) and really think everyone should be reading it. The problem is, people aren’t paying attention. You get a few visitors but nothing like what you expect. You want to be getting tons of traffic to your website.

What could be the problem? Does your website look like it was made 10 years ago? Is it too boring or distracting? Choosing the best WordPress theme for your website can make all the difference to present your content in a stunning way.

Now that you have a good understanding of what WordPress is, and how to start a blog from my previous posts, we need to talk about how to choose a WordPress theme.

Purpose of your website or blog

This is the first and most important question because you want a WordPress theme that will compliment the purpose of your website or blog.

What is your website for?

What do you want it to achieve?

If you are a photographer you’ll want a theme that offers a place to showcase your beautiful photographs.
If you are a local business you will want a clean look with an area for a map and address, along with a contact form and an about section.

Budget – Free Theme or Premium Theme

The next decision to make is a Free or Premium theme?

There are many free themes and the best part is they are free! However, some downsides are that free themes aren’t always maintained or updated. Another thing to consider is how much you want to customize the theme. Is there documentation for it? And lastly, will there be support for it?

Premium themes are not too expensive, usually around $50 (a one-time fee). Plus, they are well maintained, documented, and offer support. More on that in a bit.

Theme Features to Look For

Now that you have your website goal established and an idea for a budget, you need to decide what features you require in a WordPress theme and begin to research options.

A few things to keep in mind while researching for a new design:

>> Visual Appeal

Is the theme visually appealing to you and does it match the look you want to achieve for the purpose of your website?

>> Theme Functionality and Customization Options

Can you easily modify the look of the theme, including the colours and number of columns? Can you move elements around easily?

>> Responsiveness

Make sure the theme offers mobile responsiveness. This is important because many people now use their tablets or phones to view sites instead of a computer with a large monitor. You need to make sure your website will look nice on every device. Most recent WordPress Themes have this functionality.
Sites like BrowserStack and Matt Kersley’s Responsive Design testing and Google’s Mobile Friendly test can help test this.

Also, confirm the theme works across all web browsers (Chrome, Firefox, Safari, Internet Explorer). A site like browserling can help test this.

>> Support and Documentation

It can be difficult to figure out if the developer provides a good level of support. Check the theme’s support forum and try to determine how fast questions are answered. Also, consider when the theme was last updated, and how often it has been updated.
The theme should have documentation available so it will be easy to understand how to make any changes.
Plus, check how other people rate the theme from reviews.

Research and Explore WordPress Themes

Now that you have all of these things in mind when looking for a WordPress theme, it’s time to start exploring.

Here are a few places you can find free and premium themes:

• Themes from WordPress (Free)
• StudioPress (Premium)
• My Theme Shop (Free & Premium)
• Theme Forest (Premium)
• Elegant Themes (Premium)

Recommended Themes

Like I mentioned above, everyone will have a different purpose and different goals for their website. With that being said, here are a few themes that I recommend for a starting point.

Best WordPress Themes that are Free

Multipurpose theme: Point Theme

Easy to customize because it has tons of options including changing the colours, sidebar location, add custom CSS, add a logo, add custom header code. It also has built-in Ad space options, about the author and related posts section. The Point Theme is mobile friendly (responsive) and looks great.

Check out the Point Theme.

Blog or Business: Zerif Lite Theme

Great theme for a Blog or a Business. The Zerif Lite Theme offers a customizable footer section so you can include your business phone number and address, a nice “About Us” section to put your business and a built-in section for Testimonials. It’s also mobile responsive and has a lot of documentation.

Check out the Zerif Lite Theme.

Best WordPress Themes that are Premium

Photography theme: Ambiance Pro Theme

Puts your photography in the spotlight by using a grid with the featured picture as a background for the post. The Ambiance Pro Theme also offers options for custom headers, landing pages, and is mobile responsive.

Check out the Ambiance Pro Theme.

Food Blog: Foodie Pro Theme

A Foog Blog or website needs to pull in the viewer with their pictures. Foodie Pro Theme is another great theme that can also be used for a Photography website. Options include a built-in slider to feature your pictures, customizable “About Me section”, Ad space, easy to change the fonts, and mobile responsiveness.

Check out the Foodie Pro Theme.

Business: Architect Theme

The Architect Theme is perfect for a business. It has a Testimonials section and a Projects/Portfolio page. Other options include CSS animation to get a visitor’s attention, Google Maps to highlight your location, and a contact form. Documentation is available to help you along the way and support is included.

Check out the Architect Theme.

Need Help?

Feel free to contact me if you need any help choosing, configuring or customizing your WordPress Theme. Make sure your website stands out from all the rest. I can help!

Be sure to check out the next article: The Best WordPress Plugins to Kick-Start your Blog.

The post How to Choose a WordPress Theme for your Blog or Website appeared first on Ryan Daniels.