Multimusen.dk

Category: Themes

Working on or understanding themes.

Methods: anthropology, coding, reflective practise.

  • WordPress Playground: Set up with Plugins and Themes

    WordPress Playground: Set up with Plugins and Themes

    WordPress Playground is made for experiments. However, plugins are not easy to install. If you want to install and use plugins you have to change the URL and add:

    &networking=yes.

    Try it

    If you have local storage you will be asked if you want to continue working with the local files. Just answer yes.

    https://playground.wordpress.net/?storage=device&networking=yes

    Playground is experimental. Some plugins will not run here. So you have to experiment. For example Kadence Blocks work like a charm. Jetpack did not.

  • The Björk Theme

    The Björk Theme

    The Björk theme is very popular for portfolios among web devolopers. However, the frontpage is a challenge. Normally you would be able to change the frontpage by asigning a certain page as your frontpage.

    The Björk theme excerpt from https://andersnoren.se/introducing-bjork/

    However in Björk you must edit the frontpage template. You must open the frontpage template in the theme editor and then you can edit all the frontpage the infomations. The long lorem ipsum texts should be edited to something about you. All links and buttons should be changed too. In fact you must add some content to the template

    To be honest and From a strictly technical point of view I don’t like this mixture of the presentation layer with the content layer in the Björk theme. But as Yoda might have said:

    “Possible it is.“

    Yeah, but as the same philosopher Yoda also said:

    “The dark side I sense.“

    Even though you can create content in the theme it is not the best practice. Template files should only use the template blocks, such as headers, loops, next-posts etc.

    Apart from these whims of the Björk author – it’s is a nice blog based theme for anyone who needs a portfolio.

  • Use a SASS in WordPress Themes

    A SASS mixin can save you from writing hundreds of CSS-lines in your WordPress theme. One of the great features of SASS is mixins. They resemble a function in ordinary programming. You create a series of commands, and pass certain variables. Then you don’t have to write the same code over and over again.

    The _S (Underscores) theme is a wonderful tool, if you want to create a WordPress theme from scratch. Here SASS really shines, because you can create a mixin, and pass whatever numbers or settings that are needed. It’s as easy as this:

    // tablets: iPads and friends
@media only screen and (max-width: 768px) {
    @include responsive(700px,400px,300px,1.1em); 
}

// mobile
@media only screen and (max-width: 598px) {
    @include responsive(500px,500px,500px,20px); 
}

    And so on – in this way you can define the width of any HTML element. The SASS code for this particular mixin is:

    @mixin responsive(
    $page,
    $primary,
    $aside,
    $siteTitle
 ) {

#page {
 background-color: #fff;
 max-width: $page;
 margin: auto;
 }
 
 // "wrapper" content container 
 #content {
 @include flexbox(); // prefixes for browsers
 display: flex;
 flex-wrap: wrap;
 }
 
 // content
 #primary {
 width: $primary;
 max-width: 100%;
 }
 
 // sidebar, widgets
 aside {
 width: $aside;
 max-width: 100%;
 }
 
 // site title size
 .site-title {
 a {
 font-size: $siteTitle; 
 } 
 }
 
 // images and media
 img, 
 iframe, 
 .entry-footer, 
 .entry-content, 
 .entry-header,
 .entry-footer, 
 .site-branding,
 .site.title,
 #mast-head {
 max-width: 100%; 
 }
} // end responsive mixin

    Perhaps you feel that the mixin code is long. But on the other hand, you only have to write this code once. From now on you can pass variables to the responsive design in just one line:

    .someClass { @include responsive(980px,500px,420px); }

    Q.E.D.

  • Learning WordPress Themes from Scratch

    Here’s the challenge for the class:

    • Create a repo on Github.
    • Create a WordPress theme from scratch.

    During the six hour lesson files, such as:

    • functions.php
    • header.php
    • footer.php
    • style.css
    • index.php

    was presented one by one. The students had to create their own version of a WordPress theme on Github.

    As far as I could see there were five – six groupings in the class.Some students were able to create a WordPress theme, like:

    Some groups, however, found that the task was too difficult. I asked them, what was difficult, and got very honest feedback, like:

    • “We don’t understand the purpose of PHP.”
    • “Why can’t I see my localhost site online?”

    On Github I could see, that some students didn’t understand the concept of includes. So there was some truth in the utterance: “We don’t know what PHP is“. In fact the problem was deeper than that.

    Some 2nd semester students did not understand the basic structure of a HTML document. It was clear that at least some of them did not know which tags belonged to the head section, or the body section.

    When I reviewed the code from some groups, it was clear, that thy didn’t understand the concept of includes, like get_header() og get_footer(). The idea of partials was not understood, so the basic contruction of the WordPress theme was not understood at all.

    One or two students tried to develop the theme on say the desktop folder. Of course this approach wasn’t a success. I tried to help them moving the files to /wp-content/themes/

    I asked the students to share code and work together on Github. They used Gitkraken as a GUI. Some groups could do it. Other groups did not get the concept at all. However most groups were able to share and edit code in a previous lesson.

    Before you attempt to develop WordPress themes in the classroom make sure that the students have a basic understanding of concepts such as the structure of a HTML document.

    Also I have an eery feeling, that at least some students need a better understanding of:

    • Operative systems.
    • The difference between own files and files online.
    • Where the files are (the concept of directories)
    • That the ../htdocs folder has other functions than say the Desktop on a localhost
    • What Xampp, Mamp or similar does.

    Now here is the real didactic challenge. If the problem is a poor understanding of operative systems, localhost servers and PHP that’s where we have to put the efforts in the classroom.

    So it was agreed, that the class should be divided in two large groups:

    • Basic code understanding
    • WP theme developers

  • Mindmap: Eight Sticks

    Whiteboard mindmap: Eight Sticks
    Whiteboard mindmap: Eight Sticks

  • 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.

  • Didactic Template

    Maat - a Bootstrap theme with wp-navwalker
    Maat – a Bootstrap theme with wp-navwalker. It’s still a very rough prototype. By now the code validates according to WordPress standards.

    I’m working on a didactic template with these features:

    • Bootstrap (for responsive web design)
    • Wp-navwalker (for the menu)

    During the development I’ve used SASS and Bower for rapid prototyping. The theme was validated by the theme check plugin.

  • phpcs for WordPress

    PHP Code sniffer is a code validator. In the tutorial: “Using PHP CodeSniffer With WordPress: Installing and Using the WordPress Rules” Tom McFarlin explains how to install the codesniffer with WordPress-specific sniffs.

    Then Tom McFarlin gives a demo on a phpcs on the plugin Hello Dolly:


    phpcs --standard=WordPress hello-dolly

    I have installed the sniffer following the suggestions in McFarlin’s tutorial on a LAMP server with WordPress. So the tool’s in the box.

  • Gallery: WordPress Themes

    The WordPress themes from 2010 – 2017. Copies of the screenshot.png file in the theme folder.

    Twenty Ten
    Twenty Eleven
    Twnty Twelve
    Twenty Thirteen
    Twenty Fourteen
    Twenty Fifteen
    Twenty Sixteen
    Twenty Seventeen

  • Research WordPress – the Official Launch

    What You Should Know About WordPress launced at the EAAA.dk
    What You Should Know About WordPress launced at the EAAA.dk

    So the project is launched on our webpage ( http://eaaa.dk ). For now the text is only available in danish. A very short resume:

    The business needs people with solid WordPress knowledge. Many businesses use WordPress as their prime sales or communication channel – what kind of knowledge do you need  in order to meet tomorrow’s challenges with WordPress?

  • How to Create a Beautiful WP Site (tutorial, video)

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