Archiv der Kategorie: Wordpress

The Consequences of a Hacked WordPress Website

If you are anything like me, you might have found yourself ardently watching the news recently and in particular, the Paradise Papers. It reminds me of a brilliant story about a recent similar leak, the Panama Papers. When the Panama Papers were released a theory was floated that raised the hairs of web developers throughout the internet. You see the company at the center or the controversy, Mossack Fonseca, had a WordPress website. And on that WordPress website, they were running an old, vulnerable version of the well-known plugin Revolution Slider.

This is what is thought to have happened: an external script or ‘bot’ found that the version of Revolution Slider on the Mossack Fonseca website was vulnerable to uploading any file type. The hackers exploited this to upload a shell to the server, giving them full route access. At this point, Mossack Fonseca would nonetheless have been relatively unscathed, except they also kept their Exchange 2010 (mail server) within the same network system, giving the hackers access to all e-mail communication in and out of the company.

Now there are a raft of emotions that come as a result of such a hack, but for people that work in related industries, it serves as a beacon as to how easy it might be for a hacker to compromise everything you and your clients have. And while you can imagine the conversations behind keeping the website working ‘as-it-is’ at Mossack Fonseca, what if it wasn’t down to management? What if they employed someone just like you and me, and tasked us with maintaining the website?

The point I’m making is that your client would likely hold you responsible should their site get hacked, regardless of whether that is a reasonable thing to do, and the consequences can be far reaching.

The Awkward “Sorry, you’ve been hacked” Conversation

Getting hacked is relatively inevitable. In fact, the things you are advised to do, such as updating your software, can end up being the cause of the malware itself (see the recent CCleaner update scandal). But that doesn’t make the conversation with your client any less awkward when you utter the words “I’m sorry, you’ve been hacked.” Particularly if you can’t point to everything you have done in your power to keep them informed and protected.

A nicer client might recognize that it almost certainly isn’t your fault, but ask what could you have done to make it less likely? You need to make sure you have a strong answer to that question should it arise.

A year and a half ago, three of my clients’ websites were hacked. It could have been the host, it could have been an old plugin, they each shared a WordPress theme that might have been the cause. Regardless, it meant three awkward conversations and a lot of unpaid work repairing the damage. That didn’t need to be the case if I had just taken some steps early to give the client a heads-up and thus avoided the awkward exchange of emails entirely.

What You Can Do

Naturally, the first thing you must do in such a situation is to secure the sites as much as you can. There are a wealth of options out there to make your site more secure but I would advice you to install Wordfence, register for Acunetix Online and install 2 factor authentication across the board as a low time spent starting point. Acunetix will scan your site for all known vulnerabilities and also performs free scans of your network while Wordfence provides reports as to the number of weekly hack attempts (both will blow your mind if you haven’t seen them before).

Imperatively, you must also inform the client they need to regularly update their site themselves. Having that conversation at the beginning of your relationship with the client is easy, so if you haven’t already got yourself covered on this front, my advice would be to send out an e-mail to all clients in the next few days.

If you want some more information, here is the checklist for preventing WordPress hacks that I now use.

The Professional Angle

Since the hacks, I give all clients the opportunity to acquire instructions to perform WordPress updates themselves at no cost, and also offer to provide the updating service myself for a fee depending on their needs. Not only does this make the client aware of their responsibilities in regards updates right from the get-go, but it also gives a paid option for the many people who just don’t want the hassle, or who are scared of breaking something unintentionally.

By completing the above you can increase the level of service you offer while keeping your client aware of the pitfalls of using a platform such as WordPress. Chances are, you may also be able to sell your services at the same time and perhaps most importantly, you will be able to rightfully say that you’ve done everything you can to keep your client’s site as safe as it can be.

The post The Consequences of a Hacked WordPress Website appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine


Envato Elements Now Offers Premium WordPress Plugins and Themes, and Only $19 Per Month

Those of us who work with WordPress on a regular basis tend to have our own list of favorite plugins and themes. They’re the standbys we turn to time and again to make sure that our projects are a success.

It’s a winning strategy. But when working with commercial assets, having to buy a separate license for each new project can be difficult. It can cost a small fortune financially – not to mention the hassle from managing all of those separate licenses. Wouldn’t it be so much better to have unlimited access to the best WordPress themes and plugins – all for one flat price?

Thankfully, Envato Elements has listened to the needs of web professionals and have launched a WordPress section to their popular subscription service. Finally, the WordPress assets we need, whenever we need them!

Built for the Busy Designer

Built for the Busy Designer

One thing a busy web designer doesn’t have enough of is time. Every moment needs to be a productive one. So scouring the web for a decent WordPress theme or plugin can become a hindrance on our ability to get things done.

What Envato Elements has done is build a curated collection of outstanding WordPress themes and plugins. That means we no longer have to waste precious time looking around for that high quality resource we need – it’s all there in one convenient place. And the unlimited subscription model means that we can go back to it at anytime.

Plus, the simple and straightforward licensing agreement ensures that you can use what you’ve downloaded for both personal and commercial projects. And you’ll be able to keep on using them – even if you’re no longer an Elements subscriber.

This collection is designed to help you save both money and time. You’ll have professional grade WordPress assets at your fingertips – a designer’s dream.

Over 300 Items (And Growing)

Envato has built a reputation as the go-to marketplace for web designers searching out top-notch resources for their WordPress projects. So when it comes to this new collection for Envato Elements, you can be confident in the quality of each item.

These items also run the gamut of form and function – able to help you with virtually any type of project. Here’s just a sampling of what’s available:

Multipurpose and Niche Themes

Oscar is a great fit for freelancers or agencies that want to showcase their work. It features a powerful portfolio module that provides flexible layout and functionality.

Lotus is a WooCommerce-compatible theme that will help you sell in style. It’s fully-responsive and offers an extensive options panel for tweaking.

Kingstudio is a multipurpose theme that comes loaded with multiple demo styles to match your needs. You’ll also find tons of customizable options, including a custom header builder.

PromoGear empowers you to create stunning one-page sites that can be tweaked to fit just about any industry. Based on Bootstrap, it features lots of extras to help you stand out from the crowd.

Ology is a niche theme aimed at educational sites. Featuring an ultra-clean look and plenty of opportunities for customization, this theme has the flexibility you need.

A Wide Variety of Plugins

WordPress Store Locator
WordPress Store Locator is a WooCommerce-compatible plugin that will help your visitors find a retail location closest to them. With auto geolocation and more than 10 layouts, you can build a store locator that fits your brand.
WordPress Store Locator

WP Smart Fullscreen Menu
WP Smart Fullscreen Menu helps you build beautiful and intuitive navigation. It features lots of options for customization and the ability to activate after a visitor clicks an existing element on your site.
WP Smart Fullscreen Menu

Fast Gallery Mosaic
Fast Gallery Mosaic enables the creation of gorgeous image galleries in short order. Take advantage of five gallery types and a whopping 10 styles.
Fast Gallery Mosaic

Pro Event Calendar
Pro Event Calendar is a powerful way to add events to your site. Import events from outside sources, let users submit events on the front end or create them yourself.
Pro Event Calendar

PrivateContent is a great choice for those looking to build a membership-based website. You’ll get unlimited user levels, registration forms and the ability to restrict content to fit your needs.

New Items Always Being Added

The collection of WordPress goodies available at Envato Elements is just getting started. Watch for a steady stream of new plugins and themes to be added regularly.

Get WordPress Resources and More With Envato Elements

Imagine having instant and unlimited access to some of the best WordPress themes and plugins: All in one place and without having to purchase multiple licenses. Envato Elements has made it a reality!

Sign up for an annual subscription today and gain access to this new collection, along with over 400,000 digital assets. Your workflow will never be the same.

The post Envato Elements Now Offers Premium WordPress Plugins and Themes, and Only $19 Per Month appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

Envato Elements Now Includes WordPress Themes & Plugins!

If you work with WordPress, you’re in luck—WordPress themes and plugins are now included in an annual Envato Elements subscription. And what’s more, you can lock in a special introductory rate for a limited time. Read on for more details.

Adios theme on Envato Elements

What’s Included

Envato Elements already gives you unlimited downloads from a massive library of 400,000+ photos, graphics, templates, and other creative assets. Plus it gives you free access to more than 1,000 courses and 240 eBooks here on Envato Tuts+.

From today, you’ll still get all of that plus a curated collection of beautiful, premium WordPress themes and plugins. 

As with everything else on Envato Elements, this is an „all you can eat“ deal. You can download as many themes and plugins as you want, with no limits or credits to keep track of. And there’s a simple licensing system so that you know you’re covered for all of your projects.

Right now, there are over 190 top themes and 130 plugins available to choose from, and you can expect that number to grow as more authors join the platform and existing authors upload more items. 

WordPress Themes

There’s a wide range of premium themes on offer, whether you’re looking for a multipurpose theme suitable for a corporate audience or something more creative that would work for a blog or portfolio site. There are even niche themes for real estate sites, wedding sites and more—and of course, you can find e-commerce themes to help you make sales from your site.

Focuson theme on Envato Elements

WordPress Plugins

A well-designed theme is a great start, of course, but if you’re working with WordPress you’ll also need access to premium plugins to add the features and functionality you want.

Envato Elements has you covered here too, with a selection of powerful plugins to help you create booking and scheduling systems, contact forms, responsive menus, social media feeds, and more.

FlyFly WordPress plugin on Envato Elements

What It Costs

It’s important to understand that WordPress themes and plugins are only available with an annual subscription, not a monthly one. Usually, an Envato Elements subscription costs $29 a month, so the annual subscription will be $348 a year ($29 x 12).

However, for a limited time, you can save $120 on your subscription and sign up for just $228 (the equivalent of $19 a month). Remember, for that price you get not only the WordPress themes and plugins but also thousands of photos, fonts, graphics, templates and more. It’s a pretty special deal.

So head over to Envato Elements to see what’s on offer, and if you like what you see, sign up for an annual subscription to start making unlimited downloads. Don’t spend too long thinking about it, though, because this introductory deal won’t last forever!

from Envato Tuts+ Code – WordPress

WordPress Live: Up and Running With WooCommerce

WooCommerce is the most popular eCommerce platform on the web and the most popular way of bringing eCommerce to WordPress. If you’re creating an online store, you might be surprised at how easy it is to get up and running with WooCommerce!

In this free live stream course, Rachel McCollin will show you how to set up the WooCommerce plugin for WordPress. Follow along live on YouTube as she installs and configures a WooCommerce store.

Watch the course live to ask questions as you follow along!

If you can’t make it to the live stream, you always can watch the recorded course later on Envato Tuts+.

from Envato Tuts+ Code – WordPress

Top Cheatsheets and Reference Guides for JavaScript

JavaScript is at the forefront of powering UI across the web. It provides us with a means to create interactive features that range from slick animation all the way to manipulating data. Users may not think about it all that much – but that’s the point. Developers use JavaScript to simplify otherwise complex things. The power lies within its transparency to the end user.

Where web professionals are concerned, JavaScript is also quite vast. There are so many popular libraries that enable rapid development, along with good old plain JS.

To help you sort through it all, we’ve compiled a listing of cheatsheets and guides for JavaScript and its many flavors.

Plain (aka Vanilla) JavaScript

The beauty of plain JavaScript (sometimes referred to as “Vanilla”) is that you don’t need to load any special libraries to use it. The result is faster load times, while still having the power to build something quite complex. Plus, building that foundation can better prepare you for working with frameworks later on.

JavaScript Cheat Sheet: Tips & tricks (JAXenter) View →
JavaScript Cheat Sheet (Marijn Haverbeke) View →
Javascript Cheat Sheet (OverAPI) View →
JavaScript Cheat Sheet (XUL) View →
JS CheatSheet (HTML Online) View →
JavaScript Regex Cheatsheet (Debuggex) View →
Modern JS Cheatsheet (Manuel Beaudru) View →
PlainJS (PlainJS) View →
The Ultimate JavaScript Cheat Sheet (Codementor) View →
Toptal’s Quick And Practical JavaScript Cheat Sheet: ES6 And Beyond (Toptal) View →
Top 50 JavaScript Plugins & Libraries (Speckyboy) View →


Perhaps the most popular JavaScript library, jQuery has withstood the test of time. The fact that it is included by default with WordPress means that it’s used on a whole lot of websites.

jQuery API (Official) View →
jQuery Cheatsheet (Devhints) View →
jQuery Cheat Sheet (JavaScript Toolbox) View →
jQuery Quick API Reference (Óscar Otero) View →
jQuery Selectors (DZone) View →
jQuery Tutorial – An Ultimate Guide for Beginners (Tutorial Republic) View →
jQuery Tutorial for Beginners ( View →
Learn jQuery Tutorial (javatpoint) View →
The Complete jQuery Tutorial ( View →
The jQuery Mega Cheat Sheet (Make A Website Hub) View →
The 50 Most Useful jQuery Plugins (Speckyboy) View →


Node.js has become a widely popular run-time environment for executing JavaScript as server-side code.

Advanced Node.js Tutorials (RisingStack) View →
Complete Node.js CheatSheet (Julien Le Coupanec) View →
Node.js Documentation (Official) View →
Node.js for Beginners (thenewboston) View →
Node.js for Beginners (Tuts+) View →
Node.js Refcard (DZone) View →
Node.js Tutorials (GitBook) View →
Node.js Tutorial For Absolute Beginners (Traversy Media) View →
Node.js Tutorial – Step-by-Step Guide For Getting Started (airpair) View →
The Node Beginner Book (Manuel Kiessling) View →


An open source project by Facebook, React is a library dedicated to building fast and advanced UIs.

All the fundamental React.js concepts, jammed into this single Medium article (Samer Buna) View →
build with react (Paul Shen) View →
Learning React.js: Getting Started and Concepts (Scotch) View →
React.js Cheatsheet (Devhints) View →
React Cheat Sheet ( View →
React Cheat Sheet (PDF) (ihatetomatoes) View →
10 Super-Useful React Components, Libraries & Tools (Speckyboy) View →
React JS Crash Course (Traversy Media) View →
ReactJS For Beginners (Andrew Ray) View →
React Lifecycle Cheatsheet (Monica Olinescu) View →
Tutorial: Intro To React (Official) View →

More Useful Frameworks

Beyond the wildly popular selections above, there are many incredibly flexible JS frameworks worth checking out. Here are a few others worth a look.

Angular / AngularJS

Developed by Google, Angular (and legacy version AngularJS) is an open-source front end framework for building complex web applications.

Angular Cheat Sheet (Official) View →
AngularJS vs Angular (Code School) View →
Angular 4 Development Cheat Sheet (DotNetCurry) View →
Getting Started with Angular 4 (edureka!) View →
The Ultimate AngularJS Cheat Sheet (DotNetCurry) View →


Vue.js is an open-source JS framework that is meant to be incrementally adoptable, so it can be used in combination with other libraries.

Build a To-Do App with Vue.js 2 (Scotch) View →
Guide to Vue.js (Official) View →
Vue.js Complete API Cheat Sheet (Vue.js Tips and Tricks) View →
Vue.js Tutorials (GitBook) View →
VueJs: The Basics (coligo) View →

Build, Enhance, Learn

With such a wide variety of available resources, there’s never been a better time to dive into JavaScript. Whether you want to master a top framework or build foundational knowledge of the language itself, the resources above will help you get there.

If you’re looking for CSS cheatsheets, take a look at this article, and for WordPress, look here.

The post Top Cheatsheets and Reference Guides for JavaScript appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

Weekly News for Designers (№ 411)

Get FullStory for Free, Forever.
Get FullStory for Free Forever

IBM Type – IBM’s new typeface is available for download, along with some useful advice.
IBM Type

10 WordPress Plugins to Supercharge Advanced Custom Fields – Add even more useful features to the popular WordPress plugin.
10 WordPress Plugins to Supercharge Advanced Custom Fields

Shards – A free and modern UI toolkit for web makers based on the popular Bootstrap 4 framework.

Gradientify – A collection of top gradients with copy and paste CSS code.

The Contrast Swap Technique: Improved Image Performance with CSS Filters – An interesting method for reducing image size with the help of CSS.
The Contrast Swap Technique: Improved Image Performance with CSS Filters

A Beginner’s Guide to UX Prototyping – One of the best tools in a designer’s box in terms of optimizing UX is the prototype.
A Beginner’s Guide to UX Prototyping – Every shortcut for designers in one place.

js2flowchart – A visualization library to convert any JavaScript code into a beautiful SVG flowchart.

Sketch Syntax Highlighter – Automatically highlight the syntax of any code snippet, right within Sketch.
Sketch Syntax Highlighter

Emergence.js – Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser.

The modern web design process – An Ebook to help you learn how a well-defined process translates to high-performing websites.
The modern web design process

Biomatic UI – A flexible atomic-focused CSS framework.
Biomatic UI

Advanced CSS-Only Form Styling – Learn about selectors both new and old that you can use to style form inputs based on requirement, validity and more.
Advanced CSS-Only Form Styling

Flexbox and Grids, your layout’s best friends – Debunking the myths around Flexbox & Grids in order to show you the power of these two technologies working together.
Flexbox and Grids, your layout’s best friends

City Lights – A suite of beautiful dark theme goodies for Atom & Visual Studio Code.
City Lights

A Responsive Accessible Table – An in-depth guide to creating beautiful responsive HTML tables.
A Responsive Accessible Table

Expanding Grid Item Animation – A grid item animation where the thumbnail scales up when the details view is opened.
Expanding Grid Item Animation

Orion Icon Library – A collection of more than 4,500 free SVG icons.
Orion Icon Library

Follow Speckyboy on Twitter, Facebook or Google+ for a daily does of web design resources and freebies.

The post Weekly News for Designers (№ 411) appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

10 WordPress Plugins to Supercharge Advanced Custom Fields

I have to admit – I have a bit of a dev-crush on Advanced Custom Fields (ACF). The popular WordPress plugin allows you to build some incredibly powerful and user-friendly customizations. It takes WP’s already built-in ability to use custom fields and adds an attractive GUI for ease of use. But that’s really just scratching the surface.

Using ACF, you can create a custom UI that makes adding content a breeze. This makes for better efficiency and serves as a helping hand for non-technical users.

For example, you might dedicate a section of your website to staff member profiles. You could create custom fields for each person’s name, title, email address, photo and biography.

From there, you add the custom fields to your theme’s template so that they display exactly the way you want. The result is that inputting content is quite simple and you ensure that the data displays consistently on the front end. So yeah, that’s why I love using this plugin!

Even better is that several developers have created companion plugins that add even more cool features to ACF. Let’s have a look:

ACF Theme Code

ACF Theme Code solves a very common issue when adding custom fields – you need to add code to your theme in order to render that data (although Shortcodes are also available for more simple implementations). This can get rather complicated even for seasoned developers.

Using this plugin, a code snippet for each field is displayed at the bottom of an ACF page that you can copy and paste into your theme. A pro version adds more features, including compatibility with several third party add-ons (some of which are in this roundup).

ACF Theme Code

Advanced Custom Fields: Font Awesome Field

This plugin combines my passions for both ACF and Font Awesome icons. It adds a field that lets users choose an icon to go along with their content.

For example, I recently used this to add icons to text headings within a page. It makes for a nice way to separate content and provide context to visitors. Plus, people really like to pick out their own icons.

Advanced Custom Fields: Font Awesome Field

Advanced Custom Fields: Table Field

Here’s an easy way to add custom field data to HTML tables. What’s nice is that the non-technical user can enter data without having to worry about breaking anything. Simply drag rows or columns to reposition them. Tables can also have an optional header.

Advanced Custom Fields: Table Field

Advanced Custom Fields: Gravityforms Add-on

Both ACF and Gravity Forms are among the most flexible WordPress plugins. So it makes sense that there’s now a way to tie them together. This add-on creates a new “Forms” field type that will allow the user to select the form of their choice from a drop-down list.

Advanced Custom Fields: Gravityforms Add-on

Advanced Custom Fields: Image Crop Add-on

When building a UI that includes an image field, you often have specific image dimensions in mind. Users, however, don’t always pay attention. WordPress can try to automatically crop large images but the results may not be pretty. Here we have a plugin that will allow the user to crop an image to the exact dimensions you specify.

Advanced Custom Fields: Image Crop Add-on

Advanced Custom Fields Repeater & Flexible Content Fields Collapser

The ACF repeater field is very handy for managing content. But its display within the WordPress backend can get messy.

That’s where the Repeater & Flexible Content Fields Collapser comes in to save the day. It collapses each row of fields in a repeater (except for the first) to tidy up your screen. It does the same for the flexible content field as well.

Advanced Custom Fields Repeater & Flexible Content Fields Collapser

Ajax Load More for Advanced Custom Fields

The Ajax Load More plugin adds infinite scrolling to various aspects of your WordPress Website. This add-on brings that same lazy loading functionality to ACF repeater, flexible content, gallery and relationship fields.

Ajax Load More for Advanced Custom Fields

ACF Code Field

As the plugins’ name indicates, a “Code” field is added to ACF. Based on the Codemirror JS plugin, you can now easily add code examples through a custom field. This could be a great solution for those who run a tutorial-based or code repository website.

ACF Code Field


If you’re taking advantage of the WordPress REST API to build custom applications, you’ll also want the ability to pass along custom field endpoints. ACF to REST API allows you to choose fields to both share with and be editable through the API.

ACF Code Field

ACF qTranslate

Meant to be paired with qTranslate X, this ACF add-on will add dynamic multilingual capabilities to a variety of custom field types (text, text area, WYSIWYG, image and file). This is a very handy tool when managing a multilingual website.

ACF qTranslate

Build It Your Way

If you’re serious about developing with WordPress, then custom fields are a must-have tool. With Advanced Custom Fields, you have the ability to customize just about any type of content scenario imaginable. It’s one of the tools that help make WordPress a truly powerful platform.

But combining ACF with the add-ons above will bring even more convenience and flexibility to the party. It will allow you to transform a standard website into something much more dynamic.

The post 10 WordPress Plugins to Supercharge Advanced Custom Fields appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine