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.

TL;DR:
Website owners: Be careful when using third-party code that you don’t control.
Users: Hope for the best! Use a content blocker browser add-on like uBlock Origin. On your mobile device use Firefox with uBlock Origin.

What’s the problem?

Abandoned or unmaintained websites can be re-registered by malicious people. Any website using third-party code could be a victim.

To highlight the issue, let’s look at a specific example. This example luckily wasn’t extremely malicious. It could have been much worse! But it still highlights the current state of the web.

Recently there was an issue where 800+ websites were using javascript from an abandoned free service called “New Share Counts” which counted the number of Twitter shares.

Image of malicious code:

Securi and BleepingComputer have great write-ups on the details.

The problem is this third party website stopped offering their free service. They notified users via their website and eventually the resources they used for counting Tweets were abandoned. This included the Amazon S3 bucket they used. Unfortunately many website owners didn’t get the notice, or ignored it.

Image of a website including the malicious code in their source code:

According the research from BleepingComputer, on October 3rd the AWS S3 bucket was cancelled and on October 4th a “bad actor” registered a new AWS S3 bucket under the same name. Up until October 23rd, all 800+ websites that didn’t remove this javascript file were serving all of their visitors with a malicious script which redirected mobile users to a scam website.

As of October 23, 2018: the malicious javascript (newsharecounts.s3-us-west-2.amazonaws.com/nsc.js) has been blocked on the AWS S3 bucket. It is returning the error: Access Denied

Update October 28, 2018: AWS will not confirm the S3 bucket was banned on their side. The malicious code could return at any time, and possibly be worse next time. According to AWS they need other people to alert them if the malicious content re-appears! From AWS: “Should you see the content return or similar appear, please report it immediately.”

Update October 31, 2018: Malicious javascript is back online.

Update November 9, 2018: From AWS: “Content in question is not currently accessible”.

Update January 9, 2019: Malicious javascript is back online, again.

Update January 14, 2019: From AWS: “We have again blocked the content.”

Who can fix this?

• Individual website(s) that include the third-party malicious code
• Hosting provider where the malicious code resides
• Web browser blocks malicious code
• Web browser add-on blocks malicious code
• You and me? Social media? News outlets?

Unfortunately it’s hard to get all 800+ websites to fix this on their sites. So ultimately we need the company hosting the malicious content to step in.

It seems having this issue in the news and social media definitely helps put pressure on those who can take the malicious content down. In this case it was an Amazon S3 bucket hosting the malicious javascript.

But why is this so hard? Just take down the malicious code!

What about the hosting provider?

In this case, I submitted an abuse report to AWS the night of October 15th. It was only after Securi and BleepingComputer published news articles on October 16th/17th and some pressure on social media did AWS acknowledge the issue (to me at least). Then it took AWS over a week to take the resource down*. And that was only after countless back and forth emails with them. Thankfully, at least for now, the malicious javascript has been removed.

At first they said this malicious script didn’t violate their terms of service! I had to read through their terms of service (TOS) and provided them with exact details of how this malicious script actually does violate their TOS.
Such a painful process!

• At the time of publishing this post, AWS has not confirmed they took the malicious script down due to a violation of the terms of service. So hopefully this malicious script won’t come back online in the future at the same location!

A browser add-on can also help

I had a feeling it was going to take the hosting provider a while to respond, since these things take time. As a work-around, a browser add-on to the rescue!
uBlock Origin added this malicious javascript to their content filtering add-on 25 minutes after I opened an issue with them! Now that’s fast! So at least anyone using this popular browser add-on would be protected (well that is if they use Firefox on their mobile device, which actually isn’t the dominant browser).

What about the browser itself?

The most recent version of Firefox 63 now has Tracking Protection. But this can only block entire domains and not specific files. So that can’t help in this case.
Directly in the Chrome browser? Not currently an option either.

You and me? Social media? News outlets?

Unfortunately that seems to be what it’s come to. More on that below.

Luckily this example wasn’t worse. The malicious code only redirected a mobile user to a scam website when they pressed their back button on one of the 800 affected websites. It could have been cryptocurrency mining malware, or code to exploit some bug in Android or iOS. Who knows, maybe the hosting provider would respond much faster if it was more serious? Or the website owners? Maybe.. Maybe not.

Solution for users

Unfortunately web users have little control over what a website is serving their browser. One thing that can help is using a content filter add-on for your browser like uBlock Origin for Firefox or for Chrome. In the above case the malicious code was only affecting mobile users. Only Firefox supports add-ons for their mobile browser. This is another reason to use Firefox on your mobile devices! In a related post, check out how easy it is to upgrade your privacy using Firefox.

Long term solution for website owners

Website owners need to be careful when adding third-party code to their websites. However, this is extremely difficult in today’s modern web. Often websites use many, many different third-party services.

One solution is to host all third party code locally on your web server. Unfortunately, this has it’s own issues since there would no longer updates to the code by the developer unless the website owner manually updates their site.

Another solution is to use Subresource Integrity (SRI). Unfortunately this can be tedious to implement for a website owner. And even worse, if you use a CMS like WordPress, you rely on the plugin developer to implement SRI into their plugin or theme. There is a WordPress plugin called (SRI) Manager which can help add SRI to all plugins, but your mileage may vary with getting it to work.

Conclusion – Who should fix this?

Who can fix this versus who should fix this is a good question. In my opinion, this should be the responsibility of the individual website. However, getting 800+ websites to fix this in a timely manner.. not going to happen (and it didn’t in this example!). As of the time of this post, most websites still include a link to the malicious code on their sites! Thankfully now it does nothing since it no longer exists.
It really needs to be easier for website owners to have secure third-party code on their website, otherwise we continue down this path.

Who needs to drive this change?

Specifically in the above example of “New Share Counts,” was it only a concerned internet user (myself) that made this happen?
Probably not, since it was in the news. That’s probably the only reason there was any traction. But regardless, I contacted an infected website (which I randomly found while surfing the net. Mind you, only one website of 800+), initiated an abuse case with the hosting provider (AWS) where the malicious code was, and lastly, initiated a support ticket for a work-around using a popular browser add-on.

Maybe other people also contacted the hosting provider. Maybe I should have contacted more content filtering browser add-ons? More pressure on social media? Or something else in addition?

Maybe more people need to take action against these issues after they happen.

The next question is, who should be driving this overall change to make it easier to secure third-party code on websites? That’s also a great question..

However, until that’s figured out we need individuals and news outlets to raise these issues when they happen.
For instance, open abuse reports with the hosting provider, try to inform the websites impacted, find work-arounds when it’s taking too long. Raise awareness on social media platforms.

Currently, that’s all we can do. That is, if the issue is even detected in the first place.

Timeline

For anyone interested, here’s a timeline of events for the “New Share Counts” issue from what I observed. This isn’t meant to single out the hosting provider (AWS) in particular, they are probably flooded with abuse reports. But still, their generic responses are pretty funny. Bold used for emphasis.

2018/10/14 23:13 EST – Randomly found issue on one specific website (Latest Hacking News) while surfing the net on my couch (on my phone) and informed them about malicious javascript on their site.
https://i.imgur.com/4E6uSx5.png

2018/10/15 17:19 EST – Emailed “Latest Hacking News” with more details. Including script where the malicious javascript is located.

2018/10/15 17:47 EST – Abuse report submitted to the hosting provider (AWS). ( where malicious javascript is hosted: newsharecounts.s3-us-west-2.amazonaws.com/nsc.js ). Gave details on what this malicious javascript is doing and how to reproduce malicious behaviour.

2018/10/15 17:55 EST – Response from hosting provider: Generic response asking for logs.

2018/10/15 18:04 EST – Replied to hosting provider: Gave info where they can find a site infected with the malicious javascript. Also, exact steps to reproduce malicious behaviour.

2018/10/16 06:56 EST – Securi publishes article about malicious redirects from newsharecount.

2018/10/16 11:06 EST – “Latest Hacking News” removed the malicious javascript from their website.

2018/10/17 03:00 EST – BleepingComputer publishes article.

2018/10/17 18:22 EST – Replied to hosting provider via email: No response from hosting provider (AWS) since 15th. Asked for abuse case to be expedited and if they can shutdown this AWS S3 bucket / javascript file. Also mentioned to AWS this was now in the news via Securi and BleepingComputer.

2018/10/17 18:33 EST – Reply to BleepingComputer’s tweet, including AWS twitter handle to highlight lack of response from AWS.

2018/10/17 18:39 EST – Hosting provider responded via email: “This case has been investigated and being resolved by the appropriate team.”

2018/10/17 19:15 EST – Submitted issue with uBlock Origin (browser add-on to filter content) via their Github issue tracker.

2018/10/17 19:40 EST – uBlock Origin now blocks this malicious code. Only took 25 minutes! Anyone using the uBlock Origin browser addon (on mobile device) will not be affected by the malicious javascript.

2018/10/18 03:48 EST – Hosting provider responds via twitter that they are investigating.

2018/10/18 04:46 EST – “Latest Hacking News” responded via twitter, with thanks for finding the malicious javascript on their website.

2018/10/19 09:41 EST – Hosting provider responded via email:
“We understand your concern regarding the continued availability of the content you have reported. As noted previously, AWS customers are responsible for their activity on AWS. As a courtesy we notified our customer of your request to have the content removed or access disabled, however, as we do not consider this content to be in violation of our terms, we are not able to take additional action. We strongly encourage you to continue to work with our customer directly to address the concerns that you may have.”

2018/10/19 10:12 EST – Replied to hosting provider via email:
“It’s unfortunate that this bad actor’s malicious script/bucket can’t be removed since it is clearly hijacking users mobile browsers to serve them ads/malware/malicious script. I suspect that notifying the current AWS customer which owns this bucket will have no result, since they are responsible for this malicious script in the first place.”

2018/10/19 10:29 EST – Hosting provider responded, via email, stating the same thing again and the case was closed:
“As noted previously, AWS customers are responsible for their activity on AWS. As a courtesy we notified our customer of your request to have the content removed or access disabled, however, as we do not consider this content to be in violation of our terms, we are not able to take additional action. We strongly encourage you to continue to work with our customer directly to address the concerns that you may have. This case has been resolved by the appropriate team.”

2018/10/19 18:26 EST – Replied to hosting provider via email. I read through all of their Terms of Service and found where this malicious javascript violated their terms in two places. Provided details about how this malicious javascript was breaking their TOS in those two places.

2018/10/19 19:08 EST – Hosting provider responded via email:
“Thank you for your reply. We are looking into this issue further and passed it on to our customer.”

2018/10/23 16:30 EST – “Abandoned Tweet Counter Hijacked With Malicious Script” Podcast from Security Now! about this issue. Episode #686 Audio & Video.

2018/10/23 19:45 EST – Noticed http://newsharecounts.s3-us-west-2.amazonaws.com/nsc.js is down. Returning error: “Access Denied”.

2018/10/23 19:48 EST – Replied to hosting provider via twitter: Asking hosting provider to confirm they took down the javascript due to violation of their terms.

2018/10/25 16:53 EST – Replied to hosting provider via email:
“Can you confirm this S3 bucket is now suspended and can’t be used again?”

2018/10/27 – No response from the hosting provider at time of this post.

2018/10/28 09:19 EST – Hosting provider responded, via email:
“At this time the content appears to be no longer active or available. If you have any evidence otherwise, please let us know.”

2018/10/28 09:27 EST – Replied to hosting provider via email, asking for confirmation the S3 bucket is suspended and if not, to do so.

2018/10/28 09:39 EST – Hosting provider responded, via email. Due to privacy policies they cannot discuss what actions have been taken, and:
“Should you see the content return or similar appear, please report it immediately.”

2018/10/31 17:42 EST – Replied to hosting provider via email. Malicious content is back online.

2018/11/06 11:05 EST – Hosting provider responded via email.
“We have begun our investigation into the source of the activity or content you reported.”

2018/11/09 04:28 EST – Hosting provider responded via email.
“Content in question is not currently accessible.. If you believe this content is still live, please provide additional evidence and we will be sure to investigate further. At this time please consider this case as resolved.”

2019/01/09 05:42 EST – Emailed hosting provider. Malicious content is live, again.

2019/01/14 08:55 EST – Hosting provider responded via email.
“Thank you for advising us that the content has been uploaded again. We have again blocked the content.”

The post Malicious code and abandoned websites 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.

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.

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.

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.