WordPress – SitePointhttps://www.sitepoint.com
Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and MoreTue, 26 Sep 2017 17:00:02 +0000en-UShourly1https://wordpress.org/?v=4.8.1Introducing Portfolio WordPress Theme – and the Design Decisions Behind ithttps://www.sitepoint.com/introducing-portfolio-wordpress-theme-and-the-design-decisions-behind-it/
https://www.sitepoint.com/introducing-portfolio-wordpress-theme-and-the-design-decisions-behind-it/#respondWed, 08 Mar 2017 17:00:48 +0000https://www.sitepoint.com/?p=149885As you may have noticed, SitePoint now offers our own range of premium WordPress Themes. Our newest and – we think – most attractive theme is called ‘Portfolio’. We worked closely with a very talented designer – Shahadat from Droitlabs – to try to create the ideal platform for designers, writers, artists, and even front-end coders to showcase their talents. The brief was ‘crisp, open and minimalist’.

I thought it might be useful to break down the key design decisions that drove it.

1). Choosing the Typography: Raleway and Open Sans Regular

Typography choices are always loaded. Arguably no other design decision will be so totally pervasive to the feel of a design, yet also strangely invisible to the user. The may read thousands of words a day on Facebook, yet ask the average user to describe the font used, and they’ll most likely blink and shrug.

Raleway has the look of flexed and machined steel – the kind of lettering you see on 1930-40’s era post offices, schools, and public buildings. It’s always razor sharp but not aggressive.

Open Sans Regular was a nice match for the body type. It’s more versatile than Raleway but shares a lot of neo-grotesque qualities – minus some of the distinctive mid-century flourishes (like the ‘w’). They share space on the same page together easily.

2). Selecting Imagery

Our typography pointed the direction towards the iconography we selected. Both Raleway and Open Sans Regular use a light, single weight line – almost like they’re crafted from fencing wire.

I’ve seen real-world fencing wire sculptures – this raw piece from MadeByJoel.com is brilliant – so we wanted to continue the ‘wirework look’ for the icons, assembling a combination of linear icons – about 50 all up. As no single icon set had what we wanted, we curated a new icon library from a number of sources including:

They’re all in crisp SVG, so they work fine at almost any scale from icon to feature illustration.

3). The Gallery View

Showing off your work to its best effect is always going to be super important in a portfolio site. We focused the gallery on showcasing collections of visuals in a square-tiled gallery layout before opening each unit into a magazine-like modal. You can filter your images by category or browse them all as an open collection.

4). Particle Geometry Effects

While we wanted the hero area to remain open and uncluttered, we thought a subtle touch of the unexpected wouldn’t be out of place in such an important panel. The particle effect we implemented here fits the bill nicely. It’s calming yet charming.

The floating nodes and linking vectors hint at the theme of idea generation and connections – a relevant skill for designers, writers, and coders. It adds texture and depth to design but doesn’t demand your attention over more important page elements – in this case, you. And that’s a good thing.

Most people find it hard to love security, even though we know it's something that shouldn't be neglected or overlooked.

WordPress users - did you know that WordPress powers a third of the web? This brings a lot of benefits - a great, supportive community, plenty of plugins and tools - but it also makes WordPress a popular target for attackers. As website owners or developers, we need to be responsible for the websites that we build and maintain. There's a massive ecosystem of both free and paid tools and services to help keep our websites clean and secure.

We've been holding monthly webinars with experts on all manner of subjects, and this week we'll be discussing WordPress security. Chris Burgess, Co-Founder ofClickify and SitePoint's very own WordPress editor will be joining us to share his wisdom.

Chris will explore the risks associated with common web security issues and provide some handy tips. He'll even cover some practical, real-world preventative measures you can use to protect and monitor your WordPress website right away. If that wasn't enough to have you circling this event in your schedule — you'll also have your chance to join in the discussion and ask Chris your very own question!

When is this happening?

]]>https://www.sitepoint.com/spreading-the-word-on-wordpress-security/feed/207 Reasons NOT to Use a Static Site Generatorhttps://www.sitepoint.com/7-reasons-not-use-static-site-generator/
https://www.sitepoint.com/7-reasons-not-use-static-site-generator/#commentsWed, 16 Mar 2016 22:00:21 +0000http://www.sitepoint.com/?p=126689In my previous article we discussed reasons why you could benefit from using a static site generator. To recap:

A static site is a collection of pages contained in basic HTML files. You could hand-write these in a text editor but managing assets and repeated elements such as navigation can become problematic.

A Content Management System stores page content in a database and provides facilities to edit and apply themes. Management becomes easier at the expense of flexibility, performance, server requirements, security and back-ups.

A Static Site Generator is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data (such as markdown files) and templates. The resulting build is transferred to your live server.

Static site generators have become increasingly popular and, if my prediction is correct, usage will explode during 2016. Let's establish what we mean by the term "static site generator" …

What is a Static Site?

Think back to the first website you built. Most developers start by creating a series of pages contained within individual HTML files. Each will call in assets such as images, CSS and perhaps a sprinkling of JavaScript. You possibly launched these files directly from the file system without a web server. Life was simple.

Difficulties arise as your site becomes larger and more complex. Consider navigation: it may be similar in every file, but adding a new page requires updates to every other. Even references to CSS and images can become awkward as folder structures evolve. You may have considered options such as server-side includes or PHP, but an easier option can be a content management system (CMS) …

What is a Content Management System?

A CMS typically provides administrative control panels -- which allow authors to write content that's stored in a back-end database. When a visitor requests a URL, the CMS:

determines which page is required

requests appropriate content from the database

loads an HTML template (normally from the file system)

renders the content within the template, and

returns a formatted HTML page to the visitor's browser.

This occurs almost instantly. The template can include code to generate menus according to the navigation hierarchy. Life is sweet, and more than one in four people choose the PHP/MySQL-powered open source WordPress CMS to manage their website.

Unfortunately, a CMS raises a different set of issues:

You need to adhere to the CMS's way of working. It can be awkward to add custom text or components.

The server is doing more work, and performance can be affected.

There are additional points of failure. A software upgrade or database failure can bring your site down.

What is a Static Site Generator?

An SSG is a compromise between using a hand-coded static site and a full CMS, while retaining the benefits of both. In essence, you generate a static HTML-only website using CMS-like concepts such as templates. The content can be extracted from a database but, more typically, Markdown files are used.

The site generation can occur on your development machine or staging server. The resulting HTML files are then deployed to a live web server. Users will never know the difference.

A related concept is a "Headless" or "Decoupled" CMS. These use an interface such as WordPress to handle content administration but allow other systems to access the data via a REST API. Therefore, an SSG could build a static website using WordPress page content extracted from an internal server. The resulting HTML files can be uploaded to a web server -- but the WordPress installation need never be accessible from outside the organization.

]]>https://www.sitepoint.com/7-reasons-use-static-site-generator/feed/14Watch: Create a Bare-bones WordPress Theme from Scratchhttps://www.sitepoint.com/watch-create-a-bare-bones-wordpress-theme-from-scratch/
https://www.sitepoint.com/watch-create-a-bare-bones-wordpress-theme-from-scratch/#commentsTue, 01 Sep 2015 17:30:58 +0000http://www.sitepoint.com/?p=113892Developing WordPress themes is easier than you think. If you know a little bit of HTML and PHP, you can create a very rudimentary but functional, WordPress theme in just a few minutes. In this screencast, I am going to show you how to create a WordPress theme from scratch.

]]>https://www.sitepoint.com/watch-create-a-bare-bones-wordpress-theme-from-scratch/feed/3Boost Your WordPress and Drupal Performance with Pantheonhttps://www.sitepoint.com/boost-wordpress-drupal-performance-pantheon/
https://www.sitepoint.com/boost-wordpress-drupal-performance-pantheon/#respondThu, 21 May 2015 22:40:42 +0000http://www.sitepoint.com/?p=100110This post was sponsored by Pantheon. Thank you for supporting the sponsors who make SitePoint possible!

Consider the typical tasks involved when deploying your WordPress or Drupal website to a new web host…

Sign-up and create a new environment.

If you’re using a dedicated or virtual server, install and/or configure a web server, PHP, MySQL and other dependencies.

Redo the whole process for your test, staging and production environments.

And then your problems really start…

Updates can be difficult to deploy everywhere

A traffic spike caused by a popular article or advertising campaign can bring the server to a halt at the worst possible moment

A DoS attack can be catastrophic for every site hosted on the same environment

The website is difficult to scale as you grow

Hardware and software updates can cause outages or compatibility problems.

The process may be manageable for a couple of installations but consider hosting a few dozen websites – or thousands. Managing multiple WordPress or Drupal sites is time-consuming, tedious, error-prone and prevents you away working on tasks which add real value.

Can Cloud Hosting Help?

To some extent, yes. However, cloud hosting typically requires one or more separate virtual machines for every site. VMs are large, expensive and still rely on significant hardware resources to scale effectively. The traditional approach to scaling also requires considerable manual intervention by systems administrators or DevOps. Modern Infrastructure-as-a-Service providers such as AWS and Rackspace make it easy to provision new VMs to handle additional workload but someone, somewhere needs to stitch those additional servers together. Deployment takes time – and that may be too late for your traffic spike.

Step One to Saving Your Sanity: Use Version Control

If you’re not using version control it’s time to start. Git is a great choice but any solution is better than none. Version control can be used to create a stable deployment process to improve your workflow. Ideally:
Team members will have access to their own, separate development environments which allow them to update or create new features on separate code branches.

Content – such as your WordPress pages, posts and images – are synchronized from the live environment to all development and staging systems. The team can then work against an accurate snapshot of reality which is critical for a full understanding of the system.
Automated quality-assurance tests ensure new code is tested prior to deployment. It should be impossible for problematic features to reach the live server.

Step Two: Consider a Website Management Platform

A what? Website Management Platforms are a new concept. They’re similar to cloud-based Platform-as-a-Service (PaaS) hosts such as Heroku or Cloud Foundry. However, a WMP is purpose-built for a specific application such as WordPress and Drupal rather than a development environment such as PHP or Ruby.

The leader in this field is Pantheon, a company that implements hosting and scaling in a new way. Rather than rely on heavy VMs, sites are constructed on lightweight containers abstracted from the OS and hardware. Only the application is included – not the whole guest OS, PHP, MySQL or other dependencies. WordPress and Drupal applications can then be managed from Pantheon’s dashboard.

Pantheon has created an infrastructure named the “Runtime Matrix”. This executes your site’s code across hundreds of powerful servers which serve millions of containers. Intelligent routing, load balancing and advanced caching and security services are included as standard. The service also includes Pantheon Content Base which manages databases, files and version control more effectively.

Pantheon’s Website Management Platform has a number of advantages including:

1. Fast Provisioning

Containers are provisioned using software which means they can be added or removed very quickly. Idle sites, such as development containers, are effectively deactivated until a new request is made. The largest websites in the world — like Google, Facebook and Twitter — are managed through software, not by manually adding and configuring new VM’s, servers and services. Software-based provisioning removes human error and greatly increases the speed of new services coming on line. A Website Management Platform quickly provisions all the required services so sites can scale out quickly to handle peak loads with minimal human intervention.

2. High Availability

High availability means guaranteed uptime even when services fail. One compelling aspect of Website Management Platforms is the ability to handle redirection of traffic and service requests to known working services for code execution, content requests, db…. The multi-tenant, high-availability values introduced by salesforce.com, gmail and Heroku are now finding their way into website management, where a dedicated team of platform engineers deliver services that most companies would not be able to build and manage on their own.

]]>https://www.sitepoint.com/boost-wordpress-drupal-performance-pantheon/feed/0How to Make Your Blog Load in 560mshttps://www.sitepoint.com/how-make-blog-load-560ms/
https://www.sitepoint.com/how-make-blog-load-560ms/#commentsMon, 03 Nov 2014 18:00:05 +0000http://www.sitepoint.com/?p=93008I’ve built a lot of blogs over the years. Each time the process begins, I ask myself: “How do I make this blog load faster than ever before?” Because, aside from personally appreciating a fast page load time, it also has a big impact on the bottom line — it increases page views, lowers bounce rate, and has been linked to improved sales numbers for sites like Amazon.

With my latest project, I’ve managed to make my blog load in about 560ms. This isn’t necessarily achievable by everyone — my blog is quite simple — but most people can surely get their blog loading in under one second.

Here are my suggestions.

1. Track your page load time

Before making any changes to your blog, run it through the following tools:

All of these provide a measurement of your current page load time, along with tips and tricks to improve that time. It helps to have a baseline measurement so you know what changes are having an impact, and it also helps to re-test as you go to get an even better idea of what’s making a difference.

2. Use a static blog generator

This is less of a tweak and more of an entire change in philosophy, but hear me out. Dynamic software like WordPress places a lot of load on servers, and that load is inevitably passed on to users. If you need WordPress, that’s fine — the remaining tips will still apply — but if you don’t need it, then I’d suggest checking out either Jekyll or Middleman. These tools allow you to generate a static, HTML-based blog on your computer, which you can then upload to whatever server you want. This means:

Your server will only have to serve static files. There won’t be any intensive processing involved. This is far more effective than mere caching and has a huge impact on page load time.

You’ll have much finer control over your website. WordPress is plenty flexible, of course, but hardly anything compares with the precision that comes with a static blog generator.

Admittedly, converting a WordPress blog to a static blog probably isn’t worth the effort, but it’s worth considering a static site generator for your next project.

]]>https://www.sitepoint.com/how-make-blog-load-560ms/feed/16WordPress vs. Jekyll: Why You Might Want to Switchhttps://www.sitepoint.com/wordpress-vs-jekyll-might-want-make-switch/
https://www.sitepoint.com/wordpress-vs-jekyll-might-want-make-switch/#commentsWed, 27 Aug 2014 17:30:10 +0000http://www.sitepoint.com/?p=88115I’ve been using WordPress for the last eight years or so and, along the way, it’s been a good companion. But it’s far from perfect. Over the last four years, while running a high-traffic blog about video games, I struggled with a range of problems, like:

My blog loading slowly.

My blog crashing during peak periods.

My blog becoming infected with malware.

It’s not like I didn’t prepare for these things. I installed W3 Total Cache, setup a content delivery network, upgraded the hosting, installed a number of security plugins, and did all of the “best practices” stuff.

Did these things help? Sure, but it was never enough, so when I shut down the site and no longer needed one of WordPress’ biggest advantages – being able to publish content quickly – I decided to look elsewhere.

Jekyll, I discovered, was exactly what I needed.

Introducing, Jekyll

Jekyll is a static blog generator. This means, instead of installing server-side software that’s built with a language like PHP, you use the command line on your local computer to generate static files (HTML, CSS, etc).

These files are generated based on:

A configuration file.

Any templates you want to define.

Markdown files for blog posts.

You then upload the generated files to any web server and, well, that’s your blog. While this might simply sound like a geeky alternative to WordPress, this static approach has a range of real-word advantages over WordPress.

Let’s talk about them.

1. WordPress is overkill.

These days, WordPress is basically a content management framework. It can do just about everything and, if that’s what you’re looking for, then stick with it. I haven’t got a vendetta against WordPress. It’s great software. It’s just evolved beyond its roots and beyond what I (and many other people) need.

Jekyll, by comparison, is just a blogging platform. To some, this focus will be limiting, but if you only want to run a blog, then:

Jekyll has everything you need and nothing that you don’t. You won’t be bogged down in options and insignifcant choices, but you also won’t lack the features you need most.

The writing experience is unparalleled. Because your content is built with Markdown files, you can use whatever text editor you prefer. Personally, I use Sublime Text, but any other option is fine. Your preference wins.

There’s less chance of anything breaking. This is partly because of Jekyll’s small scope allowing for a considerable amount of polish, but also because you’re not dealing with finnicky server-side software.

The “best” tool will always depend on the context but, increasingly, I think a simpler platform like Jekyll is worthy of being considered first.

]]>https://www.sitepoint.com/wordpress-vs-jekyll-might-want-make-switch/feed/28First Look at Themosis, a Framework for WordPress Developershttps://www.sitepoint.com/first-look-themosis-framework-wordpress-developers/
https://www.sitepoint.com/first-look-themosis-framework-wordpress-developers/#commentsTue, 08 Jul 2014 16:24:09 +0000http://www.sitepoint.com/?p=85069My dislike of WordPress is no secret. I look down on its mess of a code base, and advise anyone with any technical knowhow whatsoever against using it. But I don’t just bash it for the sake of bashing, I bash it in the hopes that someone who knows what they’re doing will pick up the baton one day and continue the popularity race in a more logical, sensible pace. Any attempt to fix the mess WP presents us with day in day out is, in my book, a good one.

Not too long ago, we heard of a new project on the horizon called Themosis, a “framework for WordPress developers”. In this piece, we’ll try and see what Themosis is, how to get started using it, and we’ll take a look at an example project built with it - the example provided by Themosis themselves.

What is Themosis

To anyone familiar with the word “framework”, especially in the context of PHP, this might sound confusing. Isn’t WP already packed full with stuff we don’t need? Aren’t frameworks usually built on a minimalistic set of principles and decoupled components, and complex WordPress-like apps built on top of them, instead of the other way around? Well, yes.

Themosis isn’t a framework in the full sense of the word as you know it. Instead, it’s an API that ties into WP on a level required to make it easier to develop in - but doesn’t necessarily make it lighter. Themosis is a set of APIs that you use to create WordPress components in a modern-PHP format with namespaces, classes, anonymous functions and Composer support.

Themosis is, quite literally, an MVC powered Laravel-ish WP plugin itself that’s used to write other plugins. It also has its own router so you can define routes Laravel-style, and its own templating engine - Scout - that’s similar to what we’re used to in Laravel and Phalcon - with some added extras for built in WordPress support. For example, the template loop:

]]>https://www.sitepoint.com/first-look-themosis-framework-wordpress-developers/feed/16Speed Up Your WordPress Sitehttps://www.sitepoint.com/speed-wordpress/
https://www.sitepoint.com/speed-wordpress/#commentsTue, 01 Jul 2014 23:25:05 +0000http://www.sitepoint.com/?p=83048As one of the top user experience factors, website performance is more important than ever. Website speed and performance on mobile devices is particularly important, with a rapidly growing number of visitors accessing the web via smartphones and tablets.

While WordPress is very easy to get up and running, making your site speedy requires a bit more work, and is an ongoing process. In this article we’ll cover why speed matters, and offer some practical advice for how to speed up WordPress.

Improving performance takes a lot of trial and error, but it’s great fun!

Why Website Speed Matters

First impressions count. The benefits of a faster website are numerous, but the three main advantages are:

1) Better User Experience

It’s well documented: people love fast websites and despise the slow. If you care about your users, you should care about the speed of your website.