Website of the day: Couro Azul

Awwwards website of the day: Couro Azul

New website of the day at Awwwards.com: Couro Azul

Advertisements

An Introduction to WordPress Child Themes

Among the top features of WordPress is the ability to build a great-looking website even if you’re not a designer. Through the use of third-party themes, just about anyone with a bit of technical knowledge can create something that both looks and functions quite well. Add that to the fact that many themes are either free or otherwise affordable and you can see why so many people have jumped on the bandwagon.

But what a lot of people may not realize is that installing a theme and customizing it to match your needs is not the end of things. The reality is that, depending on what type of customizations you’ve made, those changes could be lost upon upgrading the theme in the future.

For example, imagine using the Twenty Seventeen theme – the default theme included with WordPress. Let’s say you directly edited a page template or even the stylesheet. While hacking your way through an existing theme is a great way to learn the ins and outs of development, it’s also quite easy to have all of those changes wiped out the next time you hit that update button. If you do that on a live site, it could be disastrous.

Thankfully there’s another, more secure way of doing things.

A Child Protects the Future

This is where the concept of the WordPress Child Theme comes into play. In short, it’s a separate theme that has its own folder inside your site’s /wp-content/themes/ directory. However, there’s a twist. Instead of being a full-blown theme, a child references back to its “parent”.

What that means is that your child theme’s folder only contains a few basic items:

  • A functions.php file.
  • A stylesheet (style.css) that contains only the styles you’re customizing or adding.
  • Only the template files you want to customize.

The beauty of this setup is that you’re still taking advantage of all the goodies the parent theme has to offer, while also adding your own personal touches. Most of the hard design and development work has already been done by the theme’s author. From there, you can do as much or as little to it as you like.

Even better is that, whenever the parent theme is updated to the latest version, the child is left untouched. While that doesn’t completely protect you against breakage (we’ll get to this later), it does mean that your customizations won’t be overwritten. That’s a pretty big deal, as it’s no fun to go in and redo all of your hard work.

Meet Your Child

Setting Up a Basic Child Theme

The initial process of setting up a child theme is quite simple and should only take a few minutes of your time. Certainly a small price to pay considering the benefits it provides you both now and in the future.

Taking the example of the Twenty Seventeen theme (and the advice of the WordPress Theme Handbook), let’s walk through the most basic of child themes:

1. Create a new folder in your /wp-content/themes/ directory. It can be named anything you want, but we’ll stick with the WordPress recommendation by calling it: twentyseventeen-child

WordPress Child Theme Directory

2. Create a new stylesheet and name it: style.css

Inside that CSS file, place a heading similar to this (you can customize it to match your specific setup):

/*
 Theme Name:    Twenty Seventeen Child
 Description:   My Twenty Seventeen Child Theme
 Author:        Your Name
 Author URI:    http://www.your-site.com
 Template:      twentyseventeen
 Version:       1.0.0
*/

There are other items you can place here, but note that the only required areas are the Theme Name and Template. The name can really be anything you’d like it to be – but pay careful attention to the Template declaration. That must match the folder name of your parent theme (twentyseventeen in our case). If that reference isn’t correct, your child theme will not work.

Below this information, you can add any custom styles you’d like to use in your child theme. If you’re changing existing styles, it might be worth copying and pasting them directly from the parent theme’s stylesheet or using your browser’s developer tools to easily spot the styles you want to target.

3. Create a functions.php file that, at the very least, references both your parent and child theme’s stylesheets:

<?php
add_action(  'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function  my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is  'twentyseventeen-style' for the Twenty Seventeen theme.
 
    wp_enqueue_style( $parent_style,  get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() .  '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

*Code modified from the WordPress Theme Handbook’s Child Theme guide.

Of course, the functions.php file is one that can be customized quite a bit as you develop your site further. But for now, this basic setup will at least get you started.

4. Copy over any of the parent theme’s template files (while keeping the originals in place) over to your child theme’s folder and modify them as you wish.

5. Inside the WordPress Dashboard, activate your new child theme by navigating to Appearance > Themes. If you’d like a picture to appear with your theme, add a 1200×900 PNG file named screenshot.png to the child theme’s root directory.

Activating a Child Theme

Odds and Ends

See how easy that was? Creating that child theme took almost no time at all and you’ve also done right by your site. But there are a few things you should know:

Things Could Still Break
While a child theme will protect your changes from being overwritten, it doesn’t guarantee that you’ll be problem-free forever. There are times when a parent theme introduces new features or even radically changes specific templates. This can cause unforeseen issues with any custom templates or styles that live in your child theme. The result is that you may have to redo some of your previous work using new copies of the templates in question.

Are You Using The Right Parent?
It almost sounds silly, but if you find yourself making massive changes to templates it’s fair to wonder if you’ve chosen the right parent theme to begin with. Remember, the idea of a child theme is make (and preserve) some custom tweaks – not to completely tear apart the original. You’ll want to work with a parent theme that is at least 75% or so of what you’re looking for. Otherwise, you may be better off with a starter theme or framework.

Parent Theme Documentation is Your Friend
Not all themes are created the same way. So while the quickie setup mentioned above works, it may not be ideal for your particular parent theme. Check out your theme’s documentation to see if there are any special considerations for creating a child (this is really starting to sound like a parenting article).

Congratulations on Your Child (Theme)

Child themes are one of those cool little WordPress tricks that can save you both some time and a few future headaches. They’re highly-recommended for situations where you want to take advantage of everything a third-party theme has to offer, while still having the ability to add your own customizations to the mix.

The post An Introduction to WordPress Child Themes appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine http://ift.tt/2obWLIS

Weekly News for Designers № 424

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

basicScroll – A tool that allows you to change CSS variables depending on the scroll position.
basicScroll

Nostaligic Code Snippets That Bring Back the 1990s – Code odes to the decade that brought us Hypercolor, Rugrats and really bad web design.
Nostaligic Code Snippets That Bring Back the 1990s

SweetAlert2 – A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes.
sweetalert2

Paddy – Automated padding and spacing for your Sketch layers.
Paddy

10 Free Shopping Cart UIs in CSS and JavaScript – Increase conversions with these open source cart UIs.
10 Free Shopping Cart UIs in CSS and JavaScript

My ❤ Letter to Digital Designers* – A few lines of appreciation from Wojciech Dobry.
My ❤ Letter to Digital Designers*

Wee People – A typeface of people silhouettes from ProPublica.
Wee People

GradPad – An online to for creating CSS color gradients.
GradPad

Make the Web Your Playground with Wix – Wix provides web professionals with a platform that enables total creative freedom.
Make the Web Your Playground with Wix

5 UX Design Principles That Never Go Out of Style – Trends may come and go, but these principles are here to stay.
5 UX Design Principles That Never Go Out of Style

Bringing the power of AMP to Gmail – Google is integrating AMP into Gmail. What could go wrong?
Bringing the power of AMP to Gmail

10 Custom CSS & JavaScript Hover & Click Effects – Some cool effects that you can use in your next design.
10 Custom CSS & JavaScript Hover & Click Effects

Direction Aware Hover Effects – Nifty CSS/JS hover effects based on the direction a user is coming from.
Direction Aware Hover Effects

Stimulus – Billed as a “modest JavaScript framework for the HTML you already have”.
Stimulus

Build It Your Way with the Composer WordPress Theme – A theme with the power and flexibility to let you create something unique.
Build It Your Way with the Composer WordPress Theme

Kutt.it – A service for managing links, setting custom domains and viewing stats.
Kutt.it

Designer-Oriented Styles – Taking a look at what’s best for designers in the “CSS-in-JS” debate.
Designer-Oriented Styles

3D iMacs – Experience parallax scrolling made with pure CSS.
3D iMacs

Everything Easy is Hard Again – Designer Frank Chimero discusses the rapidly increasing complexity of web design.
Everything Easy is Hard Again

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

The post Weekly News for Designers № 424 appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine http://ift.tt/2FaNt76