View source for Install WordPress on Raspberry Pi

[[Category:202411]]
[[Category:Raspberry Pi]]
[[Category:WordPress]]
[[Category:Linux]]

= 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:

<source lang=bash>
#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
</source>

Check PHP location and use it in below configuration:

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

<source lang=nginx>
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;
	}
}
</source>

Enable the website:

<source>
#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
</source>

= Database secure configuration =
If you just installed the database, execute this script:

<source>
sudo mysql_secure_installation
</source>

Create database and database user:

<source>
sudo mysql -u root
</source>

<source lang=sql>
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
</source>

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:

<source>
#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 
</source>

= 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.

<source lang=bash>
sudo nano /var/www/wordpress/wp-config.php
</source>

<source lang=php>
	if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') $_SERVER['HTTPS']='on';
</source>

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:

<source lang=bash>
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
</source>

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.

<source>
sudo nano /etc/nginx/nginx.conf
</source>

<source lang=nginx>
http {
	...
	
	# set client body size to 10 MB #
	client_max_body_size 10M;
	
	...
}
</source>

<source>
sudo service nginx restart
</source>

== 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.

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

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

	...

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

Restart:

<source>
sudo service php8.2-fpm restart
sudo service nginx restart
</source>

== 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 >

<source lang=css>
/* disable selection blocks */
:where(.wp-site-blocks *:focus){  
 outline-width:0px;
 outline-style:solid
}
</source>

== 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.