Add a Google font to a WordPress theme
The easiest way to use a Google font in a self-hosted WordPress theme is probably to use a CDN link. That is: you don’t download and host the fonts yourself, but you use a “CDN link” to a Google server…
Category Web development
How to deal with the WordPress administration toolbar with CSS
When a user is logged in to WordPress, the administration toolbar will appear above the site content. When the user logs out, the admin bar will disappear. In the HTML markup the admin bar is placed just below the main…
Backup WordPress MySQL database with phpMyAdmin
This is just a quick “go-to” reference guide for backing up your WordPress database as described in the “WordPress Codex”, the online manual for WordPress.
underscores.me markup explained
Underscores is a great framework for building WordPress themes. Since the HTML markup can be a little confusing at start, I have made a simple go-to explanation for future projects. The markup might change in the future, but the basic markup has stayed the same for the last years. This markup is from April 2018. Here is a visual illustration of the markup: Here is the same markup in code: So what is going on here? Let’s break it down a little… The body contains the #page DIV which acts as a container for the whole shebang. Inside the #page the site is divided into three parts: .site-header, .site-content and .site-footer. .site-content is basically everything that goes between the header and the footer. In other words; the content. Inside the .site-content DIV we have #primary and #secondary, which are basically just a way of separating the widgets section from the main content. Inside #primary we have another div called #main. I am not completely sure why we have this div yet, but it might function as a way to add padding, margin or max-width to a centered content. Inside #main we get the single post/artigle/page, the post-navigation (previous/next post) and the comments area each in their respectiv divs.