Multimusen.dk

Category: What You Should Know

What you should know is the black box category. Whatever is here, probably would be better off somewhere else.

  • Student Projects and WordPress

    Twenty Seventeen
    Twenty Seventeen – the code in the core themes is poetry. Unfortunately that is not the case in many freemium-premium solutions. Why?
    Why is the code in socalled professinal themes so hard to understand? Multimedia students often face problems if they use freemium-premium solutions.

    Right now the multimedia students at Business Academy Aarhus work on their exam projects. During the project they’ll create an advanced multimedia solution for a real life client, that must be “powered by WorPress”.

    Since they are creative multimedia users, they want to change a given theme either by CSS tweaks, or more advanced code, such as custom pages in PHP via the template hierarchy.

    A few students have tried to create themes from scratch or very basic skeleton themes. They get the cocalled “1000 hour” headstart from Underscores.me.

    In this way they had free hands for their creative visions.

    Other students go for the popular freemium-premium themes with lots of built in drag and drop options. Such themes are very popular in the business, so working with them is a fine preparation for the life and art of the web designer. But if you think that this choice is cheating or a short cut, think again.

    Indeed, some of these self-proclaimed “professional” themes play nasty tricks on the web developer. Basic WordPress functionality, such as custom CSS or other standard WordPress functionality is blocked by some themes!

    Often the code in “fremium-premium” solutions is quite hard to understand. Not because the code is more “professional”, but because the developers want to protect whatever they think is a “business secret”. The business model is obvious – if you can’t figure out how to use the “free” theme you have to pay … and that’s what I’d call a booby trap!

    Perhaps the beginner should avoid such themes. You may think that you buy support, but in the real world you just pay for more problems! And yeah, you could pay in order to solve these problems too …

    So the multimedia designers who used the “professional” themes had to work very hard in order to create the solutions with the tweaks they envisioned.

    Often what seem to be the “easy way” or “professional solution” isn’t. Like at all. Most web developers would be better off with a standard no fuzzz theme like the core WordPress Theme Twenty Seventeen, or one of the free themes in the WordPress repositories.

    If you want to design posts and pages via drag and drop, perhaps it’s the best choice is to use a standard theme with a good clean and easy readable code, and then add something like Siteorigin’s Pagebuilder to the theme.

    At the end of the day you could say that it’s a daunting task to create a WordPress theme from scratch. But when I see the efforts the developers face when fighting with the freemium-premium solutions I have to conclude, that these themes is no shortcut at all.

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

  • The WordPress Research Project now on EAviden.dk

    Eaviden.dk - the page about my project
    Eaviden.dk – the page about my project

    Eaviden.dk has published a page about my research project “What You Should know about WordPress”. Eaviden is a web portal presenting the research and innovation activities on the Danish business academies.

    On the page you find a description of the project, and links to my research blog (you’re reading it now). The text is in danish.

    Here is the link to my project:

    http://www.eaviden.dk/project/det-skal-du-vide-om-wordpress/

  • Orbisius Child Theme Creator

    Orbisius is a no-nonsense child theme creator plugin that’s super easy to use. Just follow the instructions in the video.

    Child Theme Creator by Orbisius

     

  • Project Status 2016 – 2017

    Project Status: 2016 – 2017

    Project and impact
    Project and impact

    From 10:00 I will present the research project in auditorium A @ Sønderhøj 30, Viby, Denmark.

    The presentation is the formal end of the research project. I will present the upcoming e-book “WordPress in the Classroom” – and how the research project helped writing the book.

    Cover: WordPress in the Classroom
    Cover: WordPress in the Classroom

  • Proofreading

    Just received the manuscript from the code proof reader. Now the e-book is on it’s way to the english proof reader.

    The game’s afoot.

  • Twenty Fifteen Child Theme

    Twenty Fifteen Child Theme
    Twenty Fifteen Child Theme

    So I’ve implemented a child theme for this research blog. For a while I’ve used Twenty Fifteen, because it’s a blog-oriented theme. But I have to hack some costum pages for the research project. I need pages that map the project, and pages that’ll sum up the proceedings of the present blog.

    That’s a job for a child theme!

    The code for the child theme is available on Github.

  • A Rough for the Frontpage

    My new e-book “Teaching WordPress” is coming soon. The copy is almost ready for deploy. So today I’ve made some sketches for the frontpage. We’ll give these ideas to a designer.

     

  • 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

  • Observations: 2nd Semester Multimedia Design

    Observations from a 2nd semeter class working on a magazine case. The class installed WordPress on localhosts a week before. During this class the students were introduced to themes and child themes. In the weeks to come the class will tweak a theme to suit a visual identity.

    Issues for students on Mac-laptops

    Before the teacher entered a student had a frustating problem. She had installed WordPress on a localhost environment via MAMP. But in the class she could not see the WP (WordPress) website. There was a message, like:

    “No database connection.”

    But it worked all right last week, she said. Noone really could say why such things happen. But I tried to help her. Checked the usual suspects, such as the settings in content.php, file and folder permissions. That kind of stuff. Nothing worked.

    In the end she had to reinstall MAMP. She reinstalled MAMP, only to find more or less the same error. For some reason MAMP used port 8888 ( http://localhost:8888 ). The wordpress install seemed ok.

    I suspected a missing database, but the link to PhpMyAdmin was missing in the MAMP admin panel. Actually she had to enter the link to:

    http://localhost:8888/phpmyadmin

    This url gave her access to the database.

    Here we could see, that the wordpress database was missing. She created the database, and edited the wp-config.php file. Now she was able to reinstall WP again.

    But then she could not upload pictures. Neither could 3 – 5 other students. I told them to give read-write permissions to the wp-content folder.

    A typical usecase

    This is a typical usecase, when we teach WordPress to students. The students on Windows systems don’t have such challenges ( apart from the occational blue screen of death, and related matters ). But the students on Mac systems, they’re in for a harder time.

    During a break the interaction teacher told me, that such problems are common. A Mac is cool, but the security issues with file and folder permissions are stumbling blocks.

    Roughly one third of the class used Mac laptops. So we know that they will experience issues.

    The Magazine Case

    Before the class the students worked on a magazine case. They had to imitate the style and fonts of several printed magazines. The HTML and CSS had to validate. And the teacher gave feed back to the groups.

    The teacher asked the groups where they were in this process. Most of the groups had worked with logos, and the importance of visual identity was discussed. He (re)introduced an interesting tool:

    “Use identifont to check whether your font is ok. Check whether your WP is still running, after the install last time.”

    And told, that some fonts may cost money, but there are also free fonts available. E.g. you don’t have to pay for a font like Copperplate, since it’s a standard font in most browsers. Anyway: use fallbacks.

    Theme and Child Theme

    Then the teacher gave an introduction to themes. Twenty Seventeen was installed on the fly. The class was introduced to the costumize tools in the theme.

    The students experimented with additional CSS. Most of them were able to hack small tweaks here. Some of them used developer toolbars, or the inspect element in Chrome or Firefox.

    It seemed to me that the styling was a challenge. How are the elements styled? Some used the inspect element tool in the browsers. But often their CSS-rules were “overruled” by the theme settings. So they had to find tweaks.

    They also tried to change the background and header images. Again some students experienced write-permission problems. Yes, they used a Mac-laptop. And the cure was the same as above.

    During a short break the teacher told me, that such issues are common, when the students show up with a Mac. It’s hard for them to figure out, where things are, and stuff like folder permissions are big issues here.

    The class was ready for the next level: child themes. The teacher wanted to demonstrate what a child theme is. He asked everybody to close the laptop lid, and listen. Unfortunately that was the moment when the projector decided to crash. There was nothing but a blue screen.

    The teacher returned to the old virtues, and drew the file structure on the wall. Perhaps that was a lucky punch, because the file structure became very clear in that wat. Then he explained:

    • the content of style.css
    • how to add the stylesheet from the “mother theme” in functions.php.

    The class worked for a while. Then it was time for lunch. Everyone walked to the canteen.

    Thanks to

  • Project Impact

    How many times have my Tweeps and blog posts been read? It is impossible to know such a thing. On the other hand, it is possible to follow statistics on Twitter and on my web server.

    Here’s a quick and dirty status over the media impact of the research project “What You Should Know About WordPress”. If we add the tweeps and the visitors at my website, there are around 9171 visits or reads.

    It’s easy to follow the statistics on Twitter. On research-wordpress.dk I have counted visitors. After all: there’s a good chance that they are human.

    Projekt impact    
    Tweets: 7 (only relevant tweeps counted) 1365 impressions
    Website: 89 posts 7806 visitors
    MDU 60 persons
    Slack ( not counted )
    make.wordpress.org ( not counted )

  • WordPress in Weird Places: Content Management for Node Using REST


    ( K. Adam White slides and original page here )

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