WORDPRESS in the CLASSROOM by Per Thykjaer Jensen

WORDPRESS IN THE CLASSROOM By Per Thykjaer Jensen

Published by Business Academy Aarhus, Research and Innovation department. Erhvervsakademi Aarhus ForskningWORDPRESS og Innovation IN THE CLASSROOM – PART ONE Published by Business Academy Aarhus, The Research and Innovation department, August 2017.

Research and innovation publication #7

We work with applied research, development, and innovation that create value for educational programmes, companies and the society.

Read more about our research and innovation projects: http://www.eaaa.dk/forskning-og-innovation/projekter/

The publication is published as a part of the research project “What You Should Know About WordPress”. Research blog: research-wordpress.dk/

TEXT AND CONCEPT Per Thykjaer Jensen, Senior Lecturer and Project Manager, Business Academy Aarhus, The Research and Innovation department.

Contact: [email protected], tel: +45 7228 6321. Twitter: @pertjensen URL: http://research-wordpress.dk/

EDITORS Ulla Haahr and Karina Hansen, Business Academy Aarhus, Research and Innovation department.

PROOF READERS Bror Arnfast, Senior Lecturer, Business Academy Aarhus. Mark Hughes, Senior Lecturer, Business Academy Aarhus.

LAYOUT René Kristensen, Business Academy Aarhus.

ISBN 978-87-999767-2-0

3 Contents

Part one: Making WordPress

What You Should Know About WordPress 12

The History of WordPress 14

The Core-Themes 16

Themes: 2010 – 2017 19

Themes as Visions for WordPress 30

Anthropology and Open Source 32

Artefacts 33

Espoused Values 35

Basic Assumptions 39

The Prelude on Github 43

Schein, Organization and Development 48

4 WORDPRESS IN THE CLASSROOM

Part two: Diving Into Themes

The Theme-code 52 Partial Conclusion 78

Theme Building Blocks 53 Why you need a child theme 80

Three important files 54 How to make a Child Theme 81

The style.css 55 How to activate jQuery 84

The index.php 57 Nodejs and WordPress 86 header.php and footer.php 60 GULP and SASS 90 functions.php 62 Innovations in WordPress 4.7.x 96

Menus 66 How to use the REST API 98

Theme Widgetizing 70 Introduction to the wp-cli 100

Advanced Loops: Snippets and Tags 73 Install wp-cli 103

The Template Hierarchy 76 Final Words 106

References 108

5 Introduction

On the internet, about one in • Part Two: Diving into four pages are “powered by Themes WordPress”. "WordPress in the The second part focuses on Classroom” is in two parts. The WordPress frontend devel- first part will give you knowledge opment. You will learn how about WordPress, and the se- to create your own design - cond is an introduction to Word- either from scratch or tweak Per Thykjær Jensen Press frontend development: an existing theme by a child theme. Part two will also in- • Part One: Making Word- troduce some new trends in Press WordPress frontend develop- Here you will find an intro- ment such as Nodejs featu- duction to the history and res and command line tools. Project Manager and Senior Lecturer the open source philoso- Business Academy Aarhus phy behind WordPress. Part The book is the output from a Research and Innovation one will give an idea of the research project at the Research

Phone: +45 7228 6321 creative process behind the and Innovation department [email protected] Twenty Seventeen theme. at Business Academy Aarhus. This part is an answer to the The project was initiated by an question: What should the increasing number of students upcoming WordPress profes- used WordPress in their projects, sional know in order to meet or having to work with Word- the demands of business? Press during internships.

This observation led to the research question: what should the multimedia student know about WordPress in order to meet the demands of future

6 WORDPRESS IN THE CLASSROOM

employers? Several months theme. I guess that most people If you have a basic knowledge of study followed. Books on will be able to follow part one of HTML, CSS, JavaScript and WordPress, wikis and research of the book, since it’s a narra- possibly PHP, you will be able to articles were consulted. Busines- tive. follow the instructions given in ses professionals and students the second part. were interviewed. I also followed the work of the core developers closely, and “WordPress in the Classroom” Here you can see how Word- came to know more about their is intended for those who need Press emerge from the creati- workflow, methods and code. to either teach or study Word- ve vision of the open source The second part of the book Press. I hope that it will open community behind WordPress. focuses on front-end devel- the doors, and ease the path for Most researchers focus on the opment code. That is: how to the upcoming professional open usability of WordPress. Most of create a WordPress theme – or source developer. the articles I found were studies web design so to speak. of a particular WordPress solution. The researchers tested the solution on a number of users. If you teach, “WordPress in In you’re studying and By statistic method the authors the Classroom” can give you: expect to use WordPress in would conclude whether Word- your professional career this Press was usable or not. • Insight into the workflow book will give you: and know-how of Word- An empiric method like that will Press professionals. • Information about the not explain how or why certain • The history and the crea- open source philosophy WordPress features are made. tive process behind the behind WordPress And since WordPress is of vital creation of WordPress. • Knowledge about how importance for a great variety of • What you need to know in to the make a WordPress businesses, such knowledge is order to create a stun- theme. important. That’s why I decided ning WordPress theme. • What’s new or coming to follow the making of a new • Innovations in WordPress up? New trends in Word- 4.7.x Press.

7 A classroom is basically like a The book was prepared for the book will give you valuable lab. Here we can experiment. WordPress professionals in information. Try stuff, and work with back- small to medium sized busi- ground information in ways nesses. It will answer questions Open source is actually organi- that may be possible in real life like: zed in a very professional way. working situations. In real life In the book, you can follow situations, you just have to de- • How do WordPress profes- how a core-theme was made. liver. The idea behind this book sionals work with the CMS You will get valuable informa- is to open the gates to Word- in small to medium sized tion about developing you own Press. What is it. How you can businesses? themes. develop solutions, and to see • And what should they know how WordPress is used by small in order to be WordPress “WordPress in the Classroom” and medium sized businesses. practionas? is not meant as a tutorial, nor is it an omniscient manual. The “WordPress in the Classroom” is Most WordPress users take book is more like a Swiss army meant as a handbook that will the software more or less for knife for WordPress teachers open doors to a deeper under- granted. If a business depends and students. The book will standing of WordPress. These on WordPress, it is important point out where you can find days, WordPress is the content to know how WordPress is the knowledge you need in manager behind roughly 25% of made. During the preparations order to work as a WordPress all web pages. Understanding for the book, I assumed the professional. Several code WordPress is vital for anyone role of a WordPress maker and samples were made. All code is studying the web - or working followed the development of available via Github. The main as a professional web developer. the Twenty Seventeen Word- code repositories are: Press-core theme. The process gave valuable knowledge about • A primitive theme, called the creative process behind Petj-mini-theme. I guess that WordPress. If you should want this theme is almost as mini- to contribute to WordPress, mal as possible.

8 WORDPRESS IN THE CLASSROOM

• A Bootstrap theme, called It is possible to create very I hope that you will enjoy ”Word- Bootstrap-F16-Skeleton. good WordPress solutions with Press in the Classroom”. Here the code demonstrates very little or even no code at how to make a theme that’s all. A WordPress professional ready for Bootstrap and even should have at least some un- jQuery. derstanding of the mechanisms • Yet another theme skeleton, of a theme. You don’t have to called: Petj-mvp be an expert in order to read • Finally, the theme Nuit. It is a the code, but a little knowledge theme with Nodejs features. about HTML, CSS and JavaScript is necessary.

9 Part one: Making WordPress

Here you will find an introduction to the history and the open source philosophy behind WordPress. Part one will give an idea of the creative process behind the Twenty Seventeen theme. This part is an answer to the question: What should the upcoming WordPress professional know in order to meet the demands of the business?

10 WORDPRESS IN THE CLASSROOM

11 What You Should Know About WordPress

There is a clear difference between using WordPress in the business world and in the classroom. In business life, one just has to deliver. There is a costumer, and the developer must comply with whatever demands the client may have. As a contrast, the classroom is a lab where experiments are possible.

Interviews with a student and As a Multimedia student, Sandra Case II: The WordPress busi- a professional web designer Kristholm developed a Word- ness professional gave valuable information about Press CMS for a business client, Daniel Pape is a WordPress WordPress in the business world. and wrote her final dissertation professional. After finishing his To my surprise, knowledge about the case. Sandra devel- education at Aarhus Business about plugins and web shops is oped a useful solution for a lo- Academy, he was employed at an important competence. So is cal organization in Aarhus. Most the company Erhvervshjemme- code. You simply have to devel- of the functionality on the web sider. The company creates web op a multimedia product that is site was added via plugins and sites for businesses. Daniel told useful to the client. the theme’s tweaking options. me about his experience as a She produced a multimedia WordPress developer. Case I: The student working solution that would work out of for a real life client the box. (Kristholm, 2016). “WordPress is not perceived as ”In my experience, there are ”hard-core” web development”, two days of headache where - “If time is a problem you Daniel stated. you have to figure out how should go for WordPress,” Probably, there is some truth in everything works, how these Sandra stated. this observation. Once a fellow plugins work, and why they developer asked him don’t behave as I want them to. That is until I understand. I - ”Is it really true, that you sell don’t know why, but at a certain WordPress solutions?” time everything just works at a - ”Yea, WordPress is super easy higher level.” (Sandra Kristholm for us and for the costumers,” quoted in Jensen 2016b). Daniel answered.

12 WORDPRESS IN THE CLASSROOM

Actually, the critique from the What you should know about fellow coder misses the target. WordPress? Sandra’s advice: For most clients even WordPress First of all theWordPress expert is considered as something, should know her clients, and • Theme: Perth was used where you really need an create useful solutions that are in her final dissertation. expert. Only a few clients are easy to use. Often this solution This theme was chosen able to develop a web site, that is a creative collage of plugins because it resembled her is to tweak a site with a little for web shops, search engine sketches for the page CSS or JavaScript. That’s why a optimization, and a multipurpo- layout. WordPress webpage is a pro- se theme that must work on a • Plugin: Page builder was duct you can sell. plethora of devices. used in order to create responsive pages. Daniel’s advice is to get tho- The WordPress professional rough knowledge of one theme. should know the plugin and It should be a theme with many theme market – and know Daniel’s Advice options for personalization enough about WordPress to be and tweaks. In Daniel’s opini- able to tweak the code, when • Familiarise yourself with on, knowing WooCommerse is the client needs something one multipurpose theme. necessary: unique. • WooCommerce is vital for webshops. ”A multimedia designer should • Obtain payment and ship- know WooCommerce. There’s ping knowledge. a big market out there for web • Suggestions towards a shops. If a multimedia designer WordPress certification. needs freelance jobs there are many customers who want a web shop.” (Daniel Pape quoted in Jensen 2016a).

13 The History of WordPress

This chapter will give you an ”WordPress was born out of a In 2004, the concept of plugins outline of the development of desire for an elegant, well-ar- was introduced. Here is a defini- WordPress. The source code chitectured personal publishing tion of plugins: that later became WordPress system built on PHP and MySQL dates back to 2001. On the web and licensed under the GPL. It ”A WordPress Plugin is a most sites are deprecated after is the official successor of b2/ program, or a set of one or two years, or so. WordPress has cafelog. WordPress is fresh soft- more functions, written in been around since 2003. ware, but its roots and devel- the PHP scripting language, opment go back to 2001. It is a that adds a specific set of The CERN scientist Sir Tim mature and stable product. We features or services to the Berners Lee invented the World hope by focusing on web stan- WordPress site, which can be Wide Web in 1989 (”The Birth dards and user experience we seamlessly integrated with of the Web”). Therefore, when can create a tool different from the site using access points WordPress was born the inter- anything else out there.” Codex: and methods provided by net was still in its expansive About WordPress the WordPress Plugin Ap- phase. It had existed for little plication Program Interface over a decade. The roots of WordPress began in 2003 when (API).” WordPress and the vision for Matt Mullenweg and Mike Little Codex: Writing a Plugin the system is defined in the forked the open source project WordPress Codex: B2 Cafelog. B2 Cafelog was an open source blogging system that dated back to 2001.

14 WORDPRESS IN THE CLASSROOM

A year later in 2005, themes The first theme was Twenty Now the recent theme is Twenty were introduced. Themes are Ten, named after the year it ap- Seventeen, launched in Decem- the skins of WordPress pages. peared. All themes sum up the ber 2016. A separate chapter is The architecture separates state of the WordPress art. Of- devoted to the development of content from presentation. The ten the themes relate to web de- this theme by the open source content is stuff like articles, velopment paradigms, such as community behind WordPress. images or videos. The presen- responsive web design. Seen in tation is the layout, behaviour, this way the WordPress themes In the following chapter, you and general look of the web sum up important design and will find the history of the Word- page. tech trends on the web. That’s Press themes. why knowing the history of From 2010 new demo themes themes is important. were introduced each year. That’s why I will follow the development of themes from 2010 to the present day.

15 The CoreThemes

The theme is one of the most In Content Management, The Since the introduction of important concepts of Word- Presentation Layer could be themes in 2005, a new theme Press. The general idea behind compared to layout or templa- has been introduced every year. a content management system tes, as we know it from pub- In many ways you can say that is a strict separation of: lications. The ”theme” is the the themes sum up the ambiti- presentation layer in WordPress ons of WordPress. The Twenty • The Content Layer and terminology. Therefore, the X themes display the WordPress • The Presentation Layer. theme defines what things look state-of-the-art. like for the visitors on a web The Content Layer consist of page and when an author pub- menus, information structure, lishes her work on the webpage. articles and multimedia produc- tions, like video, infographics and photos.

Michael Heilemann designed the first theme ”Kubrick”

16 WORDPRESS IN THE CLASSROOM

The first theme was presented The new theme and its possibi- Heilemann tells the story of the when WordPress 1.5 ”Strayhorn” lities was called ”Kubrick” and design in his blog: was released on February 17th designed by Michael Heilemann: 2005. The founder of Word- ”By some stroke of fortune this Press, Matt Mullenweg, introdu- ”Of course we wanted to show- open source theme developed ced the theming concept: case the new flexibility with a for WordPress 1.2 may be the new theme that took full advan- most widely used template ever tage of it and was aesthetically designed, having been used by ”In 1.5 we have created an pleasing to boot, so the new millions of sites and ported to incredibly flexible theme default theme for WordPress is over thirty completely different system that adapts to you the beautiful Kubrick by Michael platforms. rather than expecting you Heilemann.” (Source WordPress adapt to it. You can have News op.cit.) “Automattic made it the default your entire weblog run template with WordPress 1.5 in through a single file, just To the present day reader, 2006, a position it kept until like before, or you can li- Heilemann’s theme may appe- 2010 when it was finally reti- terally have a different temp- ar to be rough. Nevertheless, red.” http://binarybonsai.com/ late for every single different the theme became extremely kubrick/ category. It’s as much or as popular. There’s a blue header little as you want.” and blog posts beneath it. To Source: WordPress News. the right, there is a sidebar with a search function, pages, new posts, archive and more. On the other hand, many themes still follow that basic design (e.g. wordpress.org (2015) and wordpress.org (2016)).

17 The pages import header and The ”Kubrick Loop” was the first I have chosen to focus on the footer content via get header() theme. Now, a new core Word- most recent themes dating from and get footer. A PHP loop will Press theme is introduced every 2010 to 2017. Many code snip- fetch content from the MySQL year. A website owner may pets are still used in the Word- database. choose to design and code her Press themes. The web pages own theme. Nevertheless, the are divided into a ”body” (e.g. In addition, the ”Kubrick loop” WordPress core themes are the index.php). is very similar to the loops used state-of-the-art. in WordPress themes today, see index.php l. 11 - 39 (Github).

18 WORDPRESS IN THE CLASSROOM

Themes: 2010 – 2017

In this chapter you can follow Among all these files, we find Here are the themes from 2010 the development of the core a file called readme.txt. In the and on. In the quotes from the themes in WordPress from readme file, you will find a short readme-files, I have marked 2010 - 2017. In this period, the description of the theme. If new important ideas, and concepts themes were named ”Twenty” WordPress features are imple- with a bold font. followed by the year of intro- mented, the intended target duction of the theme to the group for the theme, and much WordPress-core. more.

If you know where to look, the In the theme folder, you can history of each theme is saved find a screenshot of the inten- among the theme files. Word- ded design, as it would look in Press themes are distributed a web browser. The file is called via online servers. You can screenshot.png, which is a very download the themes as zip-fi- obvious name for the file. les, and install them. The core themes are available via the Dashboard.

19 Twenty Ten

Twenty Ten and ”Gallery” categories, and What happened on the com- has an optional one-column puting stage in the year 2010? ”The 2010 theme for WordPress page template that removes the Apple introduced the iPad to is stylish, customizable, simple, sidebar.” (wordpress.org 2010) the market that year. During and readable -- make it yours this year, Samsung’s Galaxy Tab with a custom menu, header To sum up the quote from the series also began. The tabs and image, and background. Twen- readme.txt file: smartphones came to revolu- ty Ten supports six widgetized • Options to personalize tionize the ways web pages areas (two in the sidebar, four menus, header image. were used. This development in the footer) and featured • In the right sidebar, some led to new design paradigms. images (thumbnails for gallery widgets are displayed: a ca- Web sites should look good on posts and custom header ima- lendar and recent posts. screens and mobile devices. ges for posts and pages). It in- This development had a huge cludes stylesheets for print and In fact, most of the basic theme impact on WordPress in the the admin Visual Editor, special concepts apply to all themes years to come. styles for posts in the ”Asides” dating from 2010 and onwards.

20 WORDPRESS IN THE CLASSROOM

Twenty Eleven

Twenty Eleven support galore (sidebar, three Twenty Eleven also focussed on footer areas, and a Showcase customisation. Now the user ”The 2011 theme for WordPress page widget area), and a cust- was able to manipulate the is sophisticated, lightweight, om ”Ephemera” widget to dis- header image, and the back- and adaptable. Make it yours play your Aside, Link, Quote, or ground of the web page. Posts with a custom menu, header Status posts. Included are styles and pages could have special image, and background -- then for print and for the admin edi- header images. Twenty Eleven go further with available theme tor, support for featured images had styles for print too, but the options for light or dark (as custom header images on description does not mention colour scheme, custom link co- posts and pages and as large anything that targeted mobile lours, and three layout choices. images on featured ”sticky” devices. Twenty Eleven comes equipped posts), and special styles for six with a Showcase page temp- different post formats.” (word- late that transforms your front press.org 2011) page into a showcase to show off your best content, widget

21 Twenty Twelve

Twenty Twelve In 2012 the web developers ”The 2012 theme for WordPress claimed that the theme was is a fully responsive theme designed for ”… any device”. that looks great on any device. Here we begin to see the impact Features include a front-page of tablets and smartphones. template with its own widgets, On the web, more and more an optional display font, styling people entered the web pages for post formats on both index from mobile devices. Responsi- and single views, and an optio- ve web design was the answer, nal no-sidebar page template. or rather one content for many Make it yours with a custom devices. menu, header image, and background.” (wordpress.org 2012)

22 WORDPRESS IN THE CLASSROOM

Twenty Thirteen

Twenty Thirteen Twenty Thirteen seems like a back to the roots design. Word- ”The 2013 theme for WordPress Press originated from blogging, takes us back to the blog, hence returning to a blog de- featuring a full range of post sign is natural. Again, the desig- formats, each displayed beauti- ners had to make a solution ”… fully in their own unique way. that looks great on any device”. Design details abound, starting with a vibrant colour scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.” (wordpress.org 2013)

23 Twenty Fourteen

Twenty Fourteen press.org 2014) of responsive web design in 2010. In the ezine A List Apart he ”In 2014, our default theme The Twenty Fourteen theme published the article ”Respon- lets you create a responsive targeted magazines. Several sive Web Design” (and used the magazine website with a sleek, ezines and online papers used word ”responsive” 57 times!): modern design. Feature your WordPress, among them accor- favourite homepage content in ding to a 2014 blog post: The either a grid or a slider. Use New Yorker, BBC America, and the three widget areas to custo- MTV News. Source WP Beginner mize your website, and change August 10th 2014. your content’s layout with a full-width page template and In 2014 Responsive Web Design a contributor page to show off became something of a mega- your authors. Creating a ma- trend among web developers gazine website with WordPress and gurus. The web designer has never been easier.” (word- Etan Marcotte coined the concept

24 WORDPRESS IN THE CLASSROOM

”Rather than tailoring discon- By 2014 responsive web design The responsive designers envi- nected designs to each of an was the thing to do. The trend sioned a web where: ever-increasing number of web is obvious in titles such as: devices, we can treat them as • Content should be produced facets of the same experience. • ”Responsive Performance in one place and distributed We can design for an optimal With WordPress” (Dusablon to several media channels. viewing experience, but embed 2014). • The web designers used standards-based technologies • ”Responsive Design with scalable grids in order to into our designs to make them WordPress” (Casabona 2014). target ”many devices”. not only more flexible, but also • ”Responsive Design Work- • Web developers struggled more adaptive to the media flow” (Hay 2013). with ”fluid images” that that renders them. In short, we • ”The Responsive Web Design would scale to relevant sizes. need to practice responsive web Handbook” (Carney 2014). design.” (Marcotte 2010) WordPress embraced the responsive web design megatrend, and gave it tangible form in the core theme.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based “technologies into our designs to make them not only more flexible, but also more adaptive to the media that renders them. In short, we need to practice responsive web design. – Marcotte 2010

25 Twenty Fifteen

Twenty Fifteen By 2015, the pendulum swung back to the blog design again. ”Our 2015 default theme is The web pages still had to clean, blog-focused, and desig- adapt to several devices. Now ned for clarity. Twenty Fifteen’s the WordPress developers em- simple, straightforward typo- braced the mobile first concept. graphy is readable on a wide It is a design process where the variety of screen sizes, and developers begin with a focus suitable for multiple langua- on small devices, like mobile ges. We designed it using a mo- phones. Gradually the designer bile-first approach, meaning would develop solutions for your content takes centre-stage, larger screens, such as the Ma- regardless of whether your visi- cBook Pro’s Retina Screen. tors arrive by smartphone, tab- let, laptop, or desktop computer.” (wordpress.org 2015)

26 WORDPRESS IN THE CLASSROOM

Twenty Sixteen

Twenty Sixteen re.” (wordpress.org 2016) get bigger screens, say tablets - and end out with the design big ”Twenty Sixteen is a moderni- Both Twenty Fifteen and Twenty screens (Carney 2014: 26 pp., zed take on an ever-popular Sixteen mark yet another return 49 pp.) WordPress layout — the ho- to the blog and the webpage rizontal masthead with an roots. The themes are respon- The mobile first movement optional right sidebar that sive, but now Responsive Web realized, that you couldn’t works perfectly for blogs and Design is more or less a stan- just downscale the big screen websites. It has custom colour dard. It is something you are design to a small screen. Each options with beautiful default expected to do. device has special needs and colour schemes, a harmonious priorities (Hay 2013). fluid grid using a mobile-first The design process is Mobi- approach, and impeccable le first. It’s a design method polish in every detail. Twenty where the designers begin with Sixteen will make your Word- design for small devices. The Press look beautiful everywhe- following design iterations tar-

27 Twenty Seventeen

Twenty Seventeen I decided to follow the devel- more. Personalize its asym- opment of the theme from the metrical grid with a custom ”Twenty Seventeen brings your early stages on Github to the colour scheme and display your site to life with header video integration of Twenty Seventeen multimedia content with post and immersive featured images. in the core-WordPress code. The formats. Our default theme With a focus on business sites, features of the theme are sum- for 2017 works great in many it features multiple sections med up in this statement: languages, for any abilities, and on the front page as well as on any device.” (wordpress.org widgets, navigation and social ”Twenty Seventeen brings your 2017) menus, a logo, and more.” site to life with header video and immersive featured The Twenty Seventeen theme The development of Twenty Seven- images. With a focus on busi- ”focuses on business sites”. The teen began during the fall of ness sites, it features multiple big image style is used in order 2016. The development of the sections on the front page to create an immersive feeling. theme happened at the same as well as widgets, navigation As an alternative to the big ima- time as the research for this book. and social menus, a logo, and ge, a video could be launched.

28 WORDPRESS IN THE CLASSROOM

In fact, the big image / video is WordPress targets businesses the header part of a one-pager. by the big image and multime- Here you could say that the hea- dia design megatrend. Here der grew almost to full screen. WordPress makes a statement: In 2017, most web browsers and networks can manage vide- WordPress transformed from a os. The videos can be streamed blogging tool to a powerful mul- from YouTube. timedia communication channel ready for business. Doing so is very easy. The user can stream a video from YouTu- be by pasting the video’s URL in the ”Custom Settings” found in the Dashboard.

29 Themes as Visions for WordPress

We have followed the development of the core themes from 2010 to the present day. Now it is clear that each of the core themes is a sum of all Custom header, menu, the visions of the different WordPress releases. background image (2010 - the present day) Here is a summary of the visions for WordPress since the Twenty (x-year) themes were introduced:

Responsive Motto: ”Make it yours ...”. Web Design The user is able to tweak Designed for (2014) and personalize the designs. many devices (2010 - the present day) (2012, 2013)

Mobile first (2014, 2015)

Fluid grids (2014, 2016) Immersive experience Asymmetrical grid (2017) (2017)

30 WORDPRESS IN THE CLASSROOM

The seven themes named after The new theme Twenty Seven- the year they were made hig- teen is designed for business hlight many web development with immersive design and megatrends, or paradigms. state-of-the-art multimedia inte- Most of the themes are made gration. The WordPress themes for bloggers. This is natural sin- from the period 2015 to 2017 ce WordPress started as a fork all reflect the ambitions and from a blogging system. visions of the community. The themes respond to the technical A few themes target very spe- development. When tablets and cific segments, such as maga- other mobile devices became zines (2014) or business sites popular, the themes changed (2017) Twenty Seventeen’s which was reflected in the de- target group is business profes- sign megatrends, like Respon- sionals. In spite of these efforts sive Web Design, and Mobile on behalf of WordPress I guess First. that in general WordPress is perceived more as a blogging tool than a Content Manage- ment System.

In many ways, the development of the WordPress themes reflects the history of the internet – and the devices we use on the web.

31 Anthropology and Open Source

How is WordPress made? In this In order to follow the develop- The method used in this chapter, I will follow the devel- ment of a WordPress theme I dissertation is inspired by opment of the latest version of decided to use a field study. It Shein’s et al’s philosophy of WordPress, and focus on the is a research method inspired anthropology as expressed creation of the core theme. by anthropology. I became part in ”Organizational Cultu- of the community, and followed re and Leadership” Schein Each year a new WordPress the development closely. During (2010). theme is made. We have seen the field study, I participated in how the themes sum up most a series of online communities Here Schein focus on three of the creative ambitions and where WordPress is made. organizational layers: visions of the open source community behind WordPress. In classical anthropology, the • Artefacts and behaviours researcher could travel to a • Espoused values You can see the themes as a de- tribe far, far away. The anthro- • Basic assumptions monstration of what WordPress pologer would live among the is able to do now. Often themes natives, and log observations on target well-defined user groups. a daily basis about the society. In this chapter, I will follow the So was the research method of development of the most recent Margaret Mead (1901 - 1978). WordPress theme (WordPress. In 1928 she travelled to the org 2016; wordpress.org 2017; distant island Ta’u in Samoa. Hou-Sandi 2016) Here she studied the culture, and focussed on adolescent girls (Mead 1928).

32 WORDPRESS IN THE CLASSROOM

Artifacts

The artefacts layer consists of visual or organizational structu- The following table presents the res and processes. artefacts of WordPress:

”Artifacts include the visible Artifacts Note product of the group, such as Language English the architecture of its physical Architecture Digital culture environment; its language; its technology and products; its Technology Code: MySQL, PHP, HTML, CSS, artistic creations; its style, as Javascript embodied in clothing, man- Artistic Creations Themes, the logo, beauty of code ners of address, and emotional Style Business style vs. Blogger style displays; its myths and stories Myths, stories Myth: Free Open Source Software told about the organization; its Published values Philosophy of WP, Freedoms of WP published lists of values; and its observable rituals and ceremo- Rituals, Ceremonies Announcements on WP news blogs nies.” (Schein 2010 / quote: 2010 4th. ed. p. 25)

Schein’s philosophy is relevant in connection with observations interaction in online fora? from all over the world. With of the WordPress development I have realised that this is Schein we could ask: process. One could ask how possible. can you make observations of a • How are decisions made in community that does not meet Therefore, the ”architecture” for the online WordPress culture? on a geographical location, like the WordPress community is not • How are the projects mana- a studio? How can you observe a building of block. It is rather ged? hierarchies, power structure, a ”digital culture” (Creeber and • Who’s in charge? group dynamics, or social Martin, 2009) with participants

33 You could argue, that Schein’s The quote shows that Word- model reveals the more or less Press is developed in a very hidden forces governing Word- complex architecture of media. Press. In a vast international Figuring out where to suggest organisation someone has to something, or how modify code make a decision. If we follow can be a daunting task for a the development of a theme, new contributor in the open and look at the decisions, the source community. hierarchy of influence becomes visible. According to Edgar Schein, the product is an artefact. The In ”Personal Connections in the end product is the blogging / Digital Age” Nancy Baym points Content Management System to a vital challenge: WordPress. The sole purpose for the community is to devel- ”People can’t take for granted op the product. Therefore, the that the people with whom they community has a common goal. have relationships share their attitudes. Figuring out when In order to study this commu- and how to use media to com- nity, I had to create a several municate with each other is part profiles on Slack, Github, and of figuring out what it means make.wordPress.org. Then I to relate well to others.” (Baym could follow and participate in 2010 op.cit. p. 149) the proceedings of the work in the online community, and work with anthropological observations.

34 WORDPRESS IN THE CLASSROOM

Espoused Values

Schein defines espoused values Espoused Values In the WordPress organisation as declared strategies, goals, or philosophies in an organisation. Ideology Code should be open and free Philosophy Everyone can participate in making ”Such beliefs and values often a better product. WordPress is a become embodied in an ide- collective effort ology or organizational philo- Handle Conflicts WordPress is not entirely sophy, which then serves as a democratic. There is a hierarchy of guide to dealing with the uncer- developers, and designers. The lead tainty of intrinsically uncontrol- profiles have the power to make lable or difficult events.” (Schein decisions in case of conflicts. 2010: 27)

Sometimes there is a gap bet- Consequently, the researcher ideology or philosophy of the ween the espoused values and should be aware of the differen- organization, and those that are the behaviour of the organiza- ce between what: rationalizations or only aspi- tion: rations for the future.” (Schein ”... In many organizations • The company says it does. 2010: 27) espoused values that reflect the • What the company actually desired behaviour but are not does. The philosophy of WordPress is reflected in observed behavi- found in the online publication our (Argyris and Schön, 1978, According to Schein, it is impor- Our Philosophies. The first part 1996). For example, a com- tant to: gives the espoused value of the pany’s ideology may say that WordPress software from the it values people and that it has ”... Discriminate carefully point of view of the end user: high quality standards for its among those that are congruent ”Great software should work products, but its actual record with the underlying assump- with little configuration and in that regard may contradict tions that guide performan- setup. WordPress is designed what it says.” (Schein 2010: 27) ce, those that are part of the to get you up and running and

35 fully functional in no longer Online fora are among the ter if the code is five days or than five minutes.” (op.cit.) espoused values. The official five years old.” (Handbook: Best communication channels are: Practises) The software is developed with the 1% rule in mind: • WordPress Trac WordPress has well defined • WordPress SVN and Git ideas about the poetry of code. ”The number of people who • Slack Why connect poetry and code? create content on the internet • WordPress Blog Perhaps because coding can be represents approximately 1% • Development Blog said to be a creative art form. (or less) of the people actually • Mailing Lists viewing that content” (”1 % Rule The handbook: Best Practises – Internet Culture”) The quality of the code is also links to several standards for an important espoused value: the code, e.g. HTML, JavaScript, The people who give feedback PHP and CSS. These documents to WordPress may be a minori- ”WordPress is a big project with tend to be detailed to the ty. So the general rule for the thousands of contributors. It’s extreme (there is a Latin word developers is to listen to the important to follow best pra- for it:”Ad Nauseam”). A typical users, for instance at Word- ctices so that the codebase is example is this: Camps, or utterances about the consistent and readable. And product in online fora. furthermore that changes are easy to find and read, no mat-

36 WORDPRESS IN THE CLASSROOM

#selector-1, According to WordPress, this #selector-2, is correct CSS: #selector-3 { background: #fff; Here the selectors have one line colour: #000; each. Since the lines are shor- } ter, the code should be easier to read:

According to WordPress, this #selector-1, #selector-2, #selector-3 { code sucks: background: #fff; Why? Because, in this case, the colour: #000; } selectors are listed in one long line. Longer lines are harder to read: #selector-1 { background: #fff; colour: #000; }

37 The authors state that “tabs, not Both code samples would work spaces”, must make the inden- just fine in most browsers. In tations. Each selector ”should this case, WordPress simply be on its own line”. In this way, prefers a certain code style, and WordPress attempt to create the programmers are expected code that’s easier to read. Read to follow such guidelines. more about the WordPress coding standards here. Important espoused values in the WordPress organization are Coding standards are impor- these: tant among espoused values in the WordPress community. • Contribute with Code It is important, that WordPress • Contribute with Testing students learn to write not • Best Practices only code that will ”get the job • Tutorials done”. They should learn to follow coding style manuals. Writ- You could argue that it can be ing code that looks professional very hard to find what you are is an important skill in the craft looking for, for instance in the of code. If they can follow the monstrous wiki called the Co- standards of WordPress, they dex. It is easy to get lost in the could quickly adapt to other haze of information. coding standards.

38 WORDPRESS IN THE CLASSROOM

Basic Assumptions

Schein defines basic assump- The almost unconscious nature According to Schein, the basic tions as almost unconscious a of the basic assumptions will assumptions surface in conflict priori assumptions, thoughts manifest as soon as someone situations. People from all over and feelings. Often it is hard to violates them: the planet make WordPress. define the basic assumptions, because it is akin to tacit know- ”In fact, if a basic assumption Conflicts are bound to come ledge. Schein defines the basic comes to be strongly held in now and then. How does the assumptions like this: a group, members will find WordPress community cope behaviour based on any other with such conflicts? Here we ”When a solution to a problem premise inconceivable.” (Schein, have to look at the WordPress works repeatedly, it comes to 2010 op.cit.) hierarchy, or power structure. be taken for granted. What was once a hypothesis, supported only by a hunch or a value, gradually comes to be treated as a reality.” (Schein, 2010 op.cit.)

Twenty Seventeen Promo. Design: Mel Choyce et al.

39 For WordPress developers, it is In the section ”About Word- In the core-theme group He- interesting to follow the mana- Press” / Credits (4.7), the names len Hou-Sandi, David Kennedy gement of open source proje- of all developers are displayed. (Theminator @Automattic) and cts. Who is in charge? How are The lead developers (2016 / Mel Choice (Product Designer at deadlines or milestones defi- 2017) are: Automattic) played a prominent ned? Schein has a point in say- role during the development ing that conflicts are important 1. Matt Mullenweg, Automattic, of WordPress during the fall of cues towards understanding the Cofounder, Project Lead 2017. As lead developers, they hierarchy in an organisation. 2. Dion Hulse, Brisbane, had the power to decide Yay or Australia Nay on whatever suggestions The anthropological part of the 3. Andrew Ozz, Vancouver, BC the community came up with. book is based on my observa- 4. Helen Hou-Sandi, Jersey tions of the proceedings in the City, NJ WordPress core-theme developer 5. Mark Jaquith, Washington, groups during the development D.C. of the Twenty Seventeen theme 6. Andrew Nacin, Brandon, FL, from august 2016 to January USA 2017. The groups communica- ted and exchanged code and designs via Github and Slack.

Some WordPress lead pofiles. Screen dump from ”About WordPress”

40 WORDPRESS IN THE CLASSROOM

The lead role of Automattic is In order to pass into the core, As soon as Twenty Seventeen evident. In a blog post evalua- a new theme must meet the reached a certain maturity, Da- ting the WordPress 4.7 devel- standards of any WordPress vid Kennedy was the one to give opment process Jeffrey Paul theme. The theme-reviewers are the ritual announcement to the stated: important figures here. David WordPress community. Septem- Kennedy is a key-figure. His bio ber 9th, 2016 Helen Hou-Sandi ”Whomever is leading the re- on the profile pages, quotes: published a ritual blog post on lease has final decision. That’s WordPress.org: why they’re a lead. That much ”I work as a Theminator should be clear.” (Jeffrey 2016) (that’s my official title) at the ever-awesome Automattic, the Say Hello to Twenty The open source community be- company behind WordPress. Seventeen hind WordPress is ruled neither com and many other fine web by anarchy nor by democracy. products. I wrangle themes ”It’s that time again: time to The espoused value is ”one ring for WordPress.com, making build a new default theme to rule them all" (Tolkien 1954). them the best they can be and for WordPress! WordPress In the end Automattic - and ensuring everyone can find a 4.7 will launch with a brand especially Matt Mullenweg have theme they love. I’m an acces- new theme – Twenty Seven- the power to decide. sibility evangelist who loves teen. Designed by Mel Choy- the open web and open source ce (@melchoyce), Twenty During the development pro- code. I contribute to WordPress Seventeen sports a modern cess deadlines, bug scrubs and and the WordPress community.” look and will make a good alike were initiatives by Auto- https://profiles.wordpress.org/ base for any business websi- mattic. davidakennedy te or product showcase.” (Hou-Sandi, 2016)

41 Who are these lead characters: the theme’s development. Lots The code should be ”easy ... to Helen and Mel? According to of opportunities exist this year understand”. During the devel- https://profiles.wordpress.org/ for getting involved with Twenty opment, certain coders wanted helen Helen Hou-Sandi lives in Seventeen – we need your help, to speed up the process by Jersey City, NJ. and lots of it!” (make.word- pre-processors and similar. The press.org) theme code is a didactic tool for ”I’m the Director of Platform WordPress. The suggestions for Experience at 10up and a Word- The lead profiles are clearly automation were just ignored. Press Lead Developer.” defined. The influence of Auto- In such cases, we see the influ- mattic is evident, since the lead ence of Automattic. On LinkedIn, we find more designer, David Kennedy and details. Apart from working at Laurel Fulford are employees at The Automattic employee Mel Automattic, Helen is a musician. Automattic. Choice designed Twenty Seven- In the WordPress fora, Helen teen. On the WordPress profile was the one who defined dead- The rules of code syntax were pages, Mel Choice’s bio gives lines, made agendas, and often also defined: this information: she was responsible for sum- ups after meetings. ”Twenty Seventeen will also ”Boston-based UI/UX designer, use plain CSS — it won’t use WordPress core contributor, Helen introduced yet another pre-processors in the develop- craft beer fan, and unrepentant lead profile – enter the desig- ment of the theme. This will sci-fi/fantasy geek. I’m a Pro- ner: keep it simple, making the duct Designer at @Automattic.” theme easier for everyone to ”Mel [Choice] will keep an eye understand, quicker for anyone Seeing Automattic employees on all things design during the to modify and better to main- in the core themes group is creation of Twenty Seventeen. tain in the long run.” (op.cit.) hardly a surprise. Automattic is Laurel Fulford (@laurelfulford) the most important stakeholder and David Kennedy (@davida- here. kennedy) will assist her, leading

42 WORDPRESS IN THE CLASSROOM

Beginning development on Github

Twenty Seventeen was based The developers used Github Github started as a versioning on an unpublished theme. The as their mutual platform for tool for Linux developers. theme features a big image or version control during the initial Github’s platform for collective video on the front page. As we stages development. Github software development proved have seen the intended target was initiated by Linus Thorvalds valuable for many developer group is business sites. In a and the Linux developers in communities. WordPress is short statement from Septem- 2005 Source: ”10 Years of Git: among them. During the devel- ber 10th 2016 the Automattic An Interview with Git Creator Li- opment of Twenty Seventeen, employee Laurel Fulford nus Torvalds”, Linux.com. In the around 60 developers participa- @laurelfulford told, that Twenty interview, Github is defined: ted on Github. They could raise Seventeen is based on the un- issues, and suggest solutions published theme Lodestar: ”(... in 2005 ...) Linus Torvalds, to the issues. They would share ”Twenty Seventeen is a fork of the creator of Linux, took the code snippets. In addition, the a yet-to-be-launched theme, challenge into his own hands developers who owned the Git- Lodestar. Right now, the styles and disappeared over the week- hub repository could integrate in GitHub reflect that original end to emerge the following the suggested changes in the theme. The styles need to be week with Git. Today Git is used code. updated to match Twenty Se- for thousands of projects and venteen’s design here: has ushered in a new level of • Link to: Issues on the Github social coding among program- Twenty Seventeen repository https://cloudup.com/cR_df4x- mers.” (Cloer 2015) feeG” See the statement on Github

43 A typical sample of a code Or, in human readable form: • ”Better support for non-La- contribution began 19th Octo- tin font fall-backs” (Labels: ber 2016. The Swiss developer The Automattic employee Mel design, enhancement, help @Grappler suggested a solution Choice accepted the suggested wanted, revisit later) to an issue. Actually @Grappler code from the developer. In this • ”Explore Custom Colors” (La- is the nick of Ulrich Pogson. The way, Automattic listens to the bels: design, enhancement) code issue was the following: open source community. De- • ”Back to top arrow?” (Labels: in Twenty Seventeen, there was veloping Twenty Seventeen on ally, enhancement, PR ne- no support for the Urdu langu- Github seemed like a very pub- eded) age and fonts. To the post he lic affair. Nevertheless, there is • ”SVG in place of icon font” added this suggestion for Urdu no doubt that Automattic is in (Labels: enhancement, has support. charge. PR) • ”Captioned images with no @Melchoyce tried to implement This is but one typical code con- alignment get misaligned ” the code. She could not see the tribution among the 235 small (Label: bug) expected results in the ”Site and large contributions to the Language List”. Here @Grappler Twenty Seventeen theme from For a complete list, follow this responded that the Urdu trans- the WordPress community on link. lation of WordPress was ”... only Github. Counting the comments at 95% ...” which explained the to the issues gives an impressi- The top five most debated missing language. Then Mel on of the most debated impor- issues give an impression of Choice accepted the suggested tant contributions to the theme: the topics. Most of the issues code: among them had labels such as enhancement or design. A ”@melchoyce merged commit WordPress theme is much more 7362081 into WordPress:master” than code. The lead designer is an important character.

44 WORDPRESS IN THE CLASSROOM

Sorting by the label ”has pr[iro- In SEO, the speed of a web page On Slack, the developers are tiy]” suggest, what the devel- is important. This may explain able to: opers really wanted to do with the collective efforts to ”speed the design. Here the top five list up animations” and work on • Suggest enhancements is: sizing featured images. • Contribute to code The observations based on the • Conduct tests 1. ”SVG in place if icon font” collective work on the Twenty • Deploy code 2. ”Speed up all the animati- Seventeen theme on Github lead ons” to the following conclusions: On October 18th 2016 ”Themi- 3. ”Featured image sizes / size nator” David A. Kennedy made limits” • Automattic defines initiati- this ritual announcement: 4. ”Linked image in footer wid- ves, such as deadlines and ”The team behind Twenty Se- gets has underline” milestones. venteen has reached that point 5. ”Update Screenshots.png” • Automattic makes important that we’re ready to propose decisions. Twenty Seventeen as the new The complete list is here. • The community contribute default theme for WordPress in with code suggestions for 4.7. An ambitious theme focu- It is hardly a surprise, that de- enhancements and ideas. ses on a creative home page sign is the most important issue and an easy site setup experien- when the topic is a theme. Mul- After developing Twenty Seven- ce for users. timedia content is important. teen on Github, the code was Animations, videos and grap- refined on Slack. Here the party hic file formats are important. is more ”private WordPress par- For instance, the developers ty” than the very open Github wanted to work with an open development site. There were source icon theme. The commu- weekly meetings, and so-called nity suggested using SVG (i.e. bug-scrubs where errors were Scalable Vector Graphics, an corrected. In principle the pro- xml-based vector file format). ceedings were similar.

45 Like last year, with Twen- The contributions from the Kennedy suggests that the de- ty Sixteen, the development community were: velopers should test the theme: process happened on GitHub. The theme will be merged into • Triaging issues. ”While contributors have tested WordPress from the beta period • Providing code reviews. Twenty Seventeen on various on, and development will move • Testing and recommen- devices and browsers throughout to Trac. Some remaining tickets ding language specific font the development process, edge will move over to Trac at that stacks. cases still exist. Please test time.” Kennedy on make.word- • Improving the theme’s acces- Twenty Seventeen in as many press.org sibility. different environments as you • Browser and device testing. can.” On the WordPress news-pages, • Numerous bug fixes, code such announcements mark tidying and countless impro- There’s a certain ritualistic ele- important occasions. David vements. ment to such announcements. Kennedy is the self-proclaimed They mark that a certain devel- ”Theminator” of WordPress. The opment level has been reached. title suggests the lead role of David Kennedy when it comes On Github, we cannot only to core-themes. follow the code. We can also see the debate and thoughts that led to the code. From an anthropological point of view, it is interesting to follow the proceedings of the open source community. The next chapter will focus on anthropology.

46 WORDPRESS IN THE CLASSROOM

47 Conclusion: Schein, Organization and Development

With Schein (2010) we can The product WordPress is not Basic Assumptions analyse the open source part of developed in a building, factory, The basic assumptions in open WordPress as an organization. or alike. The various online fora source communities is that WordPress has its own artefacts. (Slack, Trac, and Github) are code must be free for anyone There is also espoused values artefacts too. to use and improve. In this way, and even basic assumptions. All Open Source leads to better of this became visible during Espoused Values code. This philosophy derives my anthropological study of the WordPress is open source. The from the GNU-philosophy defi- development of the standard software is free for anyone to ned by Richard Stallman et al. theme Twenty Seventeen. use. They can modify the content to whatever use they want. ”Our General Public Licenses are Artifacts Be it commercial or not. designed to make sure that you There are many artefacts in the In the online manuals, Word- have the freedom to distribute WordPress world. If you go to a Press has the espoused value: copies of free software (and WordCamp, there are t-shirts, ”listen to the users and devel- charge for them if you wish), badges, keyrings, pens, Word- opers”. With Schein (2010), one that you receive source code Press logos etc. all over the could ask: or can get it if you want it, that place. you can change the software or On webpages, you often see a ”... But do they listen to their use pieces of it in new free pro- footer message like ”Powered peers?” grams, and that you know you by WordPress”. can do these things.” Here the answer is: yes, they GPLv3, url: https://www.gnu. According to Schein (2010), the do. Nevertheless, at the end of org/licenses/gpl.txt product is an artefact. Therefo- the day the final decision about re, a WordPress blog or con- code and design is made by the tent management system is an lead profiles. They are either artefact. hired or chosen by the company behind WordPress: Automattic.

48 WORDPRESS IN THE CLASSROOM

Patents are perceived as ”evil” the BDFL of the operative system ideas from Raymond (1997): or rather a threat, as you can see Linux. Tim Berners-Lee BDFL of in the following quote: the W3, the consortium behind ”Release early. Release often. And the Word Wide Web standards. listen to your customers.” ”Finally, every program is thre- Guido van Rossum of the pro- atened constantly by software gramming language Python. In the first part of ”WordPress in patents. States should not allow the Classroom” we have follow- patents to restrict development Matt Mullenweg with Automattic ed the open source community and use of software on gene- is the equivalent of a BDFL in the during the creation of a Word- ral-purpose computers, but in WordPress hierarchy of power Press layout. Open source is not those that do, we wish to avoid and influence. a thing that falls down from the the special danger that patents sky. Real people, like the desig- applied to a free program could Open source societies are ruled ner Mel Choice, make WordPress. make it effectively proprietary. To neither by democracy, nor by prevent this, the GPL assures that crude anarchy. At the end of WordPress is a living organisati- patents cannot be used to render the day, the open source pro- on, and the anthropological point the program non-free.” [GPLv3 jects have a very strict power of view led to a deeper under- op.cit.] hierarchy. In several ways, this standing of WordPress artefacts, observation is in conflict with the espoused values and the basic The GPLv3 license does not de- storytelling of open source. assumptions. fine how the software should be developed. In practise, WordPress A hierarchy of power is evident. Part two of this series is ”Diving is developed as the collective Progress comes, because Auto- Into Themes”. Here you will learn effort of a very large international mattic and Matt Mullenweg what a theme is, and how to crea- community, with Automattic as define the deadlines, agendas, te custom WordPress themes – as the lead. The organization resem- accepts or rejects. That being a tweak of an existing theme or bles other open source communi- said, the WordPress society is how you can create a theme from ties lead by a Benevolent Dictator very open, even kind, towards scratch. for Life (BDFL). Linus Thorvalds is new ideas. Here they follow the

49 Part two: Diving Into Themes

The second part focuses on WordPress frontend development. You will learn how to create your own design - either from scratch, or tweak an existing theme by a child theme. Part two will also introduce some new trends in WordPress frontend development, such as Nodejs features and command line tools.

50 WORDPRESS IN THE CLASSROOM

51 The Theme-code

So, let us dive deep into the The following themes are a First, you’ll have to install Word- theme code. First you will get a bit more complicated. The Press. If you own a web hotel, general introduction to Word- Bootstrap scaffold theme is and a bit of luck, there might be Press themes. I assume that an implementation of a Word- a ”WordPress one click install” you have a general knowledge Press theme based on Twitter’s option. Go ahead and create about HTML, CSS and perhaps Bootstrap. It you know how one! some JavaScript. If you know to create a static Bootstrap some PHP it’s fine. However, website, you can take it to the If not you can install a local- you certainly don’t have to be next level and add content host server on your computer. an expert in PHP in order to with WordPress as the content XAMPP or MAMP are popular follow the instructions. The manager. solutions for Windows and Mac code samples from the book are users. Linux should install a available via Github: The last theme will give you LAMP server, click the link, and a little glimpse of the endless follow these instructions. • As simple as it gets - a three possibilities with Nodejs and file theme: petj-mini-theme rapid web development. We’ll As soon as your server is up • A minimum viable theme: plunge into technologies like and running, you will be able to petj-mvp. SASS stylesheet pre-proces- download and install WordPress. • A Bootstrap scaffold theme: sing, and some automation bootstrap-f16-skeleton with Gulp. When the SASS-files • Download WordPress. It is a • A Nodejs sample (features: changes, Gulp will automatically zip file. Unzip the files to a Bower, Gulp, Sass): nuit create a style.css for WordPress. folder shared by your server. • Follow these instructions in The purpose of the themes Nevertheless, before we dive order to install WordPress on petj-mvp and petj-mini-theme into the deep, let’s have a look your server. is to create a meta-theme. at the basic building blocks of That theme demonstrates how any WordPress theme. You will be able to access Word- themes work. Press by your browser as soon as it is installed.

52 WORDPRESS IN THE CLASSROOM

Theme Building Blocks

The professional WordPress developer should understand

the basic building blocks of any where the files are in a typical WordPress installation. The con- tent layser and the presentation

layer are separated in Word- Press. That much you already know. A frontend developer will

create a presentation layer for WordPress. A WordPress theme

is the presentation layer.

A theme is like a puzzle made by a mixture of ordinary HTML, and WordPress specific PHP snippets. The loop is a good example. Content is added from the database and presented on the web page.

So, where are the files we need? In a typical WordPress installati- .. pathToWordPress/wp-config/themes/yourTheme on, your find the theme files in:

It is good practice to save the theme in a folder with the same name as the theme. You can .. pathToWordPress/wp-config/themes/twentyseventeen expect to find Twenty Seven- teen in this folder:

53 Three Important Files

In web design, the stylesheet It is possible to make a Word- You can try out a theme like defines the overall layout, typo- Press theme with as little as two this from my Github repository: graphy, graphic backgrounds files. In practice, however, three petj-mini-theme. Let us have a and colours. In standard HTML files are much better. Try to closer look on the most im- or PHP the name of the styles- create a folder with files: portant files in any WordPress heet does not matter. That’s not theme. the case in a WordPress theme. • index.php (will generally Here the primary stylesheet display the main content) must have the name style.css. • style.css (here are the styles Of course you may add other and the theme name is defi- stylesheets if need be. Howe- ned in a comment) ver, style.css is the place whe- • functions.php (in this file we re WordPress will look for the add scripts, and other functi- name of the theme, the author, onality) copyright info and much more. If style.css does not exist, Word- Press will assume either that the theme is broken or that it does not exist.

54 WORDPRESS IN THE CLASSROOM

The style.css

The first file we will look at is the style.css. It is a cascading /* Theme Name: Petj Mini Theme style sheet. Stylesheets define Theme URI: http://github.com/asathoor/petj-mini-theme the presentation layer. They Author: Per Thykjaer Jensen Aythor URI: http://www.multimusen.dk may even create the UX look Description: The most minimalistic theme I've ever made. Just and feel with film like animati- for demonstration. ons and transitions. In a Word- Version: 1.0 License: GNU General Public License v3 Press theme, a stylesheet in the License URI: http://www.gnu.org/licenses/gpl-3.0.html theme’s root folder must have Text Domain: petj-mini-theme the name style.css. */ /* add your styles here */ The style.css is an ordinary CSS file, as you know it from other body { ... styles ... } web pages. However, WordPress The comment section in style.css expects the following comment in the first part of the CSS (see illustration above).

When style.css is present in the root folder of your theme Word- Press will know that the theme exists. Actually, you can see it on the Dashboard’s overview of the theme.

If you add an image called screenshot.png in the theme folder, you will be able to see the image over the theme’s name on the Dashboard.

55 Now try to add a screenshot of your design, and save the file as screenshot.png. If you look on the Dashboard / Appearance you will get an image of the design on the Dashboard’s theme section. Exactly as you can see it from core themes like Twenty Fifteen. The screenshot.png is optional, but it’s nice to get an impression of the themes on the Dashboard. You don’t have to use a screenshot since you can add a logo or any arbitrary picture that you fancy.

By now, WordPress is able to see your design on the Dash- board. However, in order to present content in a browser we need some mark-up.

56 WORDPRESS IN THE CLASSROOM

The index.php

On most web pages, the index Create an index.php file with file is the root of the file hierar- content along these lines: chy. In index.php, you write the markup used by the stylesheet and scripts. Here you have to decide on a markup that will present the content in a nice way. Therefore, the combination of the index and the style file ', ''); // write the title in h3 tags ”WordPress Loop”. Many tem- echo '

'; plate tags, or PHP objects, are the_content(); // here's the content echo "

"; available for the developer. But } for clarity, it is a good idea to } ?> start with a very basic loop.

57 Here you see a very primitive loop. The loop starts like this: if (have_posts()) { while (have_posts()) {

If there are posts or pages. Now you can add the markup for the The developer can design quite That is why we use partial files. content presentation along with elaborate loops with dates, PHP will glue the design to- the so-called ”template tags”. author names, author images gether when we include partials, The template tags will get the (gravatars), and much more. In such as headers, navigation content from the database. In the online WordPress Codex, bars, and footers. the markup, you see sample you’ll find a long list of templa- template tags, like te tags for your markup. There is a file naming convention. In header.php, we write the • the_title() - will present the Working with just one index file mark-up for the top of most pa- title of pages and posts. like this will soon prove impra- ges, and possibly some header • the_content() - will present ctical. Most web pages need navigation. In footer.php you the content, or body text, of more than one layout to fit all can save the footer information the posts along with images, content. Often we use diffe- like copyright notes, contact videos and similar content. rent designs for landing pages, information and similar. front-pages, video pages, categories and so on. Saving the loop in a separate file is a good idea. In the code below the loop is saved in loop. php. The file is included in the get_template_part(”loop”) function.

58 WORDPRESS IN THE CLASSROOM

As soon as header.php, sidebar.php and footer.php are

The files are glued together via // THE LOOP WordPress template tags, such get_template_part("loop"); // import loop.php get_sidebar(); // import sidebar.php as get_header(). The tag does get_footer(); // import footer.php exactly what it is called. get_ ?> header() will import the header. From the file index.php php file, and the file loop.php will populate the web page with content from the database.

59 header.php and footer.php

The header.php will contain all A simple header.php might the HTML header information. look like this: In the head section, you normally link to your stylesheets. But in WordPress, the best practice > is to use the enqueue in functions.php. That’s why there’s no with the JavaScript library jQu- ery. But in a theme, you have to enable jQuery. This may seem a bit cumbersome, but some > themes just do not need jQuery.

Now you may note, that this Perhaps you wonder: where is Why? Actually, the title tag is header lacks most of the im- the title tag? From SEO theory, defined in the file functions. portant SEO tags. You could of we know that the title tag is a php (See next chapter). Word- course add the SEO tags manu- very important information for Press will get the information ally to header.php, or use some the search engines, and the about the site for the title tag built in features from blogin- browser want the tag too. How- from the settings on the Dash- fo(), as shown in the ” />. at least so it seems.

60 WORDPRESS IN THE CLASSROOM

In order to get a properly for- matted title tag add these lines /** * file: functions.php to your functions.php: * purpose: Title Tag Support */

The template tags get_footer() function theme_slug_setup() { will load the file footer.php. add_theme_support('title-tag'); Moreover, get_sidebar() will } add_action('after_setup_theme', 'theme_slug_setup'); load the file sidebar.php. In footer.php, wp_footer() must be added before the body ends. wp_footer() will load footer scripts. The scripts are defined in functions.php.

Here is the content of a very simple footer.php: The footer.php could of course be more elaborate than this. Try to add some typical footer mark-up, like copyright information, phone numbers and alike above the wp_footer() function.

61 functions.php

Functitons.php is used in order The functions.php can add Functions.php can add content to add extra functionality and theme support for numerous fe- by so-called "hooks" in the tem- options to a WordPress theme. atures, add stylesheets, scripts, plate. For instance, stylesheets If a function is declared in this and even modify the way the will be added to the header via file, it is globally available on all Tiny MCE Editor behaves (That the hook wp_header(). That's pages in the theme. However, is the editor that is used on the why it is important to add the the changes and additions in Dashboard, for instance when wp_header() towards the end of functions.php will only be avai- you write a new post or page) the section in the lable for the particular theme: and much more. header.php mark-up.

"The functions file behaves like a WordPress Plugin, adding features and functionality to a WordPress site. You can use it to call functions, both PHP and built-in WordPress, and to define your own functions. You can produce the same results by adding code to a WordPress Plugin or through the Word- Press Theme functions file." From: Functions File Explained

The Tiny MCE editor on the Dashboard. Here it is used to add a new post. You can add functionality to the editor in the file functions.php.

// from: header.php // Twenty Seventeen

62 WORDPRESS IN THE CLASSROOM

The stylesheet is also added through the hook wp_head(). function my_enqueue_style() { wp_enqueue_style('core', Again, functions.php does the get_template_directory_uri() trick. Stylesheets are enqueued . '/style.css', like this: false); } add_action('wp_enqueue_scripts', JavaScripts and additional 'my_enqueue_style'); stylesheets are added after a similar manner. Here are links to a few samples of additional Have a look at the "Support for The major differences are: functionality via functions.php: title tag" code sample from the link above. Here you can see • The title tag should be acti- • Add your own mark-up: im- how the title tag is added, so vated in functions.php. From proved SEO sample. there is no need to write one in a SEO point of view it is good • Add extra buttons to the text your header.php. Remove the practise, because WordPress editor Tiny MCE. bloated code from the header will format a title tag with • Remove bloated header that will result in improved per- the site name, and the name code. formance, and as a consequen- of the landing page. • Support for title tag ce better SEO ranking. • Scripts and stylesheets The "WordPress mark-up" is not should be enqueued in func- that different from ordinary tions.php. HTML.

63 If you really want to, it is of course possible to hardcode the links to scripts and stylesheets as you would do it in HTML in your header.php. But sometimes it's nice to be able to remove unwanted scripts. If the header is hardcoded that’s not possible. You can remove an unwanted script, and even add extra scripts on custom pages:

The best practise is to add the scripts and stylesheets via the enqueue functions.

64 WORDPRESS IN THE CLASSROOM

65 Menus

In most WordPress themes, the In a WordPress theme the devel- 1. The theme must support administrator can create menus oper can define "menu areas" menu locations. The menu on the Dashboard. Often you anywhere in the mark-up. The location names are defined can choose to display a menu at information architect can create in functions.php. several locations in the design. several menus on the Dashbo- 2. The menu must be located Menus are used for navigation. ard. Each menu must then be in relevant spots, such as They are important UX cues, assigned to a "menu area". header.php or sidebar.php since they define the user's ( the positions for the menu options and choices during her WordPress will loop out the depends on the design ). interactions with the web page. menus as unordered lists

66 WORDPRESS IN THE CLASSROOM

Ad 1) Menu Location Names ( functions.php ) function register_my_menu() { register_nav_menu('sidebar-meu', First, the menu name must be __('sidebar Menu')); defined: } add_action('init', 'register_m_meu');

You can define several menus in From functions.php the same function. If you need two or more menus, then just add them to the function.

Ad 2) Add the Menu locations in the Markup As soon as the menu is defined in functions.php, it is possible to define the location, wherever 'sidebar-menu') you want the menu to appear in ); ?> the mark-up. For instance you could place a menu in sidebar. From sidebar.php php:

Sample markup generated by PHP

67 Remember to enable jQuery in the header.php. The script below is jQuery, so:

jQuery enabled

As the menu is used on all pages, footer.php is the logical play something if it’s hidden. In this case the CSS class .children A jQuery script sample is hidden. So we cannot see the ”children” in the menu. Now we have some mark-up, $( '.page_item_has_children' styles and JavaScript for a simp- ).hover is activated when the le dropdown menu. The menu mouse hover over a menu item. prepared the menu in functions. Then the .slideDown() and .sli- php. jQuery is enabled and used deUp() will animate the menu by the menu. The next step and it will look like a dropdown is activating the menu on the effect. Dashboard.

68 WORDPRESS IN THE CLASSROOM

Setting up the menu on the Dashboard When the menu areas are ready in the code, you can assign menus to the theme’s different menu-locations via the Dashbo- ard. Head for the menu section under appearance.

• Create a menu on the Dash- board. Save it. • Add the menu to the theme location. Save it.

If all's well the menu should be visible on the theme page. Normally the menu will loop out as an unordered list. Then you A menu on the Dashboard. can style the list in your CSS or by JavaScript.

69 Theme Widgetizing

Widgets are small add-ons for your web site, like calendars, meta-information, RSS-feeds, and similar. WordPress define widgets, as:

"WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for Categories, Tag cloud, Search, etc. Plugins will often add their own widgets." Codex: "WordPress Widgets" (Visited: 20170301)

In the quote above it is assumed that a widget must be pla- ced in a sidebar. Nevertheless, widget areas are not confined to Widgets on the Dashboard. Left: a list of available widgets. the sidebars at all. Widget areas Right: Widgets used in the Widget Area. may be defined anywhere you want widgets in the mark-up.

70 WORDPRESS IN THE CLASSROOM

From a semantic point of view widgets are asides in HTML5.

Like menus, the widget areas are prepared in functions.php, ** * Two Widget areas and invoked somewhere in the mark-up. Here is a functions. Hedder det bottom eller buttom fx buttom sidebar... php widget area sample: */ function petjmvp_widgets_init() { //first widget area register_sidebar( array( 'name' => 'Home right sidebar', 'id' => 'home_right_1', 'before_widget' => '

', 'after_title' => '

// second widget area register_sidebar( array( 'name' => 'Bottom Sidebar', 'id' => 'bottom_sidebar', 'before_widget' => '

', 'after_title' => '

Widget areas defined in functions.php

71 The next step is to place the

Here you see the widgets as they appear on a web page. From a child theme of Twenty Fifteen.

72 WORDPRESS IN THE CLASSROOM

Advanced Loops: Snippets and Tags

A typical WordPress page is very Here is a typical WordPress similar to a newspaper page. template: There's a header, a content section and a footer. Most information. All parts are glued together with WordPress-speci-

fic PHP snippets, the so-called ';

the_title('

', '

'); the_content(); echo "

echo '

'; // } // end while } // end if

73 The PHP snippets get_header(), The list of available template get_footer(), and get_sidebar() tags is very long. There is no will load content from the files point in going over all of them header.php, footer.php and here. Here is the link to a page sidebar.php. These files con- that will link to most of the im- tain code that will be used on portant template tags: all pages. Basically, custom pages follow the same structure • The template tags as the index.php. Here are two loop samples from The post or page content is my template demos on Github: loaded from the MySQL database via "The Loop". The loop in • A simple loop my example is very primitive. A • A more complex loop more elaborate loop would link to individual pages and each of The loop is a combination of them could have their own spe- WordPress specific PHP snippets cially crafted loops, depending and ordinary HTML. Here is a on what the developer wants sample loop, where the title will to display. For a good examp- link to the page: le, please refer to the Loop Examples on the Codex.

74 WORDPRESS IN THE CLASSROOM

• The_permalink() will echo the link to a page or post. • the_title_attribute() will give a short text explaining the page. • the_title is the actual page title from the document.

The title is stored in the MySQL table wp_posts. So the_title() will echo content of the column post_title from the database. Of course the developer could write her own PHP with SQL reads from the database. the_title() is a PHP function that does the same thing. It is easy to use such template tags. Knowing such development shortcuts is a great advantage for a web developer.

If the template contains a post. php the developer could give the post a design with a custom-made mark-up. WordPress developers can develop custom design to any page.

75 The Template Hierarchy

In WordPress, you can crea- But how do we do this in prac- Normally, the slug is a short te webpages with a tweaked tise? The template hierarchy is version of the title. Let's just design for certain pages. If you the key to custom-made pages. say that the page name is ”My want a particular design for A quick and dirty template hie- Portfolio”, and that the slug is pages in the video category you rarchy example is this: "my-portfolio". Now you can can even create special temp- create a custom-made page. If lates for individual pages and 1. Create a static page and you consult the template hie- posts. give it the title ”My Portfolio” rarchy info graphic you can see in the dashboard. that your portfolio page should In order to create a custom 2. Publish the page. be named page-my-portfolio. page you must name the files 3. Click "Screen Options" and php. Here is the mark-up for the in a certain way. Here are some make "Slug" active. page: examples: 4. Find the name of the slug somewhere next to the page • frontpage.php - will be used editor. as the front page. • Templates for: categories, videos, etc.

Hello World

get_footer(); ?>

76 WORDPRESS IN THE CLASSROOM

You could add any creative maps – and much more. saying "Hello World". That's it. mark-up or JavaScript between In order to see the actual con- the ?> and the

Tip: If you have access to the MySQL database, the slug is found in the table wp_posts. Here the slug is found in the column post_ name.

In the template hierarchy you can see, that a page must be named after this convention:

• page-SLUG.php • Hence the filename is: • page-my-portfolio.php

The template hierarchy info-graphic.

77 Partial Conclusion: The Theme Building Blocks

Now we have seen the major Whether your theme is made Now you know the basic files building blocks of a WordPress from scratch, or the theme is in any WordPress theme. If you theme. We've learned to: an elaboration on an existing need more information, the theme, it is necessary to have "Theme Handbook" is a very • Create modular pages, split knowledge about: good resource. in header.php, footer.php and content. • The theme files. • Seen that functions.php is • WordPress file naming con- the place where you add fun- ventions. ctionality. And that you can • The WordPress Loop. add functions for a particular • When to use a theme and theme here. whether a child theme is • You can create any number necessary. of custom pages: for categories, pages, posts and more.

78 WORDPRESS IN THE CLASSROOM

79 Why you need a child theme

In the classroom - and certainly situations. The child theme is Definition: in real business life - time mat- a practical solution to a serio- "A child theme is a theme ters. In some cases, you simply us problem. Often the theme that inherits the functiona- don't have enough time to crea- developers manage themes. If lity and styling of another te a full theme from scratch. you add changes to the original theme, called the parent Luckily, there are thousands code, your edition might disap- theme. Child themes are the of themes out there. Why not pear after the next automatic recommended way of modi- use a ready-made open source update. That is why the child fying an existing theme." theme as a template and just theme is the smart thing to do. Source: Codex (visited tweak the theme’s code here 20170301) and there? WordPress themes are made for tweaking. In a standard theme Well, it is possible to do so. But like Twenty Seventeen, the de- if the publishers update the veloper can add additional CSS original theme, your tweaks can on the Dashboard. A frontend vanish like smoke. The solution developer with a solid knowled- to this problem is create a child ge of CSS will be able to trans- theme. form the looks of a theme.

In the classroom, the child theme has an advantage. The code of the child theme is separated from the "parent theme". The child theme code is saved in its own folder. So a Word- Press code lecturer can follow the student's efforts in coding. Of course, WordPress did not invent child themes for teaching

80 WORDPRESS IN THE CLASSROOM

How to make a Child Theme

A child theme is a theme The first theme is easy to that will copy the styles and understand. The last one is an layout of a theme. Of course, elaboration on tw17child. These you could just edit the files days more and more developers in the directories of the origi- work with rapid prototyping via nal theme. But as soon as the Nodejs. The purpose of Nuit is original authors update the to show the path: how to build theme your additions could a Childtime with Gulp automati- vanish. The solution is relatively on, the Bower package manager simple. First, you must create a and the SASS stylesheet pre-pro- separate directory for your child cessor. These are but a few theme in the ../wp-content/ examples of the possibilities. themes/ folder. Then you add Yet, they will show enough to files like style.css, functions. get an idea about how to pro- php, and so on. gress along the path of Nodejs.

The following pages show how But let’s start with something a child theme is made. Two simple: repositories have been made on Github with sample child 1. Create a new folder in your themes in order to demonstrate WordPress directory: / the code: wp_content/themes/twenty- seventeen_child • Tw17child. 2. Create the file style.css • Nuit - a child theme with Nodejs.

81 The file style.css will create /* the child theme in WordPress. Theme Name: Twenty Seventeen Child The style.css must begin with a Theme URI: https://github.com/asathoor/tw17child Description: Twenty Seventeen Child Theme comment section, like this: Author: Per Thykjær Jensen Author URI: http://multimusen.dk Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: custom-header, custom-menu-style Text Domain: tw17child */

/** * Your styles follow here ... */

The theme should also register function my_theme_enqueue_styles() { the stylesheet. This is accomplished in the file functions. wp_enqueue_style('parent-style', get_template_directory_uri() php where the child theme . '/style.css'); enqueues the stylesheets from both the "parent theme" and the wp_enwueue_style('child-style', get_stylesheet_directory_uri() child theme. Here is a sample . '/style.css', from functions.php: array($parent_style), wp_get_theme()->get('Version') ); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

82 WORDPRESS IN THE CLASSROOM

It is very important that you Now you can make changes to load the child-style after the pa- any of the files from the parent Refresh the page in your brow- rent theme's styles. Otherwise, theme. Doing so is simple. If ser. Now your creative greeting the original theme may overrule you want to change e.g. hea- to the world should be visible in your CSS rules. The function der.php copy the file from the the footer of all the pages. The my_theme_enqueue_style() will parent theme folder to the child strange looking _e( 'your- add stylesheets to your head-se- theme folder. Make whatever Text' ) will echo the ”Hello ction via wp_enqueue_style() changes you need and save World” string, and it is a prepa- functions. The add_action( your work. ration for internationalization ’wp-enqueue_scripts’ , ’your_ of your theme. If you upload function’) will execute the fun- A simple proof of concept is to your theme to the WordPress ction. Then WordPress will add copy footer.php from the parent repositories, the international a link to the stylesheets in the theme to your child theme translators – or Polyglotters as head section of your mark-up. folder. Then add something like the translators are called in the this somewhere in footer.php: WordPress community - will be What you see here really is all it able to translate your work. takes to make a child theme!

Go to your Dashboard and

find the theme in Appearance. Now you can activate the child theme. If everything is ok, the website will look exactly like a Twenty Seventeen clone.

83 How to activate jQuery

WordPress is skipped with a version of jQuery. The Twenty Seventeen theme does not link to jQuery by default. If you want to use jQuery in your code copy header.php to your child theme folder. Add these lines before the wp_head() hook:

WordPress will load the CSS and such recommendations, you can add the script via a link to a CDN or to the jquery.js file in footer.php. In this book, however, I will follow the standards of WordPress. In order to test whether jQuery is up and running, you can try to add this script to a copy of footer.php in your child theme folder:

84 WORDPRESS IN THE CLASSROOM

Again – refresh the page in the Now we enter the creative You can also create custom browser. If you get an alert box playground of the multimedia pages in a child theme. Again, then jQuery runs as intended. designer... you have to use the file na- Now the possibilities are unlimi- ming conventions from the info ted, that is within the scope of Before we leave the subject of graphic template hierarchy. You jQuery of course, now you are child themes, one last word on do it in exactly the same way as able to: files and folders. Sometimes the custom pages in a theme. If files are found in sub-folders in it's a page, just name the page • Add jQueryui (but remember the parent theme. If you edit a or post after the slug, e.g.: to enqueue an extra style- file in a subfolder, then save the page-SLUG.php. sheet). file in a similar folder structure • Work with jQuery plugins. in the child theme’s folder. • Sample: page-pers-galleri. • Add external animation effect php libraries such as Wagerfield's One more thing: don't copy all Parallaxjs or Artlogic's Spri- files from the parent theme to Now you are able to create a tely. the child theme. Just add the fi- child theme. You can add the les you need to edit. Then your custom design to any page or code is easier to maintain. post. You are able to add all the scripts, styles, and libraries you fancy.

85 Nodejs and WordPress

By now, you should have an Let’s see how you can download • Open a terminal window in impression of the basic topics code from Github and then use WordPress/wp-config/themes on themes and how to tweak a few Nodejs tools. • Fork this repository: https:// them for your own purposes. github.com/asathoor/nuit. The following will give you an First you need to clone the • A fork is a copy of the origi- introduction to a few advanced theme from Github. Github is nal theme. You can modify production tools that can speed a version control repository. the code, as you like. up your work and automate So far, we have seen how the • Clone the code from the certain tasks. development of the Twenty fork: Seventeen theme began on Git- The first toolbox is Nodejs. hub. Before you can use Github, git clone https://github.com/ Nodejs is a very popular set of you’ll have to install it on your YOUR-USER-NAME-HERE/nuit tools among professional web system: developers. • Github is available for Linux, Now Github will download the Here is a very quick introduc- Mac, and Windows from this files and you have a local copy tion to rapid WordPress pro- uri. to work with. Git will download totyping with Nodejs. In the • In order to work with Github, the files from the directory nuit. chapter you will find a case you have to create a user In the directory, you find the Nodejs where is used as a rapid profile. theme files ready for your crea- development tool in a Twenty • Repositories are created on tive work. Seventeen child theme. But the the Github webpage. So now, you have the code from principles also apply to themes • If you never used Github, try Github. The next step is to made from scratch. Nodejs and this tutorial. install Nodejs (if you have it you Github are deeply integrated in don’t need to install it again). numerous ways. As soon as Github is installed, But what is Nodejs? you're ready to begin. Let's get some code:

86 WORDPRESS IN THE CLASSROOM

"Node.js is a JavaScript runtime These files contain information Linux, and possibly Mac, users built on Chrome's V8 JavaScript about necessary software pac- may have to add: engine. Node.js uses an kages from the Nodejs reposito- event-driven, non-blocking I/O ries. Now it is possible to install sudo npm install -g bower model that makes it lightweight all the Nodejs dependencies in and efficient. Node.js' package nuit. First, run this command: As soon as Bower is ready, you ecosystem, npm, is the largest can install the packages: ecosystem of open source libra- npm install ries in the world." (quote from bower install nodejs.org 20170307) The command will download all the Nodejs dependencies for Wait while the packages down- Install Nodejs - follow the in- the theme. Save downloaded fi- load. That's all we have to do structions from this uri: Down- les in the folder node_modules. in order to initiate the folder. load Nodejs. You may open the folder, and Now the child theme is ready see what's in there. One of the for your additions. Save the In order to test the install, try: folders is Gulp. That’s fine. We dependencies in the directories nodejs -v shall use Gulp later on! node_modules and bower_com- Npm will not download the ponents. If the terminal returns so- libraries managed by Bower. But mething like v4.2.6 then it's is Bower installed? Try: fine. Nodejs is up and running. bower -v After Nodejs is installed, you can open the directory nuit. In If the terminal returns so- the directory, you find these mething like 1.8.0 then Bower scripts: is present. If not, then you have to install Bower: • package.json • bower.json npm install -g bower

87 During your theme development (...) Bower may be used to search scroll_animation https://github.com/metalabdesign/scroll_ and install libraries, such as animation.git jquery-animation https://github.com/yivo/jquery-animation.git Bootstrap, Easeljs and similar. animations.css https://github.com/rod/animations.css.git If you don't know the name of animationframe https://github.com/donlion/animationFrame.git animationFrame https://github.com/kof/animationFrame.git a relevant library, you can even animation.AtomicES https://github.com/AtomicES/animation.git try a bower search animation, (...) which will result in a list where the word ”animation” occurs. Here are a few selected samples from the search:

Perhaps jquery-animation is install jquery-animation --save interesting? Use Bower to install the library:

Remember the --save option. It bower install https://github.com/user/repo.git --save will save the library to bower. json. In this way, the libraries you need will always be available. Bower integrates with Github. You can add any repository from Github:

88 WORDPRESS IN THE CLASSROOM

You can see that Bower is a wp_enqueue_style('animate-css', powerful tool. Especially if get_stylesheet_directory_uri() you're using JavaScript libraries . '/bower_components/animate.css/animate.min.css', '1.0' such as Bootstrap or alike. Bow- ); er not only installs Bootstrap. Bower will also fetch dependencies. So if you install Bootstrap, then Bower will add the depen- dency jQuery too!

Now you have the libraries and the next step is to link to the relevant scripts and stylesheets in your theme code. How do we link them? In functions.php by enqueue of course.

Actually, in this case Bower has installed the css library animate.css. Your code should link to the directory. Have a look at the function.php and see how it’s done:

89 GULP and SASS

Nodejs has several options for automation. A good example $font-stack: Helvetica, sans-serif; $primary-color: #333; is the stylesheet pre-processor SASS. You write the SASS code body { font: 100% $font-stack; in an ordinary editor and save color: $primary-color; the file with a .scss extension. } SASS looks like CSS but there are differences. For instance you can use variables:

After compiling this code with body { font: 100% Helvetica, sans-serif; sass mySass.scss:myStyle.css, color: #333; you'd get CSS like this: }

SASS is pretty much like working SASS can watch a directory, and More than often, you need to with a programming language. compile to .css whenever you invoke several programs. Soon Variables and features such as save your changes in a .scss you have to start a series of including partials, mixins, doing file: programs that will compile to math, and similar functions in the css, check for JavaScript errors stylesheet are among the many sass --watch input.scss:output. and much more. Luckily Nodejs advanced features of SASS. It is css. is able to execute such tasks easy to translate a style tile with automatically. colours, gradients and typography to SASS variables and functions. That's the real value of SASS in rapid prototyping.

90 WORDPRESS IN THE CLASSROOM

Let’s have a look at GULP automation.

First check if GULP is installed with this terminal command: gulp -v. If the answer is "[08:10:56] CLI version 1.2.1" or similar GULP is installed. If not you should install GULP via the Nodejs package manager: npm install gulp --save.

Since we want to work with SASS you also need the gulp- sass module: npm install gulp-sass --save.

GULP will need a file called gulpfile.js. In this file, all your 'use strict'; GULP tasks are defined. A samp- var gulp = require('gulp'); le gulpfile.js is found in the Nuit var sass = require('gulp-sass'); theme. Here are the contents of gulpfile.js. The first lines of the gulpfile will use the gulp and gulp-sass packages:

91 Then two SASS related functions gulp.task('sass', function() { are created. The first function return gulp.src('.sass/**/*.scss') will log errors: .pip(sass().on('error', sass.logError)) .pipe(gulp.dest('.')); });

The second function compiles gulp.task('sass:watch', function() { .scss to .css whenever changes gulp.watch('./sass/**/*.scss', ['sass']); are made in a file: });

The last line of the gulpfile will gulp.task('default', ['sass', 'sass:watch']); execute the functions:

When the gulpfile.js is ready, you can run GULP in the folder gulp with a single command in the terminal window:

92 WORDPRESS IN THE CLASSROOM

Now Gulp will listen for changes, compile when changes occur, and even alert if there are errors in your code. Have a look at the sample gulpfile.js in the Nuit theme, here. Now let’s try to see what happens if there are errors in your code:

1. Open a terminal window in ../themes/nuit 2. Run the command gulp and see what happens 3. Edit the file and add some error in the stylesheet ../ scss/style.scss 4. Save the .scss file.

If you don’t know how to write faulty CSS, here’s an excellent error:

.blue { Error in plugin 'sass' As soon as style.scss is saved Message: sass/style.scss an error message is shown: Error: Invalid CSS after ".blue {":expected "}", was "" on line 34 of sass/style.scss >> .blue { ------^

[08:39:23] Finished 'sass' after 41 ms

93 The error position is pointed out. See line 34, correct the error you made on purpose. Save the file again. Now SASS is [08:46:13] Starting 'sass'... [08:46:13] Finished 'sass' after 19 ms satisfied with your debugging efforts, and an error free stylesheet is compiled to style.css: If you feel that, the Nodejs has GULP will echo messages such a steep learning curve it is not Tip: Linux and Windows as these in the terminal. If strange. Now some features are have joined at least some changes are saved in a .scss file not well documented. Working forces in the command line the message 'sass:watch' will be in terminal windows can be environment. From Windows shown. Should the script con- daunting too. For some reason 10.x you can run Bash tain errors there will be an error the OS designers have chosen commands in the Windows message. SASS will only accept to hide the terminal deep down terminal. Just type bash in valid code. In this case SASS is in a swamp of applications. the terminal Window. Then used, but Nodejs has JavaScript In fact, most operative systems you can run Linux terminal linting tools and other valida- do what they can in order to commands on Windows. tors. Such tests and lintings will hide the tool we need. improve the code quality. GULP is a combination of debugging • The Mac user can press cmd Even some Linux desktop and compiling. + shift + U. This will open a environments have their own terminal. favourite hiding place for the Developing a WordPress theme • If the developer is on a terminal. In most cases, you can or plugin with GULP will impro- Windows OS she must press try alt + F2 and enter terminal ve your code and speed up the the Win_right button and in the search bar that will ap- development process, as your type cmd. This opens up a pear. At least this will work on code will be valid. terminal window. Gnome, KDE, and XFCE.

94 WORDPRESS IN THE CLASSROOM

Perhaps you could create a For those who climb the moun- cheat sheet with terminal com- tain to the peak of Nodejs mands. The cheat sheet should automation then the rewards give ideas about: are great. You can install libraries with all dependencies with • How to navigate a theme a single Bower command. Files folder. and images will compile, minify, • How to run commands such and save automatically. as: npm install, bower install angular --save or gulp. • How to edit configuration files. • Learning how to create a file may be a nice-to-have, e.g.: touch index.php style.css functions.php (Bash).

95 Innovations in WordPress 4.7.x

The last part of this book is But what is the REST API? An API "JSON (JavaScript Object a little glimpse of the future. is shorthand for "Application Notation) is a lightweight There are many innovations in Programming Interface". In ge- data-interchange format. WordPress 4.7. In this chapter, neral, an API is a toolbox. The It is easy for humans to I will introduce two of the most WordPress handbook gives this read and write. It is easy important innovations in Word- definition: for machines to parse and Press: generate. It is based on "The WordPress REST API provi- a subset of the JavaScript • The REST API des API endpoints for WordPress Programming Language, • The wp_cli data types that allow developers Standard ECMA-262 3rd to interact with sites remotely Edition - December 1999. The REST API is a powerful by sending and receiving JSON JSON is a text format that innovation that will transform (JavaScript Object Notation) is completely language WordPress from a web techno- objects." REST API Handbook independent but uses logy to a much broader usage. visited: 20170309. conventions that are familiar From now on, you can run to programmers of the WordPress like a service. You So WordPress is able to send C-family of languages, can use WordPress as a backend Json strings via certain uri end- including C, C++, C#, Java, for almost any coding language pointss. What is JSON? JavaScript, Perl, Python, such as Python, JavaScript or and many others. These Ruby. properties make JSON an ideal data-interchange language."

From: Introducing Json

96 WORDPRESS IN THE CLASSROOM

JSON is a data exchange format. With the REST API the themes Most programming languages and even the Dashboard may are able to handle JSON-obje- be omitted. WordPress is able cts. For example, a smartphone to exchange data with other app written in Lua / Corona machines: SDK would be able to fetch Json from your WordPress site. So "Content endpoints provide ma- WordPress does not have to live chine-readable external access in browsers any more. The API to your WordPress site with a is very powerful, and the devel- clear, standards-driven interfa- oper can write apps with featu- ce, paving the way for new and res like: innovative methods of interac- ting with sites through plugins, • Create new pages or posts. themes, apps, and beyond." • Read pages, posts, categori- (From the Dashboard "Welcome es, tags, etc. to WordPress 4.7.3"). • Update pages or posts. • Delete content.

97 How to use the REST API

The WordPress REST API is a Now the screen should be filled The wp-json part tells Word- series of uri endpoints. The with JSON. It is a very primitive Press that a JSON object is endpoints will return a JSON proof of concept: WordPress wanted. The Jquery will append object. A JSON object is a string, may be used as a service for HTML to the

. A list with links to catego- string notation is similar to content of a website returns as ry pages will be added. arrays or even multidimensi- a Json string. And most pro- onal arrays. In programming, gramming languages are able to You can even use a similar code most languages are able to integrate with Json objects. on a plain HTML page. What handle the JSON objects. They Now let's try to add REST API to happens? You get a list of ca- are integrated in JavaScript. a web page by JavaScript. tegories too! If you want posts, PHP, Python, Ruby and many pages or whatever – just use the more will either treat the JSON Add this script to a custom relevant URL-endpoints. string as an object or be able to WordPress category page. Save transform the JSON-string to an the page as category-SLUG. Again, we have opened yet array. php. A sample category page is another box of Pandora. Now found in the file category-twen- you’re able to develop Word- Here are a few endpoints: ty-seventeen.php. The page Press themes without any PHP follow the standards of the at all. You can develop your • /wp/v2/posts Twenty Seventeen theme. But design with front-end methods, • /wp/v2/categories the jQuery will fetch the JSON as in HTML and JavaScript. • /wp/v2/pages (see code on the right). The REST API will probably be Here is a real life example, en- Note that the code point to: one of the most important plat- ter this in a terminal: .../wp-json/wp/v2/... forms for WordPress frontend developers in future.

curl -i http://multimusen.dk/ wp-json/wp/v2/posts

98 WORDPRESS IN THE CLASSROOM

( function($) {

$.ajax({ url: "/wp-json/wp/v2/categories",

// The name of the callback parameter jsonp: "callback",

// Tell jQuery we're expecting JSON dataType: "json",

// Tell that we want JSON data: { format: "json" },

success: function(response) { console.log(response); // server response

$('#REST')append('

for(var i=0; i

//console.log(response[i].title.rendered); $('#REST').append('

' + response[i].name + '

}

$('#REST').append('

'); // /ul

}); // code end

} )(jQuery); // jquery end

99 Introduction to the wp-cli

In connection with the presenta- to make sure that its future is Towards the end of 2016 Matt tion of WordPress 4.7 the foun- certain for everyone who builds Mullenweg announced, that der Matt Mullenweg announced on it, and that the major con- WordPress would support Daniel that the organization would tributors to the project, chiefly Bachhuber's open source proje- support "... the future of the Daniel Bachhuber, are able to ct wp-cli. The wp-cli Handbook wp_cli" (Mullenweg, 2016). So, work on it even more in the is available on make.wordpress. what on earth is the wp_cli? coming year." Matt Mullenweg org (visited 20170310). "Supporting the Future of wp- cli". So it is possible to create a The wp_cli is defined as: script that will create pre-defi- "WP-CLI is a set of com- With Wp-cli you can: ned dummy content on the fly. mand-line tools for mana- From users to pages and posts. ging WordPress." • Install plugins From: wp-cli.org • Install themes The script could be written in • Scaffold child themes any programming language • Scaffold pages and posts that is able to execute operative In fact, the wp_cli is a very • Create content: pages, posts system commands. The wp-cli handy tool. The last part of this • … and more ... may be invoked via PHP, Python, chapter is devoted to the usage Ruby or Bash. The wp-cli script of it. Normally the WordPress Normally the average developer is a road to very rapid devel- installation of add-ons is mana- does not need such a tool. If opment. With a few lines of ged on the Dashboard. Wp-cli you are a developer that has to code, you can install a series of gives the developer the ability mock up many WordPress sites, standard plugins, themes and to create entire WordPress sites the wp_cli is a powerful Swiss add whatever dummy content from the command line: army knife. In fact, the wp-cli you need. will act as if it was part of your "wp-cli is a command-line inter- operative system. For instance face that every major user of you can write scripts in Bash WordPress deploys and trusts. or Python in order to execute As we head into 2017, I wanted routine or redundant tasks.

100 WORDPRESS IN THE CLASSROOM

Here is a sample. This bash script will store plugins names wp plugin install $i wp plugin activate $i in an array. The for loop will ite- rate the plugin names. In these lines, each plugin is installed and activated:

With a few lines of code, you can install a series of plugins. After the script, they are ready for use.

1. Create a file with this content (e.g. nano myPluginIn- #!/bin/bash # By: Per Thykjaer Jensen staller.sh): # Purpose: install plugins 2. Then change the file permis- # License: GPLv3 sions to executable: chmod #Plugins array a+x myPluginInstaller.sh. myPlugins=( 3. Execute the script ./myPlug- "akishemet" "jetpack" inInstaller.sh. "wordpress-seo" )

#install and activate plugins for i in "${myPlugins[@]}" Tip: do: If you work in Windows 10.x wp plugin install $i wp plugin activate $i use Bash in the terminal. done

101 A simple script like this demonstrates why wp-cli is such a powerful tool. Only a few lines of code are needed in order to scaffold web pages with all the standard plugins you want. With a few additions, you can make scripts that are more advanced:

• Install your multipurpose theme. • Add whatever plugins you need. • Create users on the fly. • Scaffold custom pages, posts, and alike from the template hierarchy.

102 WORDPRESS IN THE CLASSROOM

Install wp-cli

The wp-cli will run on multiple If everything is ok, then the ter- operative systems. Depending minal responselooks like this: on your system you can follow, these install instructions: PHP binary: /user/bin/php7.0 PHP version: 7.0.15.0ubuntu0.16.10.4 • Install wp-cli on Windows php.ini used: /etc/php/7.0/cli/php.ini • Install wp-cli on Mac / Linux WP-CLI root dir: phar://wp-cli.phar WP-CLI packages dir: WP-CLI global config: On *NIX systems the installation WP-CLI project config: is relatively simple. The follow- WP-CLI version: 1.1.0 ing method is found in the wp- cli Handbook:

1. Create a directory, and Here are a few snippets with • Activate plugins: download the files there: typical wp_cli commands: wp plugin activate akismet curl -O https://raw.githubu- sercontent.com/wp-cli/builds/ • Get WordPress builds: The best way to learn so- gh-pages/phar/wp-cli.phar wp core download --version=- mething about wp-cli is this: 2. Make the files executable. nightly --force wp –help 3. Rename wp-cli.phar to wp wp post list and move it to a directory in • Create or delete pages and the $PATH: posts: sudo mv wp-cli.phar /usr/lo- wp post create cal/bin/wp • Create or delete users: 4. Test the installation: wp user delete wp --info • Install or delete a plugin: wp plugin install akismet

103 The command will open a help wp post list \ page. If the topic is plugins try: --field=ID|xargs \ -I % wp post get % \ wp --help plugins. This com- --field=post_content|sed \ mand will open a help page -ne 's;.*(https\?g\|png\|gif\)\).*;\1;gp' about plugins. In the wp-cli Handbook there are more than 100 command snippets. Here is a more complex bash sample from the handbook:

According to the handbook this Sometimes a plugin does not command will: have the same install slug as it's own name. Yoast is a good • List all post IDs example. First try to search • Get the content Yoast related stuff: • Display image URL-s (the sed wp plugin search yoast will pipe the image links)

104 WORDPRESS IN THE CLASSROOM

The wp-cli returns a list of Yoast and press enter. After a mo- related plugins. If you're lucky, ment, the plugins are installed. one of them might be what you seek for. Perhaps you’d expect The wp-cli is an excellent tool that wp plugin install yoast will for rapid web site development. install Yoast. In order to install That is for those who love to the Yoast SEO with wp-cli you get the job done fast and of should type: course in a terminal. wordpress-seo

105 Final Words

This book began with an intro- In the end, the purpose of this duction to the history and ma- book is not to tell everything nagement of WordPress as an about WordPress frontend. If organization. Part two ”Diving the odd link should guide you Into Themes” is an introduction to even better code and tutorials, to the art of developing a Word- much has been accomplished. Press front-end. Even if you find a cool and ready-made open source theme for WordPress, you should be able to tweak it via a child theme.

106 WORDPRESS IN THE CLASSROOM

107 References

Asadi, Aaron, and et al. 2017. WordPress for Beginners (New for 2017). The Learn IT Series.

Baym, Nancy K. 2010. Personal Connections in the Digital Age. Polity.

Bonnevier, Frank M. 2014. Learning from Libraries That Use WordPress: Content Management System Best Practises and Case Studies. The Library Quarterly.

Carney, Rob (ed.). 2014. The Responsive Web Design Handbook. Future Publishing Limited.

Casabona, Joe. 2014. Responsive Design with WordPress. New Riders.

Cloer, Jennifer. 2015. 10 Years of Git: An Interview with Git Creator Linus Torvalds. Linux.com.

Creeber, Glen, and Royston Martin. 2009. Digital Culture. McGraw Hill.

Duckett, Jon. 2014. JavaScript and Jquery. Wiley.

Dusablon, Brian. 2014. Responsive Performance With WordPress: Launch a Basic, yet Costumizable, Content Management System with These Steps. TD Magazine 2014:10.

Hay, Stephen. 2013. Responsive Design Workflow. New Riders.

Hou-Sandi, Helen. 2016. Say Hello to Twenty Seventeen. make.wordpress.org.

Jeffrey, Paul. 2016. Dev Chat Summary: December 21st (4.7.1 Week 2) - 4.7 Retrospective. make.wordpress.org.

Jensen, Per Thykjær. 2016a. Interview med Daniel Pape (Daniel-20161115.mp3). The Research and Innovation department, Business Academy Aarhus.

108 WORDPRESS IN THE CLASSROOM

———. 2016b. Interview med Sandra Anastasia N. Kristholm (Sandra_20161111.mp3). The Research and Innovation department, Business Academy Aarhus.

Kierkegaard, Søren. 1848. The Point of View for My Work as an Author (1848).

Kristholm, Sandra Anastasia N. 2016. Aarhus “I et øjeblik”. Dissertation, Business Academy Aarhus, Multimedia Ddesign.

Marcotte, Ethan. 2010. Responsive Web Design. A List Apart.

Mead, Margaret. 1928. Coming of Age in Samoa - A Psychological Study of Primitive Youth for We- stern Civilisation. William Morrow & Company.

Mullenweg, Matt. 2016. Supporting the Future of Wp-Cli. make.wordpress.org.

Raymond, Eric S. 1997. The Cathedral and the Bazaar.

Schein, Edgar H. 2010. Organizational Culture and Leadership. Jossey-Bass - A Wiley Imprint.

Tolkien, J.R.R. 1954. The Lord of the Rings. George Allen & Unwin (UK). wordpress.org. 2010. Twenty Ten. wordpress.org. ———. 2011. Twenty Eleven. wordpress.org. ———. 2012. Twenty Twelve. wordpress.org. ———. 2013. Twenty Thirteen. wordpress.org. ———. 2014. Twenty Fourteen. wordpress.org. ———. 2015. Twenty Fifteen. wordpress.org. ———. 2016. Twenty Sixteen. wordpress.org. ———. 2017. Twenty Seventeen. wordpress.org.

109 110