Install WordPress on Raspberry Pi

Links

• WordPress Configuration
• https://reyestechtips.com/install-wordpress-on-raspberry-pi-using-nginx/

Install WordPress

This configuration will assume LEMP-stack:

• Linux
• Nginx "engine-x"
• MariaDB
• PHP

Install webserver, PHP and database:

#LEMP
sudo apt install nginx php-fpm mariadb-server php-mysql

#Optional modules:
sudo apt install php8.2-curl php8.2-xml php8.2-imagick php8.2-zip php8.2-gd php8.2-intl

#WordPress
cd /var/www/
sudo wget http://wordpress.org/latest.tar.gz

sudo tar xzf latest.tar.gz
sudo rm -rf latest.tar.gz
sudo chown -vR www-data:www-data /var/www/wordpress

Check PHP location and use it in below configuration:

ls -l /var/run/php/
sudo nano /etc/nginx/sites-available/wordpress

server {
	listen 80;
	server_name _;
	root /var/www/
	index index.php;
	location /wordpress/ {
		try_files $uri $uri/ /index.php?$args;
	}
	location ~ \.php$ {
		include snippets/fastcgi-php.conf;  
		fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
	}
}

Enable the website:

#enable
sudo ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/wordpress

#remove default
sudo rm /etc/nginx/sites-enabled/default 

#restart webserver
sudo service nginx restart

Database secure configuration

If you just installed the database, execute this script:

sudo mysql_secure_installation

Create database and database user:

sudo mysql -u root

create database wordpress default character set utf8 collate utf8_unicode_ci;
-- Replace username and password with your own
create user 'username'@'localhost' identified by 'password'; 
-- Replace username
grant all privileges on wordpress.* TO 'username'@'localhost'; 
flush privileges;
exit

Configure Wordpress database connection. You could use the setup wizard that appears while going to the website URL for the first time. However this may pose problems due to permissions. Instead you can configure the connection in the provided configuration file:

#apply webserver group and user permissions
sudo chown -v www-data:www-data /var/www/wordpress/wp-config.php
#backup
sudo cp /var/www/wordpress/wp-config.php /var/www/wordpress/wp-config.php.BAK
#take sample file
sudo cp /var/www/wordpress/wp-config-sample.php /var/www/wordpress/wp-config.php 
#edit
sudo nano /var/www/wordpress/wp-config.php

Trouble shooting

Reverse proxy problems

Using the WordPress site via a reverse proxy (https <-> http) the site doesn't look right, it seems CSS style is not read. Firefox console (F12) shows errors.

Add below code at the bottom of 'wp-settings.php', just before "require_once".;" line.

sudo nano /var/www/wordpress/wp-config.php

	if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') $_SERVER['HTTPS']='on';

Info:

• https://wordpress.stackexchange.com/questions/392867/wordpress-https-css-and-js-files-are-not-working-load-on-http-instead-of-ht

WP-Cron not triggering

WP-Cron only triggers at page loads. This means it will trigger with the first visitor after the scheduled time. This can be a bit confusing if you have a backup scheduled at a certain time but traffic is low.

If you have access to the system cron you can schedule a pageload every hour or so to make it trigger at low traffic hours.

For example:

sudo nano /etc/crontab

	21 * * * * root wget -t 1 --timeout=60 --no-check-certificate -O /dev/null -o /dev/null https://127.0.01/wpvvb/wp-cron.php?doing_wp_cron

More info:

• https://developer.wordpress.org/plugins/cron/

Nginx message: 413 Request Entity Too Large

If you are uploading a biggish file, like an image, the webserver might complain.

sudo nano /etc/nginx/nginx.conf

http {
	...
	
	# set client body size to 10 MB #
	client_max_body_size 10M;
	
	...
}

sudo service nginx restart

PHP message: The uploaded file exceeds the upload_max_filesize directive in php.ini

If you are uploading a biggish file, like an image, PHP might complain.

#where is php.ini?
ls -l /etc/php

#edit configuration
sudo nano /etc/php/8.2/fpm/php.ini

...

memory_limit = 128M upload_max_filesize = 10M post_max_size = 15M

Restart:

sudo service php8.2-fpm restart
sudo service nginx restart

Wordpress Site icon: There has been an error cropping your image

Needed to install missing modules, they are included in the installation section.

Tips & tricks

Child Theme

Remember that an update to a theme you use will replace all changes you made to it. If you don't like that you should make a "child theme" that has the other theme as its parent before you modify any of the templates.

More info here:

• https://wordpress.org/plugins/create-block-theme/
• https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/

Stick with simple "perma links"

While building the website some links become hardcoded in your Website data. My advice is to stick with Permalink "<HOST>?p=<page-id>" in the WordPress settings. It is easier to find these and search/replace. For example: URL: //192.168.1.33/?p=123 --> //wjv.duckdns.org/wordpress/?p=123

What is SEO?

Search Engine Optimization. Practices and methods used to optimize the ranking of a site in search engine results.

How to export/import complete website?

Go to Tools > Export/Import in your WordPress admin. You get an XML file but it is limited to website text data.

Disable selection blocks for the whole site

By default, if you would click in the webpage, a border is shown around the clicked/selected block. Here is to disable that for the whole site.

Appearance-menu > (enter editor) > (top right) Styles > (right bottom) Additional CSS >

/* disable selection blocks */
:where(.wp-site-blocks *:focus){  
 outline-width:0px;
 outline-style:solid
}

WordPress Learning

• https://www.youtube.com/watch?v=oIECtxoTa0s (35min)
• https://learn.wordpress.org/courses/ (needs account)

How can you see if a theme is block or classical?

If you have a block theme, you will see the 'Editor' option in the Appearance menu. A classic theme, will only have the 'Customise' option. The Pages overview in the top-level menu is for editing the site text, if you go via appearance menu you can do that as well but you will also see headers and footers and will be notified when you start editing templates.