Author: Per Thykjaer Jensen

  • Workshop: JavaScript Assignment

    Here are some ideas, you might use:

  • Mindmap: Eight Sticks

    Whiteboard mindmap: Eight Sticks
    Whiteboard mindmap: Eight Sticks
  • REST API tutorial

    Source: WordPress REST API Tutorial  from LearnWebCode.

  • REST API

    REST API
    An answer from the REST API. It’s a Json object, that was send to a Linux terminal via curl ( it’s a tool to transfer data from or to a server).

    “WordPress 4.7 comes with REST API endpoints for posts, comments, terms, users, meta, and settings.” (Source: WordPress’ text about the API).

    One of the great news in WordPress 4.7 is the REST API. Now it is possible to exchange data in the form of Json Objects.

    Let’s try out the REST API in a simple terminal. In bash try this:

    curl http://research-wordpress.dk/wp-json/wp/v2/categories

    Perhaps the result above seems like gibberish to the uninitiated. But if we use a Json parser online, you’ll get a human readable result.

    The Json object unfolded. You can see one category.
    The Json object unfolded. You can see one category.

    If you’re eyes are in top condition, you can see:

    • name: “Book Review”
    • description: “As a researcher I read a lot of books … etc.”

    So a standard WordPress installation is able to exchange data between a behemoth of platforms, such as apps on mobile devices, and any kind of code that’s able to process Json, such as:

    • Ajax
    • Python
    • Bash
    • PHP
    • Ruby
    • Nodejs
    • etc.

    The possibilities are virtually endless. REST API marks a huge step foreward.

    Read more: REST API Reference.

  • 24 Hours On WordPress

    The last 24 hours or more I have been on WordPress. A template part has been made. In the evening, and night I participated in WordPress Slack. Today the categories were organized in the entire site.

    The Aquarelle template part

    In Web Developer 258:50 pp. there’s a lovely tutorial on a watercolorlike animation for a web page. I just had to try it out. Here’s the result ( as allways it’s a rough draft, but it was fun to make it ). Functions.php needed a few additional scripts. The partial held the markup, and the javascript. Now the Aquarelle partial may be used on a costum page or similar.

    The theme_review meeting

    In the evening I participated in two Slack sessions. The first one was the theme review group. Nine or ten active developers participated during the one hour long session. A question was asked:

    • Should we allow iframes?

    A heated debate followed. There were utterances, somewhat like:

    “I hate iframes …”

    More than often there was no argumentation at all, at least from a philosophical point of view. Hating a phenomena is a pathetic argument. Literally speaking! After a while I could see, that these theme reviewers had a point.

    Who knows what kind of stuff such iframes link to?

    The iframe is not allowed if you want to publish a WordPress theme on the WP repos. So the debate was perhaps just for the hell of it. In the end there was a referendum. Should WP whitelist some urls, like YouTube. The answer was no.

    I entered the group because a point on the agenda was a mentor solution for new theme reviewers.

    Training

    An hour later or so the training group met. The climate was very cosy. The participants suggested new learning modules. Talked about the intended target group: not students but teachers.

    I suggested a module on Coding Best Practises. And guess what. I became the first editor. One of the sysops made me editor on the spot. And so the module will come to life wery soon.

    Later on one of the group officials helped med to activate an editor account. Now I can edit the text(s). And even look foreward to give some help here and there, if I can. I felt at home and among human beings. So training was a very good experience.

  • Installing WordPress in a Second Semester Class

    Differences between operative systems is a major challenge when you teach WordPress. Experiences from a real life classroom session in a second semester multimedia designer class.

    Yesterday I introduced WP to a second semester class. So these notes are based on my own reflections after the session.

    First a strategic overview:

    The class used XAMPP as a local development environment during their first semester. 32 students were present. 22 had a Windows PC.  10 students or so used a Mac. That is: as far as I remember.

    I had a PC, but decided to demonstrate the installation on a system with Windows 10.

    In XAMPP a database was created. We used PhpMyAdmin. All created a database named wordpress with utf8. So far so good.

    Then the class downloaded the latest version of WordPress, from WordPress.org > latest. That was the easy part. No problems whatsoever here. They unzipped the files to ../htdocs/wordpress/..

    In theory they had to edit these lines in wp-config.php:

    /** MySQL database username */
    define('DB_USER', 'root');
    
    /** MySQL database password */
    define('DB_PASSWORD', ' ');
    
    /** MySQL hostname */
    define('DB_HOST', 'localhost');
    
    /** Database Charset to use in creating database tables. */
    define('DB_CHARSET', 'utf8');

    Here the differences between the operative systems proved a major challenge.

    • Most students had WP up and running with no problems.
    • Around five Windows users had problems with XAMPP. The cure was: reinstall.
    Mac challenges

    So far so good. But the Macs was the real problem. They had to use a password. But: what is the password?

    A workaround was used: give a password to root. That was a bad idea. Don’t do it at home, please. XAMPP worked all right, but now the users could not enter PhpMyAdmin from the administration panel!

    A better workaround was this: create a new user for the database wordpress and grant all privileges to that user.

    Didactic challenge

    As a teacher it’s allways a challenge, when 1/3 of a class has to do one type of work – while 2/3 of the class is waiting. To this add some 5-6 students, where XAMPP crashed half a year ago or so. While these studens were fighting with XAMPP-related challenges the ones with WordPress up and running grew impatient.

    That’s natural I guess.

    Introducing WordPress features

    Most of the systems were up and running around 10:30. However a few still had problems, so they were advised follow introductions to posts, pages, menus, themes etc. from 10:30 – 11:30.

    During that session, they also tried to personalize the theme with costumize.

    Themes and child themes

    After lunch I gave an introduction to themes. First I introduced the “sandwich” concept of:

    I had developed a minimum viable skeleton theme with as little markup as I felt possible. So I demonstrated:

    During this part of the class I downloaded the zip from git and instlled the petj-mvp theme on the fly from a downloaded zip.

    I hope that this demo gave an idea of the inner workings of a theme. But skeleton themes are ugly. The last part was an introduction to Twenty Seventeen.

    We made a child theme. As far as I could see most of the students had no problems making a child theme of Twenty Seventeen. I demonstrated how to change the footer.php in the child theme:

    • Copy footer.php to the child theme folder.
    • Add a h1 tag (or similar) and add a message.
    The last session

    So most of the class had WordPress up and running. But still 4-5 students had problems. I decided to focus on these students, and let the rest of the class prepare for the next day .. that is somewhere else.

    I had to go through the computers, and look at strange XAMPP problems. Some installations refused to work even though everything seemed fine.

    As a workaround these students installed WordPress via Bitnami. This installation works like a charm. But I knew that the files are saved in another location.

    C:\xampp\apps\wordpress\htdocs

    On a Mac the files are in a similar folder, but of course in:

    /Applications/XAMPP/apps/wordpress/htdocs/

    Again the Mac users had to unlock the folders in order to upload images etc.

    14:20 Leaving the classroom

    The last student had his WordPress up and running @14:20. So much for the famous “Five minutes install”. WordPress is not the problem here. It’s XAMPP and the differences between the operative systems. Here’s a huge stumbling block for WordPress teachers.

    As a teacher I need a local development platform, where WordPress just works out of the box on any platform – be it Mac, Windows or Linux.

  • Working on a minimal viable theme

    Minimum viable WordPress theme (petj-mvp)
    Minimum viable WordPress theme (petj-mvp)

    The concept “minimal viable production” is a common concept in agile projects. I’m working on a minimal viable WordPress theme. The rules are:

    • The theme must validate according to WordPress Standards.
    • The design is not important.

    So it’s all about function then. You can follow the development of the theme here (petj-mvp).

    The design is inspired by the first WordPress theme: Kubrick.

  • Theme Development Process

    The theme development process
    The theme development process (Do you want a bigger picture? Click on the image.)
    Process notes:
    How to make and debug a WordPress theme
    Toolbox

    Automation (Nodejs)

    Nodejs is a must in rapid development. Here are some essential tools.

    SASS

    Much template work is tweaking the CSS. A stylesheet preprocessor is a nice-to-have. Here’s how to use SASS:

    sass --watch input.scss:style.css
    Bower

    Bower is a nice package manager.  Install libraries, e.g.:

    bower install jquery bootstrap jquery-ui --save

    The libraries are saved in the bower_components directory. The –save option will save dependencies in bower.json. If you download a repo without dependencies, they’re installed in this way:

    bower install

    Yep, that’s it.

    Bower is installed via npm (part of Nodejs):

    npm install -g bower

    Version Control

    Github

    Here’s a link to (my work-in-progress) theme:

    Github is made for group work. Code may be forked into branches, and versions merged to a mutual production.

    Projects will give the group a nice kanban for work organization. Users may rise Issues.

    Ready for Upload

    When all is ready you can upload the theme for review on WordPress. Delete whatever files and directories that you don’t need.

    Hidden files and directories must be removed.

    If you use minfied scripts and css a non-minified version should be available. The files in the WordPress theme pool should be in clear text.

    Then you can try to upload the theme for review.

  • Challenge: Write a Theme

    One thing is to review themes. Another is to get it through the needle’s eye. Here’s the quest.

    • Hack a theme that’ll meet all requirements and WordPress standards.
    • The aim of the theme is to teach how to write a theme.

    In this way the theme will be usefull not only for me, but for anyone who wants to learn how to make a theme.

    Development environment

    The core-WordPress themes don’t use preprocessors and similar. They want a clear and easy to read code. The aim of the core themes is to teach the art of theming.

    I’m working on a LAMP server. So the code and methods will be easy to follow for any *NIX user. But we should not forget Windows users. Here’s a challenge. I don’t use Windows any more.

    Nodejs

    However in the business rapid development is often used. My approach is to develop a theme with Nodejs tools, such as:

    • Bower (package manager)
    • Sass (CSS preprocessor)
    • Gulp (compiling, automatic test)
    • Github will play a major role for versioning.
    WordPress standards

    The theme is an attempt to follow WordPress coding standards. Theme review tools, such as debugger plugins and code sniffers will be used. So will the theme debugger plugin. And of course the debugging features in WordPress must be activated. Edit these lines in wp-config.php:

     // Enable WP_DEBUG mode
    define( 'WP_DEBUG', true );
    
    // Enable Debug logging to the /wp-content/debug.log file
    define( 'WP_DEBUG_LOG', true );
    
    // Disable display of errors and warnings 
    define( 'WP_DEBUG_DISPLAY', false );
    @ini_set( 'display_errors', 0 );
    
    // Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
    define( 'SCRIPT_DEBUG', true );
    Brainstorm

    Multimedia designers tend to love animations. I’ll make a theme with many creative features, such as:

    • Animated splash frontpage (demonstrate costum pages).
    • CSS and JavaScript libraries (demonstrate how to implement external scripts and libraries). Such as:
      • Jquery, Jquery-ui (styling GUI elements).
      • Bootstrap (responsive grid, and menu)
      • Tweenjs or perhaps Wagerfield’s cool Parallax library

    Something along these lines. You know: floating goblins, fairies, and creatures out of norse legends of old. That kind of stuff.

  • Review: WordPress for Beginners (New for 2017)

    If your’re running a WordPress blog or similar “WordPress for Beginners” is a source of inspiration and knowledge. For web developers: this book is not for you!

    Focus on Beginners

    Perhaps I should have known: “… for beginners” may just mean “for beginners”. I bought the bookazine. At home it was opened. Not much about code here. Most chapters focus on the GUI usage.

    What the web developer may find

    Towards the end however things get more interesting, that is: for the web developers. There’s a chapter about the WP-CLI . And some tutorials. Anyone with a little knowledge of CSS would be able to follow the tutorials.

    The bookazine’s focus on the end user makes sense. This book is what most people need in order to get up and running with any WordPress site – especially if you run a blog or similar on wordpress.com.

    There’s good advice on how to choose plugins and themes. Twenty different themes are reviewed. Theme customization is introduced.

    Here things get fun: fading buttons, hovering slide out menus, and so on.

    The strength of the book is a clear focus on the WordPress beginner. The text does what it says.

    Recommendation

     

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close