Tag: 10 tips

Building your WordPress website, or any website for that matter, is a lot of work if you want it done properly. I like to build my websites lean and avoid clutter as much as possible. Because of that, and because I design each website myself. Premium (or free) themes are not an option. Many come bloated with scripts and other stuff that slows the website down to a crawl. And when you design the layout yourself, a ready-made theme is more of a distraction than of any help. Over the years, my business has grown, and time became more of an item. This led me to develop a systematic way to developing the websites I build efficiently as possible. In this article, I will explain how I do this in 10 tips, garnered over years of experience. May it help you streamline your working process. I should start by mentioning that I do all of the work on a Windows machine. I know this is not the standard operating procedure for web designers, but since I've know Windows very well for a long time, and I have always found a means to an end, the Macbook is still only used to test the final result on Mac browsers. If you think I'm on the wrong track here, and should switch to Mac / Node.js / Grunt mumbo jumbo, please feel free to comment and tell me why and where to start :-) 1. Install a local web server When building your Wordpress website, you can either designate some online web server space (maybe a sub domain of your own website for instance), or simply install a local web server on your PC. Developing locally has the benefit of a very quick system, and no extra effort required to shield your work-in-progress away from those wretched search engines or even visitors. To this end, I always use XAMPP. This is free, and does the job very well. I started out with WAMP, which is actually built for using on Windows, but that produced quite unexpected results (although admittedly, that experience is a couple of years old, it might be better now). Using XAMPP, I never encountered any issues. 2. Use a theme framework If you build many sites, and have to maintain them as well, using the same theme framework has huge benefits! Your code always uses the same logic and it's always placed in the same location, saving you a ton of time, helping you build quickly. I use an adapted version of the HTML5blank theme. It's very sparse, but that's fine because I always build my own layout anyway, and add functions when needed. Of course there are plenty of other framework themes that would serve you just as well. It's more a matter of taste than anything. Feel free to check my collection of oft-used WordPress snippets: WordPress snippets collection to ameliorate your own theme framework. 3. Function before form Using the framework, set up your website so it is fully functional. Worry about the styling later. This will save you a lot of time as you will otherwise find yourself adjusting the styling code you built so meticulously time and again. 4. Style Mobile first Just like the design phase, When styling your website, build your stylesheets mobile first. Then progress by adjusting for larger screens by enlarging your browser window, see what changes and adapt. It's also important to determine beforehand at which screen sizes you want to start showing certain content or layout items you deem unnecessary on mobile screens. 5. Use a good code editor There are many code editors out there, both free and paid for, such as Notepad++, Visual Studio or Atom. I've been a very happy user of Sublime Text for years. The license is cheap, and there are tons of free packages to make your life easier, like code checking, syntax recognitions, alignment, placeholders, file comparison, etc. It also offers the possibility to save code snippets for later use. A license is per person, so you can use it on as many machines as you like, as long as it's just you using it. If you don't want to pay, you can use the free version, which reminds you of that fact each time you start it up but has no further limitations. 6. Use SASS SASS is a CSS extension language, allowing a lot more freedom in creating stylesheets. It extends the basic options in CSS, allowing you to code smarter and quicker: Color variables: So easy if you want to change one of the main colors on the site! I set up a color schema that requires far less work to change for each new site, like this: $cBg: pink; // main background color $cHeaderBg: black; // header background color $cP: #000; // color for paragraph text $cH: orange; // color for heading text $cA: red; // link color $cAhover: blue; // link hover color $cFooterBg: $cHeaderBg; // footer background same as header background etc mixins: @mixin ease-aL($easeA:all 0.5s ease-in) { -webkit-transition: $easeA; -moz-transition: $easeA; -o-transition: $easeA; transition: $easeA; } extensions: .gradient { background: #1b6e91; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAw JSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGl kPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iM CUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiNmU5MSIgc3R vcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMTg5YjQiIHN0b3Atb 3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWd odD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #1b6e91 0%, #2189b4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b6e91), color-stop(100%,#2189b4)); background: -webkit-linear-gradient(top, #1b6e91 0%,#2189b4 100%); background: -o-linear-gradient(top, #1b6e91 0%,#2189b4 100%); background: -ms-linear-gradient(top, #1b6e91 0%,#2189b4 100%); background: linear-gradient(to bottom, #1b6e91 0%,#2189b4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b6e91', endColorstr='#2189b4',GradientType=0 ); } Then simply call the gradient like this: .header { @extend .gradient } nested code: .widget { h3 { color:red; &:hover { color:green; } } } use of sub-stylesheets which are automatically compiled to style.css (Make sure you prepend each file using and underscore). For example: _001-variables.scss > all sass variables like combined prefixes, color variables, etc. _002-normalize.scss > standard normalize code _003-global.scss > the basic styling code _004-plugins.scss > custom styling for your plugins _0768.scss > all code for screens of 768px wide and up _1080.scss > all code for screens of 1080px wide and up _1366.scss > all code for screens of 1366px wide and up _1920.scss > all code for screens of 1920px wide and up _style.scss > theme information + call all sub-stylesheets etc. Using an order numbering is no requirement, but I find it practical because the files will be in order in your Windows Explorer, Mac Finder or Sublime Text folder/file pane. Depending on the size of the code, I like to separate function (plugins, navigation, woocommerce) and screen sizes into separate sub files. This approach makes life so much easier, the code is always in the same location and uses the same logic. More information about SASS and all its possibilities can be found here: Sass-lang.com. 7. Use a preprocessor Using a preprocessor like Prepros allows you to automatically compile and minify your stylesheet when saving any of the _XXX.scss sub-stylesheets, and automatically upload each change to the theme files using FTP. Just hit save and refresh your browser! Prepros compiles and minifies many more languages, such as Less, Javascript, Pug, Styles, Haml, Coffeescript, Markdown, etc., and it works on both Windows and Mac OSX. FTP-client If you don't use a preprocessor with built-in FTP function, you will need FTP software. The obvious choice there is FileZilla. It's free and very easy to set up and use. 8. Secure your website Set up your website with SSL Depending on how you set this up, this may be more of a SEO tweak than a security tweak: Many hosting providers nowadays offer the free SSL solution provided by Open SSL. Traffic is securely encrypted now, and search engines like it a lot, but the security is by no means airtight. A paid SSL certificate comes with an actual owner/company check (Extended Validation) performed by the Certificate Authority (the company where you purchase the certificate), whereas the free version only encrypts the traffic, but does not do the EV. If someone launches a fake bank website and sets it up with SSL, the data sent is encrypted, but it still ends up in the wrong hands. For many of my clients, a free SSL certificate suffices. But if the website handles sensitive data, such as a webshop handles visitors' payment and address details, then a certificate with an Extended Validation is a must. Add htaccess rules .htaccess (yes, a nameless file with the extension "htaccess") is a hidden Apache configuration file. It can be placed in any directory in your website, but the main one is placed in the root of your website. It allows you to further protect your website, set redirects and tweak performance. Some plugins (such as caching plugins and Wordfence) also write code here. Check my collection of .htaccess snippets here: .htaccess snippet collection. 9. Default plugins Some plug-ins I use on almost every site I build. Because they make my client's life - or mine - easier, or These are some of my favourites: Backend ACF: not a free plugin, but if you are building your Wordpress website for others to manage content, the standard WordPress interface leaves a lot to be desired. Advanced Custom Fields allows you to build an interface tailored to your client's exact needs. Duplicate post: very handy plug-in which will allow you to copy a post or page with all of its custom fields, attachments, etc. Super time saver! Backup: Backing up your WordPress website by hand is a lot of work: export the database, export the content, copy the files and folders...and then restoring them. Good backup plugins make a snapshot of the complete package, and are able to restore it with the same ease. I've used BackupBuddy for years, and backing up and restoring are easy and quick. Security WordFence is an extensive firewall and security scanner. In most cases, the free version provides everything I need, but if you are looking for more advanced blocking (such as per country), then you may opt for the paid version. Akismet checks comments and submitted forms for spam, and does a great job at it. Activity log: If you maintain a website, in case of problems, the ability to check for the exact time of changes can prove very useful. Activity log keeps track of all logins, plugin activities (installing, deactivating, updating, etc), content changes, etc. WP-UserOnline: if I want to perform maintenance activities on my website, like updating plugins or WordPress itself, I like to check first if there are any visitors. You don't want to chase them away with a maintenance message. With UserOnline, you can easily check for current visitors, split up by visitors with an account, guests, and bots. Very useful! Performance optimization Caching: preloading your pages server-side, storing files in the visitor's browser cache, concatenating and minifying stylesheets and javascript files, caching provides a major performance boost. It can also be a pain to configure caching plugins. Free solutions I've used in the past, mainly W3 Total Cache, provided excellent caching, but were a lot of work configuring and maintaining. Because of this, I switched to WP-Rocket a couple of years ago. In my opinion, the small price is worth it: configuration is very easy, and support is very good. And it works very well to boot! Image compression: Like caching, compressing your images can make a significant difference in the performance of your website, especially for visitors with limited bandwidth. Saving your images at the right size (i.e. no larger than the maximum size they will be displayed on the website), and saving them for the web in Photoshop is a big step in the right direction, but there are plugins that can optimize your images even further. Their impact is even bigger when images are uploaded by content managers who do not have the software or knowledge to upload optimized images. The best free solution I've come across is Smush Image Compression and Optimization. The paid version of ShortPixel produces even more efficiently optimized images, at only a small price. Redirection: it's not uncommon that I make changes to post or page URLs, usually from a usability or SEO perspective. When creating a website to replace an existing one, it can even happen that hundreds of URLs change. The Redirection plugin automatically recognizes the change you make and creates a 301 redirect. It's also very useful to have an overview of your redirects SEO Yoast SEO: My favourite SEO plug-in, and probably the most popular one around. It also comes with handy extra functions such as breadcrumbs and a dynamic sitemap. All-in-One SEO Pack: For WooCommerce websites, I prefer AIOSP, as that has a version which is tuned to webshops and products. Yoast offers this also, but only as a premium (paid) extension. AIOSP is also very good for non-e-commerce websites. I'm just more used to Yoast, that's all. AMP:AMP, or Accelerated Mobile Pages, is a new way to display pages on your website, optimized for mobile use. Using it has a positive effect on your SEO. Read more about it on the AMP project website. So far, it does not seem to work well with WooCommerce. Great tip from one of the readers of this article (see comments): Check your AMP setup using AMP Validator. Structured data: Setting up your content using structured data will help search engines understand what your content is about, improving SEO. There are several plugins available for this, I prefer Markup (JSON-LD) structured in schema.org. Google Analytics: GA is an essential tool that tells you all about the traffic on your website. Such as where your visitors are coming from, which pages they see, how much time they spend on pages and how they got on your website in the first place. There are lots of plugin and non-plugin options to connect to Google Analytics, I usually prefer Google Analytics for WordPress by MonsterInsights (formerly a Yoast plugin). Content Miscellaneous: Shortcodes Ultimate is a great collection of front-end content functionalities (tabs, tables, galleries, animations, etc.) which can be added very easily. The only drawback is that support is sub-par. Tables: TablePress is the best free table plugin around. Or paid, for that matter. Forms: Contact Form 7 is my favourite forms plugin for simple forms. It’s completely free, and lay-outs are easily customizable with CSS. Add the (also free) Flamengo extension to keep track of the forms that have been submitted. Forms: If CF7 functionalities are too limited for your needs, Gravity Forms is the answer. It's a paid license, but offers a world of possibilities, and excellent support. Multilanguage: For websites offering content in multiple languages, WPML is the superior option. It is a very flexible and complete system, and comes with excellent support. WPML is compatible with all well-known premium plugins, such as WooCommerce, Gravity Forms, etc. E-commerce: The best option for a WordPress webshop is WooCommerce. It's a free basis from which to start, but you will soon find out that when it comes to webshops, most of the decent added functionalities come at a price. WooCommerce company Woothemes offer many extra plugins themselves. They are not the cheapest solutions around, but in my experience work very well. 10. Backup/Restore Once you've finished building and testing on XAMPP, make a full backup of your website, and restore it to the live environment. You should still test the site afterward, as there may be small differences. In fact, my modus operandi is I have a basic WordPress website with all standard plugins, settings, sass, etc. installed and configured. This I backup and restore to a new site on my XAMPP platform, and build from there. If you have any sound advice on how I could further streamline my development process, please feel free to leave your comment!

Tag: 10 tips

10 tips to building your WordPress website efficiently