Protecting your wordpress site from hackers

If you’re hosting a WordPress site, you’re likely already aware of the need for security. But you may not know just how complicated it is to set up and maintain a really secure website. It can be even more complex than designing the site itself or developing the content.

This articles covers a number of steps Resources Online routinely takes to make websites secure. It assumes a basic familiarity with WordPress, but not much more. To get technical details on the recommended solutions, do a quick online search.

Keep WordPress and your plugins up to date

This is the single most important thing you can do. Because WordPress is so widely used, when vulnerabilities are discovered, attackers know that there are many susceptible websites. There were six WordPress core security updates last year alone, along with many more plugin updates.

It’s critical that you continually monitor and patch your site.

The WordPress core application has the ability to automatically update whenever a new version is released. Automatic updates are also available for certain plugins. If your website is not that complex and you’re comfortable with code changes to your site without a thorough review, turn on automatic updates. In new installations of WordPress, this is on by default. Follow WordPress instructions to manually turn on automatic updates.

If your website is complex or you’re worried that an automatic update may break it, set up a testing environment and manually update WordPress. Modern versions of WordPress actually make this quite simple. The Updates page on your WordPress site shows a list of all available releases. You can install them individually or all at once with just a few mouse clicks.

If you have a lot of plugins, consider updating them a few at a time and, as you go, verify that the website still functions properly. This way, you can isolate the source of any potential problems caused during the update process. After you’ve made all the updates and verified the site functionality in your testing environment, follow the same process on the production site.

Note for developers: obviously, modifying WordPress core code or plugin code makes it very difficult to update plugins and stay secure. Use care!

WPImage749x756

Maintain good login security

Having secure code doesn’t help if you leave the front door open. One of the most common causes of WordPress site outages is the brute force login attack. That’s where an attacker writes code that repeatedly tries different passwords to log in to your site.

Take these steps to defend against this type of attack:

  • Always use strong passwords.
  • Disable the default admin account (a common target of attacks).
  • Limit user roles to only specific, required functions. For example, don’t make everyone an admin.
  • Rename the login page to something non-standard, so attackers can’t find the page. We have had good success with the Rename wp-login.php plugin.
  • Install a plugin to limit brute force attacks, force strong passwords, and force password expiration. If you are not installing a more comprehensive security plugin, try this Login Security Solution from WordPress.

Pick your plugins carefully

Every plugin you install on your site potentially contains vulnerable code. Virtually anyone can write and offer a plugin. Look for plugins that:

  • Are highly rated.
  • Have a large numbers of installs.
  • Are offered by reliable sources.
  • Have good user reviews.
  • Show frequent updates (indicating they are being maintained).
  • Are available on WordPress.org.

Some plugins have write access to your WordPress files and directories. A malicious or vulnerable plugin with that kind of access has complete control over your site. Be very cautious with these. And, in general, limit your plugins to only those you need, delete any unused plugins, and carefully consider the trade-offs when adding new ones.

Install a good WordPress security plugin

There are dozens of different steps and techniques available to properly secure a WordPress site. Installing a WordPress security plugin simplifies this process for developers and for less technical users. Security plugins can conflict with one another, so if you install more than one, be careful to select compatible plugins. Our favorite security plugins include:

BulletProof security, which provides more of a firewall, detecting and blocking malicious traffic before it gets to your WordPress installation. It does this through a series of rules defined in the Apache .htaccess file. Installation is simple: use the setup wizard, and select the options you prefer. The plugin generates and saves the correct .htaccess file to your web server.

Wordfence, which provides security from within WordPress itself. It not only provides basic firewall-level intrusion prevention, but also it:

  • Scans for infected files.
  • Compares all of your core and plugin files against the original versions.
  • Shows you real-time traffic to your site, which can allow you to detect and troubleshoot attacks.
  • Protects against brute force attacks.
  • Monitors disk space.
  • Logs traffic, allowing you to investigate issues.

We like using BulletProof security and Wordfence together because of their complementary features.

Back up your site!

Disasters, such as site corruption or hacker-caused data loss, are a lot easier to deal with if you know that you have a good backup of all of your code and content. Install a plugin to make daily backups of your website, including the code and database. Make sure to back up your server, as well. And test your backup to make certain it that can actually be restored.

Our favorite free backup plugin is UpdraftPlus. It supports automated backups, prunes old backups, does remote storage to Dropbox, and will even automatically back up your site and database at the moment you are installing new plugins, allowing for an easy rollback if something breaks. The paid plugin BackupBuddy is also an alternative to consider.

Monitor and maintain

Your site won’t stay secure on its own. You need to monitor your security logs, apply regular updates, look for suspicious or abnormal activity, verify that your backups are still working, and keep an eye on your database size and available disk space.

Your security plugin helps by notifying you of issues via email, but there’s no substitute for periodically logging in and checking things out.

For more information

Here’s to keeping your site safe and secure!

Mobile devices now make up 28 percent of total web traffic, but many websites look and behave poorly on phones. I’m sure you’ve experienced the frustration of trying to use a website on your phone that was not designed for mobile. Take a look at these examples of sites that could do a much better job for their mobile visitors. The pages and fonts are so small that you must zoom in to the point context is lost. Too often, sites have problems like this, with important pages and functionality that don’t work at all.

Mobile website with problem 1 Mobile website with problem 2 Mobile website with problem 3


Until recently, the best solution was to build multiple versions of your site for each type of device. This solution was expensive and time-consuming, and it required a lot of duplication of content. A new approach has emerged, called responsive web design. Responsive web design means you build your site only once, but you do so in a way that lets it look and work great on phones, tablets, and PCs.

How does responsive web design work?

Simply put, you design your content and layout so that, as the screen size changes, the content and layout rearrange themselves on the webpage to fit into the new space. Here’s an example of the same website on three different screen sizes:

Caradigm Website Desktop

Here is the same website when viewed on a tablet-sized device:

Caradigm on Tablet

Here it is when viewed on a phone:

Caradigm Website on Mobile Phone

Key things to notice:

  • The content is the same on all three screens, but the page layout changes and images are shrunk down in size or cropped.
  • The menus at the top of the desktop page won’t work so well on mobile. So, on a mobile device, the whole menu shrinks down to one small button, often called a hamburger. You click this button to see the whole menu, and you click it again to hide it.

You can experiment with this effect yourself, right on your desktop. Go to this site that we built, http://www.caradigm.com, and change the width of your browser window. As your browser window gets narrower, you see the layout change.

How does a responsive design affect website content?

If you want a mobile-friendly website, keep the small screen experience in mind when creating website content. Those lengthy, clever headlines and voluminous paragraphs that some marketers are tempted to write simply don’t work on mobile. Nor do highly detailed images and complex page layouts, such as product comparison tables and diagrams. Some considerations for creating content that works across all screens include:

  • If you have a significant mobile audience, pick content and features based on activities that these users commonly do, such as read on the bus or save content for deeper review later.
  • Write your headlines for mobile first—a shorter headline will always work on the desktop, but a longer headline will not always work on mobile devices.
  • Break your body copy up into smaller, more easily consumed chunks of information. This is a web content best practice anyway, but it’s even more critical for mobile readers.
  • Plan your page layout using grids. Grids work well in responsive design because content in columns and rows can easily be placed in a new layout with fewer columns, without breaking the flow of content.
  • If you use a lot of photography or images for branding, of course you’d prefer to preserve that creative approach and to keep it consistent across all screens. But the requirements of showing an image on a 14-inch-wide screen desktop are much different from those for a 2-inch-wide phone screen. One effective approach is to use photography and images that work well when the left and right sides are cropped. Then you still have the high-impact widescreen image on the desktop, and you have a carefully cropped and sized image for mobile devices—one that still communicates your brand but does so in a more compact way.
  • If you have highly complex images, diagrams, and other visual communication elements, plan on having simpler alternatives that can appear on smaller screens—or eliminate them entirely.

Doesn’t this limit my design options?

Yes, but within reason and for a good cause. We’ve all gotten used to designing websites for which we have complete control over where everything appears. We can have all kinds of fancy overlapping elements with drop shadows, gradient shading, complex layout of content, and highly interactive animations. But the reality is that many of your users are irritated by this kind of design on mobile devices. They require a different approach. Some considerations for mobile design include:

  • Stick to the grid. Modern responsive design frameworks require that the design be done on a grid. Don’t design elements that don’t fit within the grid. Try to track down a Photoshop template file that was created for the responsive framework your development team has selected.
  • Select images much more carefully to support either scaling up and down or that can be cropped to work well with different aspect ratios and screen sizes.
  • Design for fingers. Fingertips are generally between 40 and 80 pixels wide, meaning that click targets should be a minimum of 30 to 40 pixels in size.
  • Think about the mobile experience while designing the desktop. Don’t tack mobile design onto the end of your design process. Doing so will just result in rework.
  • Create lightweight designs that load quickly.
  • Consider letting your developer do the initial mobile design. This may seem crazy, but it can be quite effective to have your developer build a few pages out of your desktop design and then see how they look on mobile. You can use that as a starting point for tweaking the mobile experience. This works because your developer will be using a mobile framework, such as Bootstrap or Foundation, which automatically lays out your desktop experience for mobile. This is a lot less work than building duplicate Photoshop files for mobile for every page template on the site (a method which isn’t even feasible when your framework won’t cooperate with your ideas).

Here’s an example of a Bootstrap-compatible design in Photoshop on a 12-column grid:

Responsive Design Grid

 

What else should I know?

There are a few key considerations that marketing managers and site managers should understand before working with developers on a mobile site, including:

  • The most exciting development in responsive design is the availability of responsive web design frameworks, such as Bootstrap and Foundation. These third-party libraries are open source, free to download, quickly customizable, and based on CSS and JavaScript. Using these frameworks, we’ve found you can cut your mobile and desktop HTML development effort by 80 percent. Gone are the days when you have to write and debug your HTML to work on 20 different mobile phones and eight different desktop browser versions.
  • Ideally, you select your responsive design framework before beginning site design. This enables you to communicate the framework requirements to the designer and allows the designer to create a design that works well with your selected framework. The framework might have certain settings for gutters, margins, and column layouts. There may be Photoshop templates you can deliver to the designer. And the framework will have predefined controls such, as drop-downs and edit boxes.
  • After you receive completed desktop designs, ask your developers to build the first few pages of the desktop experience. You might also consider mobile first. This design approach states that designing for mobile first actually produces a better, more customer focused desktop site.
  • Test those desktop pages on narrower viewports, and work with the designer to tweak the mobile design. You may find that your responsive framework does a pretty good job but that it needs some additional work to match the overall site design. You may also find that some elements of the desktop design need to be changed because they will never work well on mobile.
  • Test page-load performance on mobile devices. You’ve probably gotten away with some heavyweight pages on the desktop with high-speed connections, but your mobile users will notice un-optimized images, bloated JavaScript, and slow pages immediately. You risk having mobile users abandon your site.
  • Although frameworks do a lot of the device and browser compatibility work for you, you still need to test and tweak, at least on the iPhone with iOS 7, Android 2.3 and 4.x, Android tablets, iPads and iPad minis, and Surface tablets. And, on the desktop, you should cover Chrome, Internet Explorer (9, 10, and 11), and Firefox.

Building websites for different sized screens is a critical step for most organizations that value traffic to their sites. By planning ahead for mobile content, creating designs that work on the desktop and the phone, and building a responsive website using a framework, you can produce a beautiful, functional site that delights your visitors.

Portico di San Luca, a Beautiful and famous porch in Bologna, Italy.

You’re redoing your website, and the UI architect has added a nice sidebar to the page. Or the visual designer has created icons for each of the product categories. The design looks gorgeous. Why not go with that sidebar or those icons? Because introducing a recurring element means just that—it has to recur on every page (or on many of them). Before you commit to such a design element, make sure your content can support it.

Consistency in web design

You already know that consistency is important in web design, for a number of reasons. It helps usability by adding predictability. If every page on your website looks different, the user has to spend mental effort on every page deciphering it and understanding where to look for key information. Consistent, predictable layouts allow users to unconsciously segregate and ignore less important information and to instead focus on what is unique and different on each page—such as the call to action or the headline that you want them to notice.

So, when you introduce an element like a sidebar, an icon, or a structured section on a page, it’s likely not a one-off. If you use a sidebar, for instance, it will probably occur on all the pages of your website or at least on all the pages of a certain type. For example, in the new design for our own Resources Online website, we are adding a sidebar on all the pages that detail our services, along with another recurring element: the portfolio section.

Consistency in content management systems (CMSs)

If your web developer is using a CMS to build your website, such as WordPress, Joomla!, or Sitecore, consistency is assumed. The CMS requires that you create one or more templates, which are pages with a specific layout. Using templates, it’s easy for you and your team to add content to the website without having to ask a developer to help you. As with a Microsoft Word template, you can go to specific sections of the page and enter text and images, as required by the layout, using a WYSIWYG editor.

Using a CMS for your website can accelerate website development, enable marketers and content creators to do much of the work, and save on maintenance costs by letting you easily make global changes using tools similar to search-and-replace within documents. However, it only provides those benefits if you are using the CMS properly, by leveraging templates. If you frequently make exceptions by creating one-off pages with different designs, the CMS soon loses its power. That means you need to commit to using templates and consistent page layouts.

When recurring website elements fail

Problems occur when you introduce a repeating element on your website and that element doesn’t make sense for all or most pages. At Resources Online, we build websites but we also create and manage content. We’ve seen our share of poorly thought through sites with unwarranted recurring elements. They can make content development and site maintenance harder.

Say that your website design includes a sidebar on every page. For some pages, it’s easy to find relevant content for the sidebar. Perhaps it’s designed to hold related blog posts or related products. For other pages, though, the sidebar doesn’t make any sense. What blog posts or products are specifically relevant on your About page or your Contact Us page?

When a content element appears on pages and has to be filled, it can create headaches for content owners who are forced to shoehorn largely irrelevant information into the space—just to make sure it’s filled for consistency’s sake. The problem is bigger than that, though. By adding irrelevant or barely relevant content to the page, you add more useless noise that can pull the users’ focus from what you really want them to see and read. Recurring and irrelevant elements on a website can actually lower usability and conversions.

Maintenance issues occur with elements, like icons or designs, that require pictures in specific locations. Perhaps the designer created an icon for each product category. That’s nice, except that it means every time you create a new product category, you have to create a new icon to go with it. In large e-commerce sites, where product categories are introduced and changed frequently, this can make for a lot of extra work. Not to mention that it becomes difficult to create a unique and meaningful icon for every category.

Similarly, where layouts require a lot of images, you may well find it a stretch to come up with relevant pictures. Also, pictures tend to draw the eye. If they do that at the expense of text, without providing any real value or support for the content, they may be a complete waste of space on the site and a waste of the staff’s time spent finding images.

Content assessment and planning is the key

How do you avoid introducing unnecessary—or even detrimental—elements in your design? The most effective way to prevent the problem is to avoid separating the visual design from the content development. On any large website, especially ones that are updated frequently, content and visual design go hand in hand.

Conduct a thorough assessment of your content before designing the website. Then, as you begin the design process and start developing template pages, compare the design with your content assessment. Ask questions, like:

  • Do you have enough portfolio items to put on every service page?
  • Do you have enough products to adequately fill each product category page?
  • Where content is lacking, can you develop enough new content to fill the gap? Will you generate enough blog posts or be able to find enough relevant articles each week or month to support the sidebar?
  • How often will you add new categories or products, and what elements does the design require that you create for each one? Can your budget and staff support these requirements?

Asking these kinds of questions during the design process will help you determine your content production needs and can help ensure that the site is maintainable for a reasonable price. The best designers know this and will direct you accordingly. By keeping an eye out for recurring elements and evaluating the design with an eye toward your content and content plan, you can accurately predict maintenance costs, avoid the “What do I put here?” pitfall, and create a site that optimizes space on the page while drawing the users to the information you most want them to see.