Creating a WordPress theme with Emacs

April 2, 2021

Programming

Web Emacs

Emacs is useful for creating of WordPress themes. Learn about how to setup the environment.

Intruduction

How to get development environment for WordPress theme?

Requirements

This article assumes the following softwares on your hands.

macOS Catalina (v10.15.7)
Docker Desktop v3.1.0 (51484)
Emacs

Setup WordPress on Docker

Now, let's prepare WordPress environment.

In this post, i use WordPress on Docker as a development environment. A docker-compose.yml which is tutorial level is sufficient to develop.

First, make a working directory.

1

mkdir path/to/your/project && cd path/to/your/project

Next, make a docker-compose.yml.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


# See also: https://docs.docker.com/compose/wordpress/
version: "3.9"
    
services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      - ./wp:/var/www/html
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
volumes:
  db_data: {}

Run this command.

1

docker-compose up -d

Open http:localhost:8000 in your web browser, you get the following page.

./images/figure_01.png

Setup Emacs

Setup PHP environment on your Emacs.

First, install PHP to your Mac.

1
2
3
4
5


brew install php@7.4
brew link php@7.4
brew install composer   
brew install node@14
npm i intelephense -g

Next, check the version.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


$ php --version
PHP 7.4.16 (cli) (built: Mar  4 2021 20:49:25) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
with Zend OPcache v7.4.16, Copyright (c), by Zend Technologies

$ composer --version                                                                                                                                                                [~/Documents/Projects/Personal/my_wordpress 6:44]
Composer version 2.0.12 2021-04-01 10:14:59

$ npm --version                                                                                                                                                                     [~/Documents/Projects/Personal/my_wordpress 6:44]
6.14.11

Next, setup to your Emacs.

lsp-mode
php-mode
exec-path-from-shell

intelephense is /usr/local/bin/intelephense, so you provide $PATH to your Emacs. I know that two methods to provide the $Path to Emacs.

exec-path-from-shell (recommended)
Parse $PATH on your original elisp

Use exec-path-from-shell (recommended).

1
2
3
4


(unless (package-installed-p 'exec-path-from-shell)
  (package-refresh-contents)
  (package-install 'exec-path-from-shell))
(exec-path-from-shell-initialize)

Or this.

1

(setq exec-path (parse-colon-path (getenv "PATH")))

Setting lsp-mode

1
2
3
4
5


(leaf lsp-mode
  :ensure t
  :commands lsp
  :hook
  (php-mode-hook . lsp))

Edit WordPress theme

Launch your Emacs. Then, let's try to open single.php of twentytwentyone theme.

1
2


M-x dired
path/to/your/wp/wp-content/themes/twentytwentyone/single.php

Include it in the activity range of lsp-mode with the following command

1

M-x lsp-workspace-folders-add

Then, kick lsp-mode this command.

1

M-x lsp-mode

./images/figure_02.png

./images/figure_03.png

Cleanup command is here:

1
2


# Docker container, defalut network and the WordPress database
docker-compose down --volumes