wordcamp montreal 2016

GETTING STARTED WITH CHILD THEMES

NICK ADAMS @NICKADAMSTV

Mise en route avec des Child Themes

PART 1: WHAT ARE CHILD THEMES?

“A CHILD THEME IS A THEME THAT INHERITS THE FUNCTIONALITY AND STYLING OF ANOTHER THEME, CALLED THE PARENT THEME. CHILD THEMES ARE THE RECOMMENDED WAY OF MODIFYING AN EXISTING THEME.”

- WORDPRESS CODEXBookmark it!

Plus d' informations sont disponibles à codex.wordpress.org

THINK OF IT THIS WAY…• YOUR PARENT THEME IS LIKE YOUR HEAD.• YOUR CHILD THEME IS LIKE A HAT.• CUSTOMIZING THE CHILD THEME IS LIKE CHANGING THE HAT.•UPDATING THE PARENT THEME IS LIKE GETTING A HAIRCUT.

Le Parent Theme est comme la tête , le Child Theme est comme un chapeau.

Mais, je déteste les Habs.

PART 2: WHY USE A CHILD THEME?

“IF YOU MODIFY A THEME DIRECTLY AND IT IS UPDATED, THEN YOUR MODIFICATIONS MAY BE LOST. BY USING A CHILD THEME YOU WILL ENSURE THAT YOUR MODIFICATIONS ARE PRESERVED.”

- WORDPRESS CODEXMise à jour d'un Parent Theme effacera vos personnalisations.

WHY DOES THAT HAPPEN?• WHEN YOU EDIT THE CSS FILE(S) IN

YOUR THEME, YOU ARE CHANGING THE THEME FILES.

• WHEN YOU UPDATE A THEME, IT OVERWRITES THOSE FILES.

• YOUR CHANGES WILL DISAPPEAR WITH IT.Mises à jour remplacent les files de thème.

YOU WILL THEN WANT TO DO THIS…

Ensuite, vous êtes en colère.

ALWAYS?• TECHNICALLY: NO.

• IF YOU AREN’T USING A CHILD THEME, BUT YOU ARE USING A PLUGIN TO MANAGE CUSTOM CSS, SUCH AS JETPACK, THEN THIS ISN’T THE CASE.

• BUT REMEMBER, IF YOU’RE USING JETPACK’S CUSTOM CSS MODULE AND YOU CHANGE YOUR THEMES, YOUR CUSTOM CSS WILL DISAPPEAR.

Utilisation de plugins comme Jetpack peut éviter ce problème.

PART 3: HOW TO CREATE A CHILD THEME

Maintenant, nous créons un Child Theme.

FOR THIS DEMONSTRATION…• I WILL BE USING THE CURRENT

WORDPRESS DEFAULT THEME: TWENTY SIXTEEN

• I WILL BE EDITING THE FILES LIVE ON THE SITE.(DON’T DO THIS IN REAL LIFE. I’LL EXPLAIN SOON.)

• I NEEDED A THIRD BULLET POINT.Je vais utiliser le thème Twenty Sixteen. Aussi, mes blagues sont stupides.

Twenty Sixteen with no modifications.

Twenty Sixteen sans personnalisation.

Only Twenty Sixteen is installed.

Un seul thème installé.

A CHILD THEME REQUIRES…

• FUNCTIONS.PHP• STYLE.CSSYUP… THAT’S IT!

Seuls deux thèmes sont nécessaires

functions.php

Utilisez ce code.

Why the functions method?

Cette voie est la plus rapide.

SPEED(THE @IMPORT METHOD CAN SLOW THE LOADING OF STYLESHEETS)

How does it know which is the parent theme?

Comment sait-il que est le Parent Theme?

style.css

Utilisez ce code.

NEXT STEPS…• PUT BOTH OF THOSE FILES,

FUNCTIONS.PHP AND STYLE.CSS INTO A FOLDER TOGETHER AND NAME IT WHATEVER YOU ARE NAMING YOUR CHILD THEME.

• PUT THAT FOLDER INTO A ZIP FILE.

Mettez ces files dans un dossier, puis zip.

Zip file with the folder inside.

Des images en disent mille mots ... en français.

Files inside the folder within the zip file.

Je l'utilise beaucoup d'images.

Il est fou dans toutes les langues.

Add Themes page with “Upload Theme” in the top left.

Cliquez sur le bouton Upload Theme.

Find your new child theme file on your computer, then select it and press “Install Now”.

Trouvez vos files de thème.

What it will say if the Parent Theme is already installed.

Si le Parent Theme est déjà installé.

Parent Theme is not installed, but can be installed from the WordPress.org Theme Directory.

Si le Parent Theme est sur wordpress.org.

Parent Theme is not installed and can’t be automatically installed from the WordPress.org Theme Directory.

Si le Parent Theme est pas sur wordpress.org.

Si le Parent Theme n'existe pas.

If the Parent Theme is deleted

Child Theme is active!

Je ne casse pas encore rien!

PART 4: MAKING CHANGES TO THE CHILD THEME

NOTE: WHENEVER POSSIBLE, YOU SHOULD NOT MAKE CHANGES TO YOUR WEBSITE’S FILES DIRECTLY ON THE SERVER, UNLESS YOU’RE 100% SURE THAT IT WON’T CAUSE PROBLEMS.WHENEVER POSSIBLE, MAKE A COPY OF THE FILE YOU WANT TO EDIT, MAKE THE CHANGES ON YOUR COMPUTER AND THEN USE FTP TO UPLOAD THE NEW FILE.Ne pas apporter des modifications à un site en production.

Let’s change the font of the Entry Title. We can see in the Inspector that its class is “entry-title”.

Nous allons changer la police du titre.

I have added the change to my Child Theme’s style.css file. Note that there isn’t any other text in this file. All of the

Parent Theme’s styles are still in the Parent Theme’s files. But my changes to the Child Theme’s style.css file will

override the styles in the Parent Theme’s style.css.

Les modifications de style vont supplanter les styles du Parent Theme.

Note the theme you are currently editing.

Modifiez le file correct.

Don’t forget to click update.

N’oubliez pas de sauvegarder !

Oh, look! A different font!

La police est différente!

Twenty Sixteen with no modifications.

Je l'ai déjà montré cette image.

How about changing the header background…

Modification de l'arrière-plan.

The header’s background being changed in the style.css file.

J'ajoute un peu de CSS.

Blue is always fun.

Ça marche!

Make a quick change to the font colors in the header.

That looks pretty good.

Cela ressemble mieux.

Making a functionality change.

Modification de la fonctionnalité.

Making a functionality change.

Modifiez functions.php

Now we have a new widget area

Nouvelle zone de widget.

Before the new template

Avant.

With the new template

Après.

IMPORTANT NOTE• CHANGES TO STYLE.CSS OVERRIDE ANY PREEXISTING STYLES FOR THAT ELEMENT OR CLASS THAT EXISTS IN THE PARENT THEME’S STYLE.CSS

• CHANGES TO FUNCTIONS.PHP WILL BE LOADED IN ADDITION TO THE PARENT THEME’S FUNCTIONS.PHP

• THIS MEANS THAT IF YOU NEED TO REMOVE AN ACTION, YOU WILL NEED TO DECLARE THAT IN THE CHILD’S FUNCTIONS.PHPLes modifications apportées à functions.php vont ajouter des fonctionnalités.

CONGRATULATIONS! IT’S A CHILD THEME!• YOU CAN NOW UPDATE TWENTY

SIXTEEN ANYTIME AN UPDATE IS AVAILABLE WITHOUT HAVING TO WORRY ABOUT LOSING ANY OF YOUR CHANGES.

• YOU CAN ALSO INSTALL THIS CHILD THEME ON ANY OTHER WORDPRESS SITE AND IT WILL LOOK EXACTLY THE SAME THERE, NO EXTRA CONFIGURATION REQUIRED.

• YOU CAN EVEN UPLOAD IT TO WORDPRESS.ORGNous avons fini.

Ce site peut vous aider.

PART 5: FRAMEWORKS & STARTER THEMES

Le développeur le plus intéressant dans le monde!

STARTER THEMES• TYPICALLY, A STARTER THEME IS ONE

THAT YOU ARE EXPECTED TO EDIT DIRECTLY AND TURN INTO ITS OWN PARENT THEME. IT IS OFTEN INCOMPLETE.

• UNDERSCORES, ALSO CALLED _S, IS A VERY POPULAR EXAMPLE OF A STARTER THEME.

On crée des Parent Themes de thèmes de démarrage.

FRAMEWORKS• TYPICALLY, A FRAMEWORK IS A PARENT

THEME WHICH OFTEN HAS LITTLE OR NO STYLING, WHICH YOU ARE SUPPOSED TO CREATE A CHILD THEME FOR TO ADD STYLES AND FUNCTIONALITY.

• GENESIS IS A VERY POPULAR EXAMPLE OF A FRAMEWORK.

Les cadres sont des Parent Themes sans styles

MERCI!

Thank You!