WordPress 5.3 has buttons! Wait, we had buttons before.. so what’s special about these buttons?

You tell me. Take a look for yourself.

Old Buttons

You could change the background and text colour. And you could also change whether the button is an “outline” or “fill” style.

New Buttons in WordPress 5.3

The new buttons have colour gradients. Okay, I guess that’s not very exciting after all. However, they do remind me of a simpler time.

If you want to use these buttons just open up a post or page (in the WordPress Gutenberg Block Editor). Then add a new block called “Button”. Buttons are pure magic!

Future

What’s in the future for WordPress?
I’m voting for the <blink> element.

Netscape Now button Image Credit

The post Buttons in WordPress 5.3 appeared first on Ryan Daniels.

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.

You want your website to load fast. How? You can speed up WordPress with this Image Optimization Guide. Most of this actually applies to any website, not just WordPress!

A fast website is good for your visitors because users don’t like to wait. Fast is also good for Search Engine Optimization (SEO) ranking in Google. One way to have your website load faster is to reduce the size of what needs to load when a visitor goes to your website. Pictures can be a huge contributor to your website’s page size. How can you fix this? Let’s talk about how to Speed up WordPress with Image Optimization.

Just don’t forget, having a good hosting provider is key. Having optimized images won’t fix a slow hosting provider!

This can be a big topic if we really go in-depth. If you already know the basics then jump to the Image Quality section. Just don’t miss out on the Tools sections, where I share some time saving tools.

Image Optimization Guide

• Less Pictures
• PNG vs JPG
• Image File Size
• Image Dimensions
• Image Quality
  • Lossy Image Optimization
  • Lossless Image Optimization
• Image Editing Tools
• Wrap Up

Less Pictures

Having too many pictures can really slow down your website. Even if they are all optimized, loading too many pictures adds up for the overall page size and also adds to the number of requests being sent. Use only relevant pictures.

PNG vs JPG

What picture file format to use? There is a lot of information related to this discussion. So let’s make this simple.

I use PNG for screenshots and logos.

I use JPG for photographs. Just remember that saving the same JPG over and over will reduce the quality.

Confused? Check this out for more information.

Image File Size

You don’t want your pictures to be too big. That’s the whole point of this discussion! Reducing a picture’s file size helps your website load faster.

Generally, I try to make sure my pictures are around 100 KB (Kilobytes) each. But this really depends on your website’s goals and content. If you have a photography website then obviously your pictures are the main focus. Having a few pictures per page over that size should be fine.

Remember: Reducing the Image Dimensions and the Quality both impact the image file size. More on those topics further down.

Image Dimensions

Use conservative image dimensions (width and height in pixels). Don’t use a full size picture at 5184 by 3456 pixels that is 5 megabytes. Before uploading a picture to WordPress, resize the picture to dimensions that make sense for your website when a visitor is on a desktop computer. Typically I resize a picture to the same setting I put in the WordPress Media Settings for the Large Size option.

There are also other options for Medium and Thumbnail sizes. All of these settings really depend on your website design and goals. Personally, I like these settings for my website:

Tip: If you don’t need a certain image size, just put the width and height to zero.

Tip #2: If you change these settings, only new pictures will get resized to the new settings. Use the free plugin Regenerate Thumbnails to re-create thumbnails for existing pictures.

WordPress automatically create copies of the image for all of the above sizes when you upload a picture. There could be more, depending on your theme (using a featured image for example). If you are a developer and need more sizes (or aren’t afraid of coding), you can use the add_image_size() function to add any other image dimensions you need to use in your theme. But for normal users, you don’t need to worry about that.

I know what you’re thinking, this is getting a little too detailed. Keep reading and you might learn something new. Or skip down a bit.

Let’s get back to talking about using pictures on your website. Don’t use a picture that has dimensions of 1280 by 720 pixels (for example) if your website won’t display the picture at those dimensions. Your theme should dynamically scale your image’s dimensions making the picture smaller so that it fits on your web page. Scaling means the 1280 by 720 pixel picture is reduced to fit on your screen.

This is a waste and is increasing your total page size for no reason, since the full sized photo you chose is still being sent to your visitor. A good solution is to show a small or medium sized picture on your post, and when your website visitor clicks on the picture it opens to show a larger picture (which wouldn’t fit inside of your post with everything else, so it would be scaled). Here’s an example:

Above is a properly sized picture for my theme, and it opens to the Large size when clicked. There’s more on this effect of using a Lightbox plugin in my previous post.

What image dimensions to use on your website?

The answer to that depends on a few things. What dimensions does your WordPress theme display your images? Mine is around 800 pixels wide in the post area. Typically, most themes should be fine displaying pictures between 600 to 800 pixels wide.

The last thing I’ll mention in this Image Dimension section is do not use the Jetpack Photon Module to dynamically resize your images. It may seem like a good idea, but the current state of it has too many negatives.

Ok, Let’s move on to Image Quality.

[Tweet “Ultimate Image Optimization Guide for #WordPress”]

Image Quality

Now that you have the right number of pictures, and they are at the optimal dimensions, it’s time to speed up WordPress with the final step, Image Optimization.

Optimizing your images means reducing their size. There are two ways to optimize images. Lossy and Lossless. You can do one or the other, or both.

Lossy means some part of the image is lost. This may not be visible to the human eye. However, if too much compression is used it will be noticeable.

Lossless means no part of the image is lost. Not one pixel is changed.

Typically, lossy can give you a smaller file size with the trade-off of losing some image detail. If you don’t want any loss of detail, use only lossless optimization. Using both is usually best.

Lossy Image Optimization – Image Quality

For PNG images there are a few lossy image optimization tools. One good option is the TinyPNG website. They also have a WordPress Plugin which allows 500 images per month for free. I don’t use PNG very often, so I just use their website.

When you save your pictures as JPG there’s usually a window that pops up (depending on the tool you use) asking what Quality Percentage you want.

This depends on the picture, but typically between 80% to 90% Quality should keep the picture looking good (and doesn’t make the picture’s file size too big). In the image preview or after saving the picture make sure it still looks good to you.

TinyPNG also works on JPG files, but I find the quality isn’t very good. I don’t recommend using it for JPG files.

Lossless Image Optimization – Image Quality

You already did a big part of the image optimization when saving the JPG with your desired Quality setting percentage. The last step now is to do lossless image optimization. This will squeeze out a little more file size savings.

There are several tools available to do this on your PC or Mac like Riot or ImageOptim.
I prefer to let a plugin handle this step. One less manual step saves a little time!

But either way, all the different copies that WordPress automatically created of your pictures are now all optimized.

I recommend the free WordPress Plugin: WP Smush. It will automatically perform lossless optimization on your pictures when uploaded to WordPress. Any pictures already uploaded can be optimized 50 at a time. The only issue that can come up is that the file size is limited to less than 1 MB. But that really shouldn’t be a problem, since you resized your images to reasonable dimensions and file size, right?

Typical file size savings are between 4% to 15%. It doesn’t sound like a lot, but every little bit helps when it comes to page size and your website load time.

Image Editing Tools

All of this might seem like a lot of steps, but it’s worth the effort. Next, I’ll give you two tools I like to use to save some time and to finish up my Image Optimization Guide.

Besides Photoshop, the photo editing tool I like to use is called paint.net and is available for free (Windows only). It has tons of options and I really can’t believe it’s free!
And if you like TinyPNG there’s a paint.net plugin for TinyPNG. This helps speed up the process a little.

Another hidden gem I discovered and have used for years is called Picture Resizer 6.0 (for Windows). If you have a lot of pictures to resize this is a great tool. It only works for JPG files though.
Rename the application file PhotoResize400.exe to include any of the options you want which are listed on their website. Now put a copy of all your original pictures to be resized in a folder (don’t use original files!), and drag that folder onto the Application’s .exe file in Windows Explorer.

I mentioned the tool Riot above. It can also do batch optimization, but I prefer Picture Resizer.

I won’t go into too much detail about the Picture Resizer tool, but as an added bonus I will give you the settings I use.
I rename the file to: PhotoResizeF1280x720IQ85.exe
This means:
F1280x720 – Image Dimensions will be a maximum of 1280 by 720 pixels
I – Overwrite source files (that’s why you copied your original pictures into a folder)
Q85 – Image Quality will be 85%

This tool resizes and also does lossy image optimization automatically. Be sure to check through your images to make sure they still look good. If needed, increase the Quality setting. The only thing left to do after using this tool is lossless image optimization.

Speed Up WordPress: Image Optimization Guide Wrapping Up

You want your website visitors to have a good user experience. And optimizing the images on your website will speed things up. Google also likes this for search engine rankings of your website. Let’s recap:

• Use less pictures
• Use the right file format for your images
• Create pictures that are the right dimensions for your website design and theme
• Make a compromise between file size and picture quality
• Use lossy and/or lossless image optimization
• Pick the right tools to speed up the process

The post How to Boost Your Website: Ultimate Image Optimization Guide appeared first on Ryan Daniels.

Using images on your website is crucial these days. Images can help give your website some excitement. The right images on your website will even help you boost conversion rates.

Another reason to use images in your articles is for an added increase of search engine optimization (SEO).

Using images can be confusing. These topics will help you understand and use images more effectively. If you have questions like: How can I make pictures look good on my website? How do I optimize images so my website loads fast? What is a watermark and why should I use a gallery WordPress plugin? The answers will come in future posts.

Most of the topics will be tied back to WordPress. But some of the topics are universal for all websites. So even if you don’t use WordPress these posts will help you.

In this series I’ll share several topics, and over the next few weeks include them in this list:

Essential Guide to Images on your Website

• The Best WordPress Lightbox Plugin
• Add Watermark using WordPress
• Image Optimization Guide
• All the Pros use these WordPress Tools – And so does Tony Danza

Ok, the last one isn’t true. The list for this series will be a work in progress so check back often.

Do you know someone with a website that could use these tips? Share this with them.

[Tweet “Essential Guide to Images on your Website”]

Are there any other topics that you would like me to explore? Let me know!

The post Essential Guide to Images 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.

A blog is a great place to get your message out, to sell your products, or to share your ideas. You can write about anything from sharing recipes or pictures to sharing your thoughts on food or any hobbies you have. Many businesses even use WordPress for their company’s website.

Starting a blog is very easy!

In the next 20 minutes, you can be the owner of a new blog!

Follow the three easy steps below to get started. This is a guide for beginners to get your content out there.

Disclaimer: Some of the links below are affiliate links, which means at no cost to you I might make a small commission if you buy something.

How to Start a Blog

The three steps to starting a Blog are:

1. Select a Domain Name and Hosting Provider
2. Install WordPress
3. Pick a Theme

1. Select a Domain Name and Hosting Provider

First thing’s first. Let’s get some basic terminology out of the way.

What is a Domain? A domain name is your web address (URL) that is used to access and identify your site. My domain is ryandaniels.ca.

What is a Hosting Provider? A Hosting Provider is a company that stores the files and information for your blog.
There are many hosting providers to select from. To learn more about different Hosting options see my previous post. For a new beginner blog, a website hosting provider that offers a Shared Hosting solution is a great option. SiteGround has a shared hosting solution that is highly regarded.

OK. So what do you want for your domain name?

Think of as many names as possible that capture the essence of what you want to write about. It’s important to pick a relevant domain name for your website. Once you pick the one you like, head over to SiteGround to register it and to select your hosting plan. When selecting your plan level I suggest the “StartUp” starter plan. If you want to have multiple websites then one of the other plans would be right for you.

Next, enter your desired domain name in the box to see if it’s available.

SiteGround not only takes care of your domain name, but it also provides the hosting of your site at a great price. If you decide to host with SiteGround it gives you the domain name for free.

Below is a screenshot of what you could use for your StartUp package settings.

The optional Domain Privacy setting protects your personal information by shielding it from being publicly displayed (always a good idea).

2. Install WordPress

Once you have finished registering with SiteGround, you can install WordPress.

WordPress initially started as a blogging platform, but today many businesses use WordPress for their company’s website.

Installing WordPress is very easy using SiteGround. Here’s how:

The first time you Log in to SiteGround you will get a window asking to install WordPress.

Enter the information for your new blog. Make sure you use a Username that is not admin and use a complex password. This will be the administrator account with entire access to your blog so you want it to be secure. Later you can add another user and limit it to the role of an Author.

Pick one of the themes (don’t worry too much about choosing the right theme now because one you gain access to your site you’ll have many more theme options available. We’ll talk about this more in the next step).

Lastly, you will see the Admin URL, Username, and Password you selected. Copy this information and keep it in a safe place.

To access your website, type the Admin URL in your browser. This will display a login screen where you enter your Username and Password.

You have just logged into your new blog for the first time!

3. Pick a Theme

You are now minutes away from jumping right in and writing about anything you like.

But first, you should personalize your blog by selecting a theme. Initially you selected a theme when you installed WordPress, now you should consider whether you want to change the theme. WordPress has tons of free themes to pick from. You can take a look at all of the choices in the WordPress Theme Directory for many great free wordpress themes.

If you prefer a premium theme, there are many good options. One option is the Genesis Framework – An extremely popular framework used by many websites with numerous themes from StudioPress.

4. Optional Step — Contact Me

This is just the beginning!

If you need assistance with any of these steps or if you would like to take your WordPress site to the next level, contact me.

I can help you with the WordPress setup, Domain Name Recommendations, Hosting Recommendations, WordPress Training including showing you how to use WordPress and how to install plugins and themes. Another important and sometimes difficult task is customizing your blog so it looks exactly as you want. I can also assist you with that along with WordPress security to limit the risks of your website being hacked. Also I can make your blog fast which helps with Search Engine Optimization (SEO).

The post How to Start a Blog: A Guide for Beginners appeared first on Ryan Daniels.