BeBuilder Pages Render Without Editing Options
Issue Description:
When I try to edit a page using BeBuilder, the actual page content renders instead of showing the editing options, as displayed in the attached image.
This issue occurs on all pages except the Home page.
Steps Taken:
1. I disabled all plugins, but the issue persists.
2. I reviewed the browser debugger console, but it shows no anomalies.
Additional Information:
• The live site is https://www.spingo.lat.
• I can provide admin access if needed for troubleshooting.
Comments
For those who are having the same problem.
Solution: Adjust Your NGINX Configuration
The issue is typically caused by incorrect headers, caching, or iframe-related configurations. Below is a tested and working NGINX configuration to resolve this problem:
1. Allow Iframes with X-Frame-Options
BeBuilder relies on iframes to load the page for editing. Ensure NGINX is not blocking iframes:When running a WordPress site using BeTheme’s BeBuilder behind an NGINX reverse proxy, you might encounter an issue where the BeBuilder editor displays the actual page instead of the editing options. This problem is often related to NGINX configuration settings.
add_header X-Frame-Options "SAMEORIGIN";
2. Ensure Proper Proxy Headers
Add these proxy headers to ensure WordPress correctly detects HTTPS and the reverse proxy:
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Real-IP $remote_addr;
3. Prevent Caching for Admin Requests
location ~* /wp-admin/ {
add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0";
add_header Pragma "no-cache";
}
4. Increase Buffer and Timeout Limits
client_max_body_size 128M;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_read_timeout 300;
5. Update the try_files Directive
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
Updated NGINX Configuration
Below is a complete configuration example:
server {
listen 80;
server_name example.com www.example.com;
# Redirect all HTTP traffic to HTTPS
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
server_name example.com www.example.com;
client_max_body_size 128M;
root /path/to/wordpress;
index index.php index.html;
# SSL Certificates
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
# SSL Settings
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers HIGH:!aNULL:!MD5;
# Headers
add_header X-Frame-Options "SAMEORIGIN";
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Real-IP $remote_addr;
# Main location block
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
# PHP handling
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
# Disable caching for admin
location ~* /wp-admin/ {
add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0";
add_header Pragma "no-cache";
}
# Block .htaccess and sensitive files
location ~ /\.ht {
deny all;
}
}
Hi,
I am happy to see that you found a solution. Thanks for sharing it with others.
Best regards