Archive for the " How To Wordpress " Category
As a wordpress developer, I helped a few friends speed up their site from 20s to 2~3s, in general, what I will do it minify js and css and html, enable gzip compress, optimize images, reduce http requests numbers and reduce http requests size, add expires headers, enable CDN, switch php verion to php7.x, optimize mysql, enable database cache, object cache …. and …. and more. For speed up these performance optimization work, I used a few tools to get help me work more faster, I am happy to share them with you, my dear friends. 🙂
There are many site speed tools, for me, a useful online web performance tool is varvy.com, it is free, I use this online tool to audit client’s webpage for front-end issues.
Let’s use my site as a bad example — I designed my original theme at 2008, I did not upgrade my theme in many years, so it is a good example to show front-end problems. In the current time, after 8 years? my theme is still works, at the bottom of the page, you can find w3c validator is still living, but it is too old, I will upgrade my theme to follow wordpress new API standard and add new features and share it on wordpress.org.
Page Speed Check
let’s Open https://varvy.com/pagespeed/, don’t worry, it’s a great tool which alexa rank is 31046. Input your site URL, and click test button, the report of page speed optimization will shown very quickly, it looks like this:
You can see the summary of page speed optimization told you a few problems on your site, for me, it is:
images not optimized, css not minumized, js not minifiled, browser caching issues, this is not good.
Also in the top right, the report shown screenshot of my site and give us a resources report. Scroll down, let see more details:
The “CSS delivery” section tell us front-end problems:
too many external css files, render blocking css files, 1 css file were called using @import, In element css found, css not minimized
My god, too bad, I hate this.
Also the report use red color to tell me which js file size is too large:
addthis_widget: 347.015 kb
jquery: 97.184 kb
datepicker: 75.876 kb
The report let me know what is js and css problems quickly, the site is very FAST, although if you check their page source, you will find they did not minified html at all. Some other online tools need wait about 30s ~ 100s for get a result, this is a reason why I use it first to fix most obvious issues.
Next section is “Image optimization”, report said: “Image performance issues found.”
It lists all images which Not Optimized in the checking page, for example:
3d-tag-cloud.png | Not Optimized | Could save 155.2KiB if optimized (94%)
Optimize this image can save 94%, it is great help for speed up my site, I can’t wait to reduce size of these images!
Also the tool will told us “Browser caching”:
Browser caching not enabled for all resources, also it tell me details about this issue:
You can find on my domain speed up your site via tomas.zhu.bz, the report said:
No caching errors found for resources served from origin domain.
What caused the problem?
Browser caching not enabled from these domains called from this page:
Yes, I using addthis plugin, I hope my posts can be shared with readers, if it is a little helpful. 🙂
And then next is optimized sections lists:
Compression is enabled for all resources
Server responded in less than 200 milliseconds
And so on. Site owner is a gentleman, he said “Thanks for using this tool”, Thanks for https://varvy.com/, you built a great tools to help webmasters and developers like me. 🙂
Mobile Friendly Test
Goodbye? No, no, wait a moment, varvy.com have another good feature — test your site on mobile, because my theme is designed at 2008, I did not add mobile features, so my theme is a good sample for show errors on mobile, please don’t miss-understanding me, I am not ignored mobile users, in some country and in some sites, 70% users is come from mobile devices, I have designed many themes which is support mobile devices, also I have customized many child themes to let plugins support mobile devices, all of them is get A rank or score 100 / 100 in speed test sites, once I have time from my hard works, I will re-design my theme to support mobile user and share it with you, if you have any ideas, please tell me, I am happy to add it into this theme.
Now please just open home page on https://varvy.com/, and in the top left, there are mobile test link, just click it and enter your site URL and wait about 15s, you will get mobile report like this:
You can find my site just get 64 / 100 on Mobile friendly, and there are details about issues:
- Font size is small
- Viewport not configured
- Tap targets are small
- Browser caching issues
- Render blocking CSS and/or JS
- CSS not minimized
- Images not optimized
It is useful to get a glance of problems on mobile devices.
On the home page of varvy.com, there are another tool I like to use: seo tool, if you enter your site URL, you will get a seo diagnosis report:
Based on this report, I found I do ignored a few SEO points.
This is section one of “WordPress Tips: Tools for how to find out what is slowing down your site and make it faster“, I will share other tools in next articles, thanks for read my posts, if you have any great thoughts, please don’t hesitate to me and other reader. Have a happy day with your family. 🙂
WordPress 4.7.2 was released in January 26th, 2017. An Unauthenticated Privilege Escalation Vulnerability in a REST API Endpoint was fixed. The WordPress Official advises the users to update the sites immediately.
WordPress 4.7.2 Security Release – fix serious content injection vulnerability
The issue reporter Sucuri said, modify the WordPress website content will produce a modified data packet, The attacker can modify URL to bypass the account verification and directly view the contents of the website by REST API, In addition, the vulnerability even allows an unauthenticated user to modify the content of any post or page within a WordPress site.other content.
Sucuri provide technical details of the vulnerability and write the conclusion in his blog:
This is a serious vulnerability that can be misused in different ways to compromise a vulnerable site. Update now!
WordPress tag cloud plugin: 3D Tag Cloud
3D Tag Cloud plugin is a free wordpress plugin to allow the tag label to appears in the form of 3D animation.
3D Tag Cloud plugin has the same function as WordPress default tag, but 3D Tag Cloud plugin provides more rich effects visually, but also very flexible, 3D Tag Cloud plugin has the following features:
Title of the Tag Cloud.
Number of tags to be displayed.
Height and Width of the widget.
Font maximum size.
Font minimum size.
This plugin is very popular now, support Support multiple languages, e.g, French, German, Portuguese – Brazilian, Slovak, Spanish.
You can download here: https://wordpress.org/plugins/cardoza-3d-tag-cloud/
WordPress Security update: WordPress 4.7.1 release
The official WordPress news, 36 days after the official release of the WordPress 4.7 version, WordPress 4.7.1 release, which is a security update version.
This version fixes the vulnerability, which will affect all of the previous version of the WordPress, Tomas Zhu recommended you upgrade in time. Before the upgrade, please backup the modified theme files, WordPress files, as well as the database.
There are 8 issues about this security update:
1. Remote code execution (RCE) in PHPMailer – No specific issue appears to affect WordPress or any of the major plugins we investigated but, out of an abundance of caution, we updated PHPMailer in this release.
2. The REST API exposed user data for all users who had authored a post of a public post type. WordPress 4.7.1 limits this to only post types which have
specified that they should be shown within the REST API.
3. Cross-site scripting (XSS) via the plugin name or version header on update-core.php. Reported by Dominik Schilling of the WordPress Security Team.
4. Cross-site request forgery (CSRF) bypass via uploading a Flash file.
5. Cross-site scripting (XSS) via theme name fallback.
6. Post via email checks mail.example.com if default settings aren’t changed.
7. A cross-site request forgery (CSRF) was discovered in the accessibility mode of widget editing.
8. Weak cryptographic security for multisite activation key.
If you are not a professional technical staff, these should have little impact on us, but for the sake of safety, Tomas zhu recommended you to upgrade in time.
In addition to repair 8 major security vulnerabilities, WordPress 4.7.1 also repair 62 Bugs based on WordPress 4.7. The WordPress official had push a new version of the update notification in your site’s admin area, after backing up all the data(the modified theme files, WordPress files, as well as the database), you can updated in your site’s admin area.
The version does not involve the compatibility issues of language packs, themes and plugin, so you can update in time after having backed up.
WordPress.4.7.1 Download: https://wordpress.org/wordpress-4.7.1.zip
A friend ask me why all pages on his wordpress site are 404 page not found, after he enabled pretty wordpress permalink structure, I did a quick check and I found he did not enable mod_rewrite on his apache at all, I record fix steps in here:
1: ssh to your server and log in as root, on ubuntu, the command will be
2: activate mod_rewrite on your site, on ubuntu, it should be:
sudo a2enmod rewrite
then restart your apache, on ubuntu, this should be:
sudo service apache2 restart
3: Allow edit .htaccess file, wordpress will write all rewrite rules in .htaccess, on ubuntu, you need change the apache config file like this:
sudo nano /etc/apache2/sites-enabled/000-default.conf
ubunThis will open nano edit window, you will find there are line like this:
under this line, just add:
Options Indexes FollowSymLinks MultiViews
allow from all
then CTRL+O to save and CTRL+x to exit nano.
and restart your apache again:
sudo service apache2 restart
4: Go to wordpress admin area and change permalinks to Pretty Permalinks, it means the link structure like:
will looks like:
It is better to understand and it is better for SEO.
Speak of WordPress, the colorful theme templates and omnipotent plugins is the most attractive for us, WordPress support automatically uploading pictures for users to generate thumbnails. A variety of multiple thumbnails enable us to maximize to optimize the theme visual effects.
Generally we install the theme, automatically generated thumbnail size according to the needs, so that the theme automatically calls, or we manually insert the images into the page. But when we change a new theme, the problem comes, the new theme probably needs different size of thumbnail size from prvious theme. At this time, we have a variety of ways to regenerate the Thumbnail images. But for me, the most simple, the most thorough, the most perfect way is to regenerate all of thumbnail images of the whole website.
So I found the following 2 plugins:
Thumbnail Rebuild AJAX
Thumbnail Rebuild AJAX
If you search in internet, you will find that these two plugins frequently appear in the author recommendation lists. Tomas Zhu only used Regenerate Thumbnails because it was in self built server, I set the PHP execution time limit very long, and the number of pictures on the site is not so much, so the process of regeneration thumbnails is successful. And for those users with too much images in the site, Thumbnail Rebuild AJAX may be a better choice. Read the introduction from Thumbnail Rebuild AJAX, it can solve the problem of the massive picture execution time exceeds PHP setting.
When you have a lot of full-size photos, the script on the server side takes a long time to run. Unfortunately the time a script is allowed to run is limited, which sets an upper limit to the number of thumbnails you can regenerate. This number depends on the server configuration and the computing power your server has available. When you get over this limit, you won’t be able to rebuild your thumbnails. AJAX Thumbnail Rebuild allows you to rebuild all thumbnails at once without script timeouts on your server.
EWWW Image Optimizer – image optimization plugin
Image compression can not only improve the image loading speed when accessing, but also reduce server bandwidth. EWWW Image Optimizer is a WordPress image optimization plugin. This Plugin can automatically optimize your images, the image has been uploaded this will be optimized, EWWW Image Optimizer achieve the optimization effect mainly by reducing the size of the image, the plugin has settings Options in admin panel, you can use lossy compression picture, lossless compression picture in default. It can optimize the images that you have already uploaded, convert your images automatically to the file format that will produce the smallest image size.
Reduce image sizes in WordPress including NextGEN, GRAND FlAGallery, FooGallery and more using lossless/lossy methods and image format conversion. EWWW Image Optimizer is very popular image optimization plugin, more than 400,000 downloads.
I was replied a wordpress user’s question, but I think my answer is not full correctly, so I’d like add more detailed reply in here, the question of the user is when he try to upgrade his wordpress, in wordpress dashboard, it saying: ” The login credentials for FTP to update WP using FTP.Hostname, FTP Username, FTP Password“.
I am not tech literate beyond bare basics, I have used WP MultiSites for years online. No experience with servers ever and some minor dabbles in the files.
I don’t know:
The login credentials for FTP to update WP using FTP.
Hostname, FTP Username, FTP Password
I have done this local install solely to learn WP – not for developement or staging. I appreciate any input and direction to easy to comprehend sources of information. I have not had success with the WP Codex finding or using info from it in general.
Below is what I was replied:
I working on Linux OS too, I guess if you are use default install, the folder will be /var/www/html ? Also maybe your apache user:group is “apache:apache” ? If so maybe you can try:
chown -R apache:apache /var/www/html
But I think my reply is not full correctly, actually, there are many Linux OS, my answer is just helpful on a little Linux platform, so if we hope solve this problem on all Linux platform, it is not enough.
So, at first, let’s check back why this “The login credentials for FTP to update WP using FTP.Hostname, FTP Username, FTP Password” problem happen? Actually when you try to update / install / delete / upgrade your wordpress plugins or themes, or when you try to update core codes of wordpress, wordpress will call function get_filesystem_method() to check:
* Determines which method to use for reading, writing, modifying, or deleting
* files on the filesystem.
* The priority of the transports are: Direct, SSH2, FTP PHP Extension, FTP Sockets
* (Via Sockets class, or `fsockopen()`). Valid values for these are: ‘direct’, ‘ssh2’,
* ‘ftpext’ or ‘ftpsockets’.
And then the function will try to call create a temp file like this:
$temp_file_name = $context . ‘temp-write-test-‘ . time();
$temp_handle = @fopen($temp_file_name, ‘w’);
If wordpress can not create the temp file, it will request you offer ftp or ssh accounts.
So the final problem is you can not create the temp file in your wordpress installation folder.
My answer is right, but not fully right, actually, in Centos, the default apache server user name and group name is apache, but in many Linux system, they using another apache username and groupname, for get the correctly apache server default username and groupname, we need find out it at:
you will find it saying:
# Since there is no sane way to get the parsed apache2 config in scripts, some
# settings are defined via environment variables and then used in apache2ctl,
# /etc/init.d/apache2, /etc/logrotate.d/apache2, etc.
This is on ubuntu, so the apache user name and group name is www-data, and in ubuntu, if you want to aviod ” The login credentials for FTP to update WP using FTP.Hostname, FTP Username, FTP Password“, you need use this:
chown -R www-data:www-data /var/www/html
BY this method, you can works well on other Linux OS and you will not have problem of “The login credentials for FTP to update WP using FTP.Hostname, FTP Username, FTP Password“. 🙂
A good guy contact me said that his site is “shutdown” and there are just a white screen with a message “Briefly unavailable for scheduled maintenance, Check back in a minute“, but he waiting more than 1 day, the site is still shutdown and always in the Maintenance mode.
Actually this is because he setting his site as automatic upgrade mode, sometimes, maybe hosting have a little problems, for example, your wordpress just successfully removed files from your plugin folder bbpress, but did not successfully removed the bbpress folder , so the upgrade can not be finished. for avoid any risk, wordpress will add a maintenance file in your wordpress installation folder, only when upgrade successfully completed, wordpress will remove the maintenance file, so this is why our sites always show “Briefly unavailable for scheduled maintenance, Check back in a minute”, because in any time, if your wordpress installation folder have the maintenance file, your site will only show “Briefly unavailable for scheduled maintenance, Check back in a minute“.
To remove the problem, it is very easy,
1: Logged in your FTP or your CPanel, Check plugins or themes folders and sort via time, check recent updated folder, in general, you will find some folders and files in these folder have problems, you can just remove these folder and download the official codes from wordpress.org, then upload it again.
2: Go to your wordpress installation folder, and remove “.maintenance" file.
3: Open your front end, you will find the site is come back
My suggestion is, if you update your site, install a coming soon or maintenance plugin, add your note and a countdown for example something we will come back about 02:15:25. So your users will know your site is maintenance and they will come back about 2 hours later. In general, a good coming soon plugin should setting your site as “503” status, which means The 503 Service Unavailable error means that the web site’s server is not available, usually due to maintenance or server overloading, this is help for your SEO.
Anything I can help you? contact me. 🙂
About WordPress Plugin Security
When you develop a wordpress plugin, a important thing is hope your users are always safe. A few years before, we had to use a few functions like addslashes, stripslashes, or something like $wpdb->escape($var) to avoid security problem come from user side. Fortunately for wordpres developers, in recent years, wordpress have improve their security quickly, wordpress team have did a lot of work to make this more easier for developers.
How to Security Your WordPress Plugin?
When you want to avoid attack from un-authorized users, you can use WordPress Nonces, what is Nonces? It means “number used once”, it looks like a random number like ’43a45ab95c’(actually it is not a number, it is a hash made up of numbers and letters, the nonce is generated based on the current time), in your URLs or forms, if you use WordPress Nonces, you will find a “tail” like ” _wpnonce=43a45ab95c”, in server end, if the number is not right, you can stop insert data into your database or show more things to the un-authorized users, by this way you can stop “Cross Site Request Forgery“.
How to add WordPress Nonces in your plugin?
It is very easy, if you want to redirect user to a URL, in general we use ‘wp_safe_redirect’ function like this:
So you will redirect your users to https://tomas.zhu.bz/wp-admin/admin.php?page=Announcements
What you need to do is add a nonce tail in your URL, you can use codes like this:
$an_url = get_option(‘siteurl’) . ‘/wp-admin/admin.php?page=Announcements’;
$an_url = wp_nonce_url($an_url);
The function wp_nonce_url will add a wordpress Nonces for at the end of your URL, it will looks like this
And this will help to protect URLs from certain types of misuse, malicious or otherwise.
Also you will need use the similar method to protect your forms
If your plugin use forms, you need add WordPress Nonces too, this is very easy, just two steps:
1: Before the submit button, you need add something in your front end forms like this:
<?php wp_nonce_field(‘tomas_insert_messagebox’); ?>
This will generate codes like this automatically:
<input type=”hidden” id=”_wpnonce” name=”_wpnonce” value=”619dea88b4″>
2: In your server end, you need use function check_admin_referer in your $_POST process section, like this:
check_admin_referer( ‘tomas_insert_messagebox’ );
insert to your database;
your other codes;
the function check_admin_referer() will verify the nonce and if the data submitted from front end is not safe, check_admin_referer() will call wp_nonce_ays(), in the function wp_nonce_ays(), wp will detect your action, for example if you are try to log out from your site, WP will show a white panel and tell you “You are attempting to log out of Tomas Zhu“? Or something like ‘Are you sure you want to do this?’ and so on, finally, wordpress will return 403 with “WordPress Failure Notice”.
So it is very easy, right? Any more question please comment, I am happy to discuss with your. 🙂
Thanks dears, have a great day with your family. 🙂