Theming

Set up Demo Site for Theming Practice for Drupal 8, 9, and 10

Set up a local development environment to practice Drupal theme development. In order to practice theme development, either on your own or following our Hands-On: Theming guide, you'll need a Drupal site up and running on your computer.

By the end of this tutorial, you should be able to:

  • Install Drupal on your computer so you can modify files with a code editor of your choice.
  • Generate dummy content so that you have different kinds of pages to theme.

Goal

Set up a local development environment with Drupal installed and dummy content generated so that there are real pages on your site for you to theme.

Prerequisites

  • Ability/permissions to download software to your local machine.
  • To use DDEV, you should have DDEV installed (which has its own set of prerequisites, such as Docker). See DDEV Documentation and follow the installation instructions for your operating system. You should also be comfortable using the command line to navigate the file system and run commands. See Command Line Basics if needed.

Recommendation: Use DDEV to install Drupal

We'll use DDEV to install Drupal. We've copied instructions from the Drupal Official Docs Local Development Guide in the following steps.

Exercise: Install Drupal and generate dummy content

Install DDEV

Note: This tutorial assumes you're using ddev version 1.14.0 or greater.

To use DDEV to install Drupal, you'll need to install DDEV and its prerequisites, most importantly, Docker.

Go to the DDEV installation docs and follow the specific steps to install DDEV for your computer's operating system.

Configure environment to serve your Drupal application

First you will need to configure your local development environment to serve a Drupal codebase. At minimum, this requires creating a new database for Drupal and configuring the web server to serve Drupal content at a particular URL.

Run the following command (assumes DDEV):

# Replace my-site-name!
export SITE_NAME=my-site-name
mkdir $SITE_NAME
cd $SITE_NAME

ddev config --project-type=drupal10 --project-name $SITE_NAME --docroot=web --create-docroot

Alternatively, type ddev config and it will walk you through the options, step-by-step.

This will configure your new Drupal application to work with DDEV and will store the generated configuration in a new .ddev subdirectory.

Next, start the DDEV container:

ddev start

You now have a web server and database server configured and running.

Create a new Drupal application

Next we'll install Drupal via Composer. (Replace my-site-name with whatever you want to call your project directory). Or, use the ddev composer command if you don't have Composer installed on your machine.

The export command is optional and makes it easier to copy and paste commands in this step and the next. You could skip the export line and replace $SITE_NAME with the name of your directory, i.e. my-site-name.

# Install latest version of Drupal.
ddev composer create "drupal/recommended-project"
ddev composer require drush/drush

We're also downloading Drush in this step. We'll use Drush in a moment to enable modules and generate content.

This will create a new directory and populate it with Drupal, Drush (and its dependencies).

Install Drupal

Install Drupal either in the browser with the interactive installer or using Drush.

Method 1: Using the interactive installer

Run the following command and DDEV will open up the local site URL in your browser and display the interactive installer.

ddev launch

(Run ddev describe to see your site's URL and other connection information.)

Proceed through the interactive installer and install Drupal with the Standard installation profile. Refer to 3.7. Running the Interactive Installer if you need additional guidance with this multi-step form.

You have now installed Drupal with the interactive installer!

Method 2: Using Drush

ddev drush site:install --account-name=admin --account-pass=admin

Select 'yes' to drop all database tables and install Drupal. Then launch your site with:

ddev launch

You have now installed Drupal with Drush!

Install the Devel Generate module

Next, we'll download and install the Devel Generate module (part of the Devel project) and use it to generate some sample content. It’s easier to work on developing a Drupal theme if you’ve got some content on your site to look at.

ddev composer require drupal/devel
ddev drush en devel_generate

Without ddev

composer require drupal/devel
drush en devel_generate

Alternatively, in your browser use the Manage administrative menu and navigate to Extend and enable the Devel Generate module along with any required dependencies.

You have now installed/enabled Devel Generate module.

Generate users, tags, and content

Devel Generate comes with custom Drush commands that we can use to generate users, tags, and content. We recommend you run the commands in the order that follows so that the content you generate is assigned to random users to simulate a more realistic experience.

ddev drush devel-generate-users 10
ddev drush devel-generate-terms 20 --bundles tags --max-depth 1
ddev drush devel-generate-content 25

Without ddev

drush devel-generate-users 10
drush devel-generate-terms 20 --bundles tags --max-depth 1
drush devel-generate-content 25

Using the UI

Alternatively, if you didn't install Drush, use the administrative UI to generate users, tags, and content. You can find this UI on the Configuration page in the Development section (after enabling Devel Generate on the Extend (admin/modules) page).

  1. Generate users (10).
  2. Generate terms. (Vocabularies: Tags. Number of terms: 20. (Optional) Maximum depth for new terms in the vocabulary hierarchy: 1.
  3. Generate content. (Check both Article and Basic Page content types. 25 nodes.)

You can verify that the commands worked by visiting the following administrative pages:

  • Verify generated users at People (admin/people).
  • Verify generated terms at Structure > Taxonomy > Tags (select List terms) (admin/structure/taxonomy/manage/tags/overview).
  • Verify generated content at Content (admin/content).

You now have real pages to practice theming!

Recap

After completing this exercise you should have a working copy of Drupal that you can access on your local development environment. It should contain either real or dummy content that you can use when previewing your theme during development.

Further your understanding

  • Execute the ddev help command in your terminal and browse the additional ddev commands
  • Can you figure out how you might share this new local development configuration with others on your team so that you can all work on similarly configured environments?

Additional resources