Warning: Use of undefined constant WPRBLVERSION - assumed 'WPRBLVERSION' (this will throw an Error in a future version of PHP) in /customers/0/2/c/multimusen.dk/httpd.www/wp-content/plugins/wp-render-blogroll-links/WP-Render-Blogroll.php on line 19
WordPress – Multimusen
Som webudvikler har man ofte brug for at kunne eksperimentere med sagerne i en sandkasse, hvor andre ikke har adgang. Her er en vejledning i at sætte WordPress op på din localhost – det vil sige en WordPress, der virker på netværket derhjemme.
Sådan sætter du WordPress op på din localhost (1:2)Sådan sætter du WordPress op på din localhost (2:2)
Læs mere om WordPress i min bog “WordPress in the Classroom” (2017). Her får du blandt andet historien om, hvordan WordPress themes har set ud gennem tiderne – og du kan lære mere om, hvordan man selv kan bygge et theme.
Opsætning af databasen i Windows I videoen er password = root og bruger = root; men sådan er det ikke på et Windows system. Her er bruger = root og passwordet er en tom linje.
NB: Denne tutorial er udviklet til et forløb på Multimediedesigneruddannelsen, hvor klasserne blandt andet lærer at sætte et WordPress-udviklingsmiljø op på en localhost.
In this tutorial you will learn how to set up WordPress in a sandbox. That is WordPress in a test environment. Just on your own PC, so that you can experiment and test if everything is ok.
Set up WordPress on localhost
In order to run WordPress needs a server environment with PHP and a MySQL database. Here you have several options. Whether you prefer one or the other does not matter much. Here are a few options, choose one of them:
Linux: set up a LAMP server on your local machine.
After installing the localhost, you can install WordPress on your local machine. Follow these instructions. If you prefer to follow a video tutorial, here is one:
Install test content
Of course you could write a lot of test content, just to see how every HTML element, any image or whatever works. A better alternative is this: use the WordPress test unit. Here you download test pages, posts and images – and then you will be able to inspect whether everything works as it should.
The Theme Unit Test consist of a xml file with posts, pages, images and so on. You can import them via Tools > Import. You may have to add a plugin in order to import.
In fact this option is very practical. You can import and export content from a localhost to your online WordPress when everything is ready. But first you should try out some themes, and see how they behave with the test content.
In the menu section assign the test menu to the menu location. Now you are ready to see your theme in action.
Try out a few themes
As soon as you have the test content you might want to test a few themes. In the Dashboard go to Themes > Appearance and search for new themes. There are thousands of themes out there, so try to find something that looks like the design you want. In my opinion you should go for an open source theme. Not because it’s “free”, but because these themes have a code-base that’s more easy to change. Often the so-called professional themes have a horrible code, and it is meant to be so. If the user is not confused, how could they continue to sell more solutions?
Plugins
When you have found a good theme, you should add a few plugins. Whatever you choose is a matter of taste, but I’d recommend these as a starting point:
Jetpack (performance, tweaks, speed and more)
Akismet (fight spam)
A page builder, like:
Elementor
Page Builder (Site Origin)
For SEO
Yoast
The SEO Framework
Security
WP Limit Login Attempts
Webshop
WooCommerce (very popular solution)
There are thousands of plugins for galleries, portfolios, shops, images and so on.
Create Content
As soon as these things are done, you are ready to create the actual content. When we develop web solutions it is best practise to work with real content, rather than the boring Lorem Ipsum.
In order to avoid confusion do this:
Delete the content from the Theme Unit Test
Create real content:
Pages for static content, such as “About Us”
Posts for the blog posts
Add widgets
Remember to use Categories and Tags. It will improve your SEO and give more power to your menus.
When you create the content, try out the page builder!
From localhost to the Web
When your content is ready for production, you will have to export the content and the theme. The theme is separated from the content – that’s why you must do the export in two steps. But first you’ll have to install WordPress on a server.
Most web hotels have a “WordPress in one Click” option. Just create the WordPress site. Give it a name. And you’re ready to go. The next steps are:
Install the theme (in the same way as you did on the local machine).
Install all the plugins you want to use.
As soon as this is ready, you go to your local machine. Enter the Dashboard > Tools > Export – and export all content.
Now you go to your online version of WordPress and choose import. Remember to check the box with import media files. If you do so the local images will be copied to the online media library.
Now your site is online, and ready for whatever purposes you or your clients may have.
Trouble Shooting
Sometimes things work fine, but at other times we run into troubled waters. In this section I have listed some common problems, we see again and again in the multimedia classes.
Problem: you try to install a theme or a plugin, and get a prompt where you are asked to use FTP.
Solution: Check the folder permissions. Make sure, that the server has write and execute permissions in the folders.
Problem: I get a database connection error during WordPress install on MAMP.
Solution: In MAMP the password and user is ‘root’.
Problem: I get a database connection error on XAMPP.
Solution: On Windows the user is root and the password is blank. On Mac the user and password is root.
Problem: XAMPP crashes.
Solution: Use MAMP …
In my experience XAMPP has a steep learning curve, and often errors occur out of the blue. So if you work on either Mac or Windows I’d recommend MAMP. And if you’re on a Linux system go for a real LAMP stack, e.g. on Ubuntu try this LAMP solution.
Here’s a short and handy tutorial about the Siteorigin PageBuilder. In Pagebuilder each row will get an id. Then each row will get an id in the Pagebuilder settings.
Now the video does not tell this, but I guess that Pagebuilder will set bookmarks on the webpage, as in:
<h2 id="row-about-us">About us ...</h2>
In the WordPress menu the internal links will be used. The menu will link to #row-about-us, and Pagebuilder will create markup somewhat like in this sample:
<a href="#row-about-us">About us</a>
Now onepagers tend to scroll in a cool slow way. You can do this via some JavaScript. I guess there’s a plugin for it too.
Then click enter, and you’ll get a zip with all the theme files in a folder.
Install the theme via the Dashboard in WordPress.
Now you have a very basic theme. There is a menu, but it’s horrible, or so it seems. In fact you’ve got a dropdown menu – so that’s kind of a head start. And that’s the idea of Underscores. From here it’s a matter of styling, but where are the files we need?
Style.css
Have a look in the style.css file. Here your theme name and author is defined. Add your name and the URI to the website, or even better to your Github repository. Since you’re working on a home hacked theme, you may do stupid things. So enter your credentials e.g. (see my sample style.css here):
Theme Name: Abracadabra
Theme URI: https://github.com/asathoor/underscores-and-sass
Author: Per Thykjaer Jensen and Underscores.me
Author URI: https://multimusen.dk
Description: The 2017/18 theme for WordPress based on Underscores. Features: SASS, Gulp, Bower, Font Awesome, jQuery.
Version: 0.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petj-17
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive, two-columns, custom-header-image
Sidebar – Content or Content – Sidebar
Since Michael Heileman designed the Kubrick theme in 2004 the standard blog design became something like a sandwhich with a header and footer as the buns. Between the header and footer you’d see some content and a sidebar. So the blog designer could choose between content-sidebar or sidebar-content. Of course you don’t have to do this, but the standard WordPress design still use the magick formula: header.php, footer.php, sidebar.php – and a filename. If there are no other files, WordPress will use index.php as a fallback. All of these files are found among the Underscores files.
Underscores made it easy to create a basic design, with content and a sidebar to the right or left of the content.
Layouts
In the folder layouts you’ll find two files with the CSS for the basic layout:
content-sidebar.css
sidebar-content.css
So if you want a classic blog layout, you can copy-paste the content of the one you fancy to style.css. Here is the CSS from content-sidebar.css:
Of course these styles are not responsive at all. You still have to refine your design with media queries and so on. Since the CSS in media queries are quite redundant a SASS mixin may come in handy (see this sample).
@media screen and (min-width: 100px) and (max-width: 760px) {
@include responsive(); // sidebar to bottom
body {
font-size: 123%;
}
}
Custom Header Image
The Underscores theme does not support a custom header image. Many themes give you this option, so how do you implement the feature? First you have to add this to the functions.php file:
From now on the user is able to choose his own header images from the media. This short sample also demonstrates, that you can edit any file in the theme.
Custom Pages
In WordPress custom pages have to follow a certain naming convention. You can see the system in the template hierarchy.
The template hierarchy found on the WordPress Codex.
Let’s say that you want a custom design on the front page. In the template hierarchy you can see that the WordPress will look for the frontpage code in the file front-page.php.
I’d like to design my frontpage in Siteorigin’s PageBuilder. So I need a frontpage that does not interfer with Pagebuilder. And I don’t want a headline. A fast head start is to copy a file and use it as a model. Remove what you don’t want. Add what you need. In this case the result was extremely simple:
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
// the loop
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', 'frontpage' );
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
//get_sidebar();
get_footer();
This part of the loop will print the content, but not the headline. If you want the headline feel free to add the_header() and similar loop tags (see this article).
It’s a Theme
With Underscores you’ll learn what it takes to create a WordPress theme almost from scratch. Underscores is the basis of many themes – among them the core WordPress theme Twenty Eleven.
Multimusen’s costum front-page.php (september 2017). The layers are animated by a parallax script.
For multimedia designer an online portfolio is a must. The industry expect you to have one. But what if you have found a nice open source theme, but you need a really stunning front page? Or a costum gallery for your productions? Or a kick ass CV?
Install your open source theme via the Dashboard or by uploading a zip file.
Create a folder with the name of your child theme.
Then create a new file in the folder. Name the file style.css:
/*
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Seventeen Child Theme
Author: Per Thykjær Jensen
Author URI: https://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: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: tw17child
*/
As soon as the style.css is ready you’ll be able to see the child theme in the Dashboard. But the styles are not loaded. In WordPress styles and scripts are loaded via the enqueue function in functions.php.
You can add more scripts and stylesheets to this function if you want to after a similar manner.
That’s it! Your child theme is ready. Now it’s time for your creative tweaks.
Step 2) Create Costum Content
Let’s say that you want a costum frontpage:
In the child theme create a new file.
Save the file as front-page.php
Add some content to the page, e.g.
<h1>Hello World</h1>
OK, I admit that this is not the most stunning design, you’ve ever laid your eyes upen. But have a look at your frontpage. It’ll display a “Hello World” as expected. You did not use one line of PHP or WordPress template tags. There’s no loop either.
“What can you deduce from this, Sherlock?”
“The game’s afoot, Watson!”
Actually you can add any code you fancy. You don’t need to follow any restrictions made by the original theme. Now you are able to hardcode a cool splash for your website. If you want to, you can add wp_head() and wp_footer() in the code, e.g.
<?php wp_head(); ?>
</head>
If you do so WordPress will enable the admin bar and add the WordPress head and footer scritpts and styles from the theme.
Step 3) How to name the files
Actually you can modify any page or post after a similar manner. The secret is naming your costum files correctly, and here the template hierarchy diagram is the key we need. In the diagram you can find the front-page.php. Here are a few samples:
A page for categories: category.php
Costum design for a category with the slug icecream: category-icecream.php
A post with the slug whatever: page-whatever.php
If you don’t add a loop to the page, you can only use hardcoded content on your costum pages.
Sometimes that’s exactly what we need.
Now you’re able to create a bunch of very personal costum pages for your content, such as:
