SynologyWordpress Solve a 504 Gateway Time out nginx with WordPress on Synology

Recently, accessing WordPress on my Synology started to result in "504 Gateway Time out nginx" errors.

I found the solution here.

Click to Read More

  1. Open a ssh console using Putty as explained here.
  2. Enter root mode by typing: sudo -i
  3. cd /etc/nginx/
  4. chown -hR http:http conf.d/
  5. cd conf.d
  6. vi www.WordPress.conf
    1. Add: proxy_connect_timeout 600;
    2. Modify: proxy_read_timeout 600;

SynologyWordpress WordPress RewriteRule to "Redirect" after moving the blog

I did reconfigure my Synology Web Stations to access my blog directly at www.beatificabytes.be instead of www.beatificabytes.be/wordpress/. The problem was to redirect next the old pages still referenced by google onto their new address. Ex.: www.beatificabytes.be/wordpress/softwares onto www.beatificabytes.be/softwares. Using a RewriteRule did the trick.

Click to Read More

Concretely, I did configure a Virtual Host in the Web Station

WebStation VirtualHost

Next, I did reconfigure wordpress's wp-config.php by replacing:

define('WP_HOME','http://www.BeatificaBytes.be/wordpress');
define('WP_SITEURL','http://www.BeatificaBytes.be/wordpress');
define('WP_SITEURL', $pageURL . '/wordpress');

with:

define('WP_HOME','http://www.BeatificaBytes.be');
define('WP_SITEURL','http://www.BeatificaBytes.be');
define('WP_SITEURL', $pageURL');

Finally, I did remove "/wordpress" from all URL's in my own posts. I didn't use a Search & Replace plugin like the "Better Search and Replace" to do the update directly in the database. Instead, I did use the plugin "Broken Link Checker" to Bulk Edit broken URLs.

Bulk Edit Broken URLIt took more time but was a much more "clean" approach as I only touched for sure broken links. (Notice: This Plugin runs in the background so you need patience for it to get the complete list of broken URLs. What' really great is that for broken external links, it suggests the replacement by an archived version of the missing pages - via the WayBack Machine)

WayBack Machine

NB.: Here is another nice trick to list all broken URL's in a website

wget --spider -o /var/log/wget.log -e robots=off -w 1 -r -p http://<youraddress>

Finally, I had to redirect all old pages still referenced on Google to their new location. The obvious solution was to use a RewriteRule to be added in the .htaccess file used by WordPress (In my case, in /var/services/web/wordpress/.htaccess). Unfortunately, it took me hours to find the trick as, instead of reading the whole apache's RewriteEngine documentation, I tried to figure out myself how to do it, based on samples found on the web.

Finally, I read these french documentations:

And it's only by reading the documentation about the flag that I understood the need to use the special flag [R] (I already tried at least more than 20 various rules before understanding I had to specify the flag R(edirect)...)

So, here it is: RewriteRule ^wordpress/(.*)$ /$1 [R,L]

  • Match any path starting with "wordpress/" and followed by "anything else"
  • Replace it with the part matching "anything else"
  • And if a match was found, do a R(edirect) and this was the L(ast) rule to apply (i.e.: stop).

I didn't change anything else. Also, changes in the .htaccess are taken into account immediately, without the need to restart the WebStation.

# Synology PHP
AddHandler default-handler .htm .html .shtml
AddHandler php-fastcgi .php
AddType text/html .php
Action php-fastcgi /php56-fpm-handler.fcgi
# Synology PHP

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^wordpress/(.*)$ /$1 [R,L]
RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L] </IfModule>

# END WordPress

Et voilà.

NB.: Here is a useful website to test online .htaccess RewriteRule's

TipsWordpress Display standard quotes in a WordPress post

Single and double quotes typed in a post are displayed by WordPress as directionnal quotes: 'blabla' or "blabla" (I.e.: left/right single/double quotes). This becomes an issue when publishing "shell scripts" samples to be copy/pasted. The solution is to type "encoded quotes". Ex.: & #39; for ' or & #34; for " (without the blanks between & and #).

Click to Read More

This is due to the WordPress converting Straight Quotes to Pretty Quotes... a feature also named Smart Quotes and due to a filter running in WordPress: the "wptexturize".

Here after, an example I used to post to illustrate how to send custom notifications from a script running on a Synology. The code was directly copy/pasted here from a shell script opened within Notepad++ (where the quotes appeared as &#39 and &#34).

/usr/syno/bin/synonotify Tag_Name '{"[%VAR1%]": "value1", "[%VAR2%]": "value2"}'

As you can see above, the single and double quotes are displayed by WordPress as symbols: '...' and "...".

The problem is that readers who copied/pasted as-is this sample in their script got execution errors. Indeed, a ' and a &#39 are not interpreted the same way within a shell.

To solve this issue, I did replace all ' and " respectively by & #39 and & #34 (without the blanks between & and #). I don't use the menu Insert > Special Character as

Another option would be to disable the "pretty-fication" feature... This can be done by opening up your theme's functions.php file and pasting the following code at the bottom right before the closing ?> PHP tag:

remove_filter('the_content', 'wptexturize');

Notice that Quotes in preformatted text (as here just above) are not replaced by Smart Quotes. But one one side, this can't be used on Quotes typed inline, and on the other side, I don't use preformatted text for my code samples...

Yet another option would be to use a plugin like the Smart Quote Fixer to remove the Smart Quotes.

But I prefer to use type the num codes as I don't want to disable Smart Quotes on the complete post...

Wordpress Open WordPress' Media in a floating popup instead of the current window

When one clicked on a picture in my WordPress blog, inserted as a Media with the standard "Add Media" button, it was opened in the current window. To open it into a floating popup windows without modifying anything (code or theme), I simply used the plugin "Easy FancyBox".

Click to Read More

All supported media are automatically handled by the plugin and opened in a smooth overlay.

With the plugin installed (using its default settings):

Sample Open In Popup

Sample Open In Popup

Without the plugin (the plugin can be disabled by adding this in the <a href> tag: class="nofancybox"):

Sample Open In Window

Sample Open In Window

 

All the details on https://wordpress.org/plugins/easy-fancybox

Wordpress Run "Use Google Libraries" and "Root Relative URLs" plugins for WordPress Side by side

I recently tried to install the plugin "Use Google Libraries" for WordPress but it didn't work because all its URLs where rewritten by the plugin "Root Relative URLs". This can be solved with a black list url...

Click to Read More

Concretely, the plugin "Use Google Libraries" uses URLs like  src='//ajax.googleapis.com/ajax/libs/...'. Those were rewritten by mistake into src='/ajax/libs/...'

I couldn't disable the plugin "Root Relative URLs" as it's the only way to make my blog accessible seamlessly from both internet and my intranet, using either the netbios name of my NAS, its IP or its dynamic DNS name.

So, I tried to add //ajax.googleapis.com in the "black list urls" of  "Root Relative URLs". Those can be set in the Dashboard > Settings > General > (scroll to the bottom) "

Unfortunately it didn't work... Until Hube2, who wrote a hack of "Root Relative URLs", told me how to set it correctly: one may not use the domain name in the black listed URL's.

Conclusion, in my case, I had to black list "ajax/libs", et voilà!

Wordpress Modal Popups don't open anymore within WordPress 3.8.2's Visual Editor

Since a few months, I couldn't "Add Media" or "Insert/Edit Link" anymore within the Visual Editor of my WordPress, when editing existing Posts. Everything was however working fine when creating new Posts... According to me, it is due to the use of a too recent version of ajax/jQuery, not compatible/conflicting with WordPress 3.8.2's libraries. I found indeed some plugins recently updated/installed that had to be removed to solve the problem.

Click to Read More

Concretely, Modal Popups didn't open anymore...

I didn't get time to investigate that issue before this week-end. But it took me only a few minutes to discover that everything was working again when disabling the plugin Akismet 3.0.0 (updated by the way from 2.5.9 a few months ago).

Instead of disabling all the plugins and re-enabling them one by one, I did compare the html source of the pages used to create a new Post and to edit an existing Post (As the problem only occurred when editing). I noticed immediately that the main difference was the inclusion of some Akismet's javascripts. Reason why I tried first to disable that plugin.... and Bingo!

As suggested on WordPress' forum, I tried to installed the plugin "Use Google Libraries". But it didn't solve the problem. Actually, using that plugin while Akismet is disabled also results in Modal Popups not opening...

When the problem occurs, there are errors logged in the Chrome's developer Console (F12 > tab "Console") : Uncaught TypeError: undefined is not a function. This error occurs in scripts from jquery-ui.min.js

So, IMO, both "Use Google Libraries" and "Akismet" use a too recent version of ajax/jquery for WordPress 3.8.2. But as I didn't want to upgrade to WordPress 3.9 or 4.0 beta (as long as Synology don't provide its own package) I did simply rollback to Akismet 2.5.9. I had fortunately a backup... And did uninstall "Use Google Libraries"... Et voilà !

Wordpress WordPress: Create a page of Posts

I don't use menus that simply display all posts from one category as one can do using a custom menu (to be created via the Dashboard > Appearance > Menus). Instead, I use pages with a "custom Template" that displays such post with futher flexibility.

Click to Read More

  1. Create a new "Page Template" (a php file) named "page-of-post.php" and save that one into the root folder of your theme if not yet available: \\<YourSynology>\web\wordpress\wp-content\themes\<YourTheme>\
  2. In this page Template, you should have the code provided at the bottom of this post.
  3. Go to the "Dashboard" > "Pages", and click "Add New" to create a blank page.
  4. Type a name for your page. This name will be displayed in the menu (Header).
  5. In the "Page Attributes" pane, select "Page of Post" as a "Template" for the new page.
  6. Publish the page
  7. Add now that page to the Custom Menu (via the Dashboard > Appearance > Menus).
  8. Finally, possibly create one "Category Sticky" post which will stay at the bottom of the page and introduce the topic (E.g.: when creating a post, add a category in the "Category Sticky" pane made available via the Plugin "Category Sticky Posts" 0.13 of  Brian Zeligson)

Here is the code of the page Template. Pay attention that I am using the theme 'twentyeleven':

<?php
/*
Template Name: Page Of Posts
*/

// if you are not using this in a child of Twenty Eleven, you need to replicate the html structure of your own theme.

get_header(); ?>

	<div id="primary">
		<div id="content" role="main">

		<?php
			$slug = basename(get_permalink());
			$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
			$args= array(
				'category_name' => $slug, // Change these category SLUGS to suit your use. Ex.: "categ1, categ2"
				'paged' => $paged
			);
			query_posts($args);

			$category = get_category_by_slug($slug);
			if(empty($category))
				$name = $slug;
			else
				$name = $category->name;
			if( have_posts() ) :?>

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>

					<?php get_template_part( 'content', get_post_format() ); ?>

				<?php endwhile; ?>

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

			<?php else : ?>

				<article id="post-0" class="post no-results not-found">
					<header class="entry-header">
						<h1 class="entry-title"><?php _e( 'Nothing Found in the Category "'.$name.'"', 'twentyeleven' ); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
						<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</article><!-- #post-0 -->

			<?php endif; ?>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Wordpress WordPress: Sort items in the Header using a Custom Menu

So far, I didn't configure anything special in WordPress to get my "Home" menu and my various "pages" displayed in the header. I only had to customize WordPress to display a dropdow menu "Categories". But to sort those items, I add to create a menu via the "Dashboard" > "Appearance" Menu.

Click to Read More

  1. Go to the "Dashboard", open "Appearance" and select "Menus".
  2. Create a new Menu. The name of that menu won't be displayed in the blog
  3. Select that menu as "primary menu" in the "Theme locations" pane.
  4. Add the "Home" entry in that menu. It's available in the "Pages" pane > "View all"
  5. Add other "Pages" and "Categories".
  6. Sort them according to your needs.

Notice that using this feature, it's easy to create one entry for each category. I don't use this tip however to display all posts from one category. Instead, I create a custom page that displays only those posts. Doing so, I can customize further the display.

Wordpress WordPress: exclude categories from the Home Page

I don't want my posts from categories "Softwares" and "Wishlist" to appear in the main thread of my blog. In the past, I had to add some code in the "functions.php" page of my theme (twentyeleven) to filter that posts from the home page. Now, I am using the plugin "WP Exclude From Homepage 1.1.2".

Click to Read More

The code I used to add in \\<YourSynology>\web\wordpress\wp-content\themes\<YourTheme>\function.php was:


/**
* Excludes post in category "softwares" from the home page
*/
function exclude_cat_from_home($query) {
if ( $query->is_home) {

$acats = array();
foreach ( array('wishlist','softwares') as $catName ) {
$cat = get_category_by_slug( $catName );
$acats[] = '-'.$cat->cat_ID;
}
$cats = join(',', $acats);
$query-> set('cat',$cats);
}

return $query;
}
add_filter('pre_get_posts','exclude_cat_from_home');

It was located at the very bottom of the file

Wordpress "Page not Found" in WordPress after Upgrade

I got "Page Not Found" on any permalink clicked in my blog after doing:

  • an upgrade of the Synology's WordPress package from 3.4 to 3.5.
  • and an upgrade all my Plugins.

The problem was in the URL rewriting configured in the .htaccess.

Click to Read More

The easiest solution is to reset the "Default" common settings for the Permalink via the WordPress Dashboard. This will reset the .htaccess.

  1. Go into the DashBoard > Settings > Permalinks.
  2. Select "Default" in the "common settings"
  3. "Save Changes"

Possibly set back next your favorite settings (such as "Post name" in my case).

Voilà.

Here is for information purpose the content of the .htaccess once fixed:

# BEGIN WordPress

RewriteEngine On
RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]

# END WordPress