Posts Tagged ‘HTML’

Optimize WordPress Pictures with EWWW Image Optimizer, Async JS and CSS and Autoptimize for better Search Engine Ranking

Tuesday, December 9th, 2014

 


wordpress-ewww-image-optimizer_settings_screenshot-plugin-seo-for-images-wp_3

While optimizing picture performance with console tools optipng, jpegoptin, jpegtran, pngcrush (could save you a lot of server space and make pictures downloads faster (and hence increase your website responsiveness and SEO – check out), still for Blogs and WebSites based on WordPress its not worthy to loose time with console acrobatics but simply use EWWW Image Optimizer to Optimize all old or new uploaded Images.

To work EWWW Image Optimizer needs jpegtran, optipng, pngout and gifsicle to be installed on the Linux / BSD server. EWWW Image Optimizer can load the command line tools also from a Cloud, if a cloud service is running on the server. Once installed the plugin does scan all the imported WordPress Media files and can be run to optimize picture files on present blog psot / pages.

EWWW Image Opitimizer plugin does a good job in reducing file size on  NextGEN, GRAND FlAGallery galleries.

wordpress-ewww-image-optimizer_settings_screenshot-plugin-seo-for-images-wp

Here is how EWWW Image Optimizer works taken from plugin's website:
How are JPGs optimized?

Lossless optimization is done with the command jpegtran -copy all -optimize -progressive -outfile optimized-file original-file. Optionally, the -copy switch gets the 'none' parameter if you choose to strip metadata from your JPGs on the options page. Lossy optimization is done using the outstanding JPEGmini utility.
It is better if the server has not the jpegtran, pngout, gifsicle utilities installed as the plugin provides an uptodate static compiled Linux binaries.

How are PNGs optimized?

There are three parts (and all are optional). First, using the command pngquant original-file, then using the commands pngout-static -s2 original-file and optipng -o2 original-file. You can adjust the optimization levels for both tools on the settings page. Optipng is an automated derivative of pngcrush, which is another widely used png optimization utility.

How are GIFs optimized?

Using the command gifsicle -b -O3 –careful original file. This is particularly useful for animated GIFs, and can also streamline your color palette. That said, if your GIF is not animated, you should strongly consider converting it to a PNG. PNG files are almost always smaller, they just don't do animations. The following command would do this for you on a Linux system with imagemagickconvert somefile.gif somefile.png

wordpress-ewww-image-optimizer_settings_screenshot-plugin-seo-for-images-wp

Some othe plugins that could strenghten your WordPress Search Engine Optimization ranking worthy to check are:
 

  • Async JS and CSS
     

Most importantly plugin solves "Render-blocking JavaScript and CSS" warning shown during site audit with  Google Developers PageSpeed InsightBy the way Google PageSpeed Insight is a precious tool so I recommend you check if you already haven't, Google's suggestions could often double or triple daily site visitors 

What Async JS and CSS does is:

Converts render-blocking CSS and JS files into NON-render-blocking, improving performance of web page

async_js_and_css_wordpress-plugin_configuration_menu

The plugin makes ALL scripts loaded by other plugins to be loaded in asynchronous. All CSS files will be inserted inline into the document code or moved from the document beginning to the end, just before closing BODY tag (or just where you placed wp_foot() function). There are various methods to do that via plugin configuration page.
 

  • Autoptimize

     

     

     

    Wordpress-Autoptimize-screenshot-a-plugin-to-minify-wordpress-html-js-and-css-scripts

Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.

What does the plugin do to help speed up site?

It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. Autoptimize is very much like WP Mnify (CSS / JS) minifaction WP plugin. The only difference and reason why you might want to use WP Mnify is it does HTML minification – something that WP Minify does not. Both plugins play nice together the only thing to be careful is not to configure CSS / JS minification in both Autoptimize and WP Minifyas this might slower instead of fasten the WP site.

A great bunch of other useful WP plugins to make a WordPress Blog friendly to Search Engines is here.

How to list Files in a directory and generate web URLS with PHP

Tuesday, April 10th, 2012

I needed a short PHP script that reads all, my .html files in a directory and then generates html a hrefs links pointing to each of the html files stored in the directory.

Here is the short code I come up:

$directory_to_open=”my-dir/”;
$max_files=100;
$i=0;
if ($handle = opendir(“$directory_to_open”)) {
while (false !== ($file = readdir($handle)) && $i <= $max_files)
{
$i=$i+1;
if ($file != “.” && $file != “..”)
{
$thelist .= ‘| ‘.str_replace(“.html”,””,$file).’ |’;
echo “$thelist”; }
}
closedir($handle);
}

In my case the directories with html were planned to contain, less than 100 files a directory, so in order to show links to only the first 100 files in the directory, I used the $max_files=100 and a check if value is reached in the while loop. For anyone who want to build html you see in above while if $max_files is reached then the while loop exits.

Because by default the files returned contained the naming format file_name.html, whether I wanted to show only the file name without the .html extensions used str_replace(); to get rid of file extensions string.

Check and Restart Apache if it is malfunctioning (not returning HTML content) shell script

Monday, March 19th, 2012

Check and Restart Apache Webserver on Malfunction, Apache feather logo

One of the company Debian Lenny 5.0 Webservers, where I'm working as sys admin sometimes stops to properly server HTTP requests.
Whenever this oddity happens, the Apache server seems to be running okay but it is not failing to return requested content

I can see the webserver listens on port 80 and establishing connections to remote hosts – the apache processes show normally as I can see in netstat …:

apache:~# netstat -enp 80
Active Internet connections (w/o servers)
Proto Recv-Q Send-Q Local Address Foreign Address State User Inode PID/Program name
tcp 0 0 xxx.xxx.xxx.xx:80 46.253.9.36:5665 SYN_RECV 0 0 -
tcp 0 0 xxx.xxx.xxx.xx:80 78.157.26.24:5933 SYN_RECV 0 0 -
...

Also the apache forked child processes show normally in process list:

apache:~# ps axuwwf|grep -i apache
root 46748 0.0 0.0 112300 872 pts/1 S+ 18:07 0:00 \_ grep -i apache
root 42530 0.0 0.1 217392 6636 ? Ss Mar14 0:39 /usr/sbin/apache2 -k start
www-data 42535 0.0 0.0 147876 1488 ? S Mar14 0:01 \_ /usr/sbin/apache2 -k start
root 28747 0.0 0.1 218180 4792 ? Sl Mar14 0:00 \_ /usr/sbin/apache2 -k start
www-data 31787 0.0 0.1 219156 5832 ? S Mar14 0:00 | \_ /usr/sbin/apache2 -k start

In spite of that, in any client browser to any of the Apache (Virtual hosts) websites, there is no HTML content returned…
This weird problem continues until the Apache webserver is retarted.
Once webserver is restarted everything is back to normal.
I use Apache Check Apache shell script set on few remote hosts to regularly check with nmap if port 80 (www) of my server is open and responding, anyways this script just checks if the open and reachable and thus using it was unable to detect Apache wasn't able to return back HTML content.
To work around the malfunctions I wrote tiny script – retart_apache_if_empty_content_is_returned.sh

The scripts idea is very simple;
A request is made a remote defined host with lynx text browser, then the output of lines is counted, if the output returned by lynx -dump http://someurl.com is less than the number returned whether normally invoked, then the script triggers an apache init script restart.

I've set the script to periodically run in a cron job, every 5 minutes each hour.
# check if apache returns empty content with lynx and if yes restart and log it
*/5 * * * * /usr/sbin/restart_apache_if_empty_content.sh >/dev/null 2>&1

This is not perfect as sometimes still, there will be few minutes downtime, but at least the downside will not be few hours until I am informed ssh to the server and restart Apache manually

A quick way to download and set from cron execution my script every 5 minutes use:

apache:~# cd /usr/sbin
apache:/usr/sbin# wget -q http://www.pc-freak.net/bscscr/restart_apache_if_empty_content.sh
apache:/usr/sbin# chmod +x restart_apache_if_empty_content.sh
apache:/usr/sbin# crontab -l > /tmp/file; echo '*/5 * * * *' /usr/sbin/restart_apache_if_empty_content.sh 2>&1 >/dev/null

 

How to disable tidy HTML corrector and validator to output error and warning messages

Sunday, March 18th, 2012

I've noticed in /var/log/apache2/error.log on one of the Debian servers I manage a lot of warnings and errors produced by tidy HTML syntax checker and reformatter program.

There were actually quite plenty frequently appearing messages in the the log like:

...
To learn more about HTML Tidy see http://tidy.sourceforge.net
Please fill bug reports and queries using the "tracker" on the Tidy web site.
Additionally, questions can be sent to html-tidy@w3.org
HTML and CSS specifications are available from http://www.w3.org/
Lobby your company to join W3C, see http://www.w3.org/Consortium
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 1 column 1 - Warning: plain text isn't allowed in <head> elements
line 1 column 1 - Info: <head> previously mentioned
line 1 column 1 - Warning: inserting implicit <body>
line 1 column 1 - Warning: inserting missing 'title' element
Info: Document content looks like HTML 3.2
4 warnings, 0 errors were found!
...

I did a quick investigation on where from this messages are logged in error.log, and discovered few .php scripts in one of the websites containing the tidy string.
I used Linux find + grep cmds find in all php files the "tidy "string, like so:

server:~# find . -iname '*.php'-exec grep -rli 'tidy' '{}' ;
find . -iname '*.php' -exec grep -rli 'tidy' '{}' ; ./new_design/modules/index.mod.php
./modules/index.mod.php
./modules/index_1.mod.php
./modules/index1.mod.php

Opening the files, with vim to check about how tidy is invoked, revealed tidy calls like:

exec('/usr/bin/tidy -e -ashtml -utf8 '.$tmp_name,$rett);

As you see the PHP programmers who wrote this website, made a bigtidy mess. Instead of using php5's tidy module, they hard coded tidy external command to be invoked via php's exec(); external tidy command invocation.
This is extremely bad practice, since it spawns the command via a pseudo limited apache shell.
I've notified about the issue, but I don't know when, the external tidy calls will be rewritten.

Until the external tidy invocations are rewritten to use the php tidy module, I decided to at least remove the tidy warnings and errors output.

To remove the warning and error messages I've changed:

exec('/usr/bin/tidy -e -ashtml -utf8 '.$tmp_name,$rett);

exec('/usr/bin/tidy --show-warnings no --show-errors no -q -e -ashtml -utf8 '.$tmp_name,$rett);

The extra switches meaning is like so:

q – instructs tidy to produce quiet output
-e – show only errors and warnings
–show warnings no && –show errors no, completely disable warnings and error output

Onwards tidy no longer logs junk messages in error.log Not logging all this useless warnings and errors has positive effect on overall server performance especially, when the scripts, running /usr/bin/tidy are called as frequently as 1000 times per sec. or more

How to resolve (fix) WordPress wp-cron.php errors like “POST /wp-cron.php?doing_wp_cron HTTP/1.0″ 404” / What is wp-cron.php and what it does

Monday, March 12th, 2012

fix wordpress wp-cron.php 404 HTTP error, what is wp-cron.php schedule logo

One of the WordPress websites hosted on our dedicated server produces all the time a wp-cron.php 404 error messages like:

xxx.xxx.xxx.xxx - - [15/Apr/2010:06:32:12 -0600] "POST /wp-cron.php?doing_wp_cron HTTP/1.0

I did not know until recently, whatwp-cron.php does, so I checked in google and red a bit. Many of the places, I've red are aa bit unclear and doesn't give good exlanation on what exactly wp-cron.php does. I wrote this post in hope it will shed some more light on wp-config.php and how this major 404 issue is solved..
So

what is wp-cron.php doing?

 

  • wp-cron.php is acting like a cron scheduler for WordPress.
  • wp-cron.php is a wp file that controls routine actions for particular WordPress install.
  • Updates the data in SQL database on every, request, every day or every hour etc. – (depending on how it's set up.).
  • wp-cron.php executes automatically by default after EVERY PAGE LOAD!
  • Checks all pending comments for spam with Akismet (if akismet or anti-spam plugin alike is installed)
  • Sends all scheduled emails (e.g. sent a commentor email when someone comments on his comment functionality, sent newsletter subscribed persons emails etc.)
  • Post online scheduled articles for a day and time of particular day

Suppose you're writting a new post and you want to take advantage of WordPress functionality to schedule a post to appear Online at specific time:

What is wordpress wp-cron.php, Scheduling wordpress post screenshot

The Publish Immediately, field execution is being issued on the scheduled time thanks to the wp-cron.php periodic invocation.

Another example for wp-cron.php operation is in handling flushing of WP old HTML Caches generated by some wordpress caching plugin like W3 Total Cache
wp-cron.php takes care for dozens of other stuff silently in the background. That's why many wordpress plugins are depending heavily on wp-cron.php proper periodic execution. Therefore if something is wrong with wp-config.php, this makes wordpress based blog or website partially working or not working at all.
 

Our company wp-cron.php errors case

In our case the:
212.235.185.131 – – [15/Apr/2010:06:32:12 -0600] "POST /wp-cron.php?doing_wp_cron HTTP/1.0" 404
is occuring in Apache access.log (after each unique vistor request to wordpress!.), this is cause wp-cron.php is invoked on each new site visitor site request.
This puts a "vain load" on the Apache Server, attempting constatly to invoke the script … always returning not found 404 err.

As a consequence, the WP website experiences "weird" problems all the time. An illustration of a problem caused by the impoper wp-cron.php execution is when we are adding new plugins to WP.

Lets say a new wordpress extension is download, installed and enabled in order to add new useful functioanlity to the site.

Most of the time this new plugin would be malfunctioning if for example it is prepared to add some kind of new html form or change something on some or all the wordpress HTML generated pages.
This troubles are result of wp-config.php's inability to update settings in wp SQL database, after each new user request to our site.
So the newly added plugin website functionality is not showing up at all, until WP cache directory is manually deleted with rm -rf /var/www/blog/wp-content/cache/

I don't know how thi whole wp-config.php mess occured, however my guess is whoever installed this wordpress has messed something in the install procedure.

Anyways, as I researched thoroughfully, I red many people complaining of having experienced same wp-config.php 404 errs. As I red, most of the people troubles were caused by their shared hosting prohibiting the wp-cron.php execution.
It appears many shared hostings providers choose, to disable the wordpress default wp-cron.php execution. The reason is probably the script puts heavy load on shared hosting servers and makes troubles with server overloads.

Anyhow, since our company server is adedicated server I can tell for sure in our case wordpress had no restrictions for how and when wp-cron.php is invoked.
I've seen also some posts online claiming, the wp-cron.php issues are caused of improper localhost records in /etc/hosts, after a thorough examination I did not found any hosts problems:

hipo@debian:~$ grep -i 127.0.0.1 /etc/hosts
127.0.0.1 localhost.localdomain localhost

You see from below paste, our server, /etc/hosts has perfectly correct 127.0.0.1 records.

Changing default way wp-cron.php is executed

As I've learned it is generally a good idea for WordPress based websites which contain tens of thousands of visitors, to alter the default way wp-cron.php is handled. Doing so will achieve some efficiency and improve server hardware utilization.
Invoking the script, after each visitor request can put a heavy "useless" burden on the server CPU. In most wordpress based websites, the script did not need to make frequent changes in the DB, as new comments in posts did not happen often. In most wordpress installs out there, big changes in the wordpress are not common.

Therefore, a good frequency to exec wp-cron.php, for wordpress blogs getting only a couple of user comments per hour is, half an hour cron routine.

To disable automatic invocation of wp-cron.php, after each visitor request open /var/www/blog/wp-config.php and nearby the line 30 or 40, put:

define('DISABLE_WP_CRON', true);

An important note to make here is that it makes sense the position in wp-config.php, where define('DISABLE_WP_CRON', true); is placed. If for instance you put it at the end of file or near the end of the file, this setting will not take affect.
With that said be sure to put the variable define, somewhere along the file initial defines or it will not work.

Next, with Apache non-root privileged user lets say www-data, httpd, www depending on the Linux distribution or BSD Unix type add a php CLI line to invoke wp-cron.php every half an hour:

linux:~# crontab -u www-data -e

0,30 * * * * cd /var/www/blog; /usr/bin/php /var/www/blog/wp-cron.php 2>&1 >/dev/null

To assure, the php CLI (Command Language Interface) interpreter is capable of properly interpreting the wp-cron.php, check wp-cron.php for syntax errors with cmd:

linux:~# php -l /var/www/blog/wp-cron.php
No syntax errors detected in /var/www/blog/wp-cron.php

That's all, 404 wp-cron.php error messages will not appear anymore in access.log! 🙂

Just for those who can find the root of the /wp-cron.php?doing_wp_cron HTTP/1.0" 404 and fix the issue in some other way (I'll be glad to know how?), there is also another external way to invoke wp-cron.php with a request directly to the webserver with short cron invocation via wget or lynx text browser.

– Here is how to call wp-cron.php every half an hour with lynxPut inside any non-privileged user, something like:
01,30 * * * * /usr/bin/lynx -dump "http://www.your-domain-url.com/wp-cron.php?doing_wp_cron" 2>&1 >/dev/null

– Call wp-cron.php every 30 mins with wget:

01,30 * * * * /usr/bin/wget -q "http://www.your-domain-url.com/wp-cron.php?doing_wp_cron"

Invoke the wp-cron.php less frequently, saves the server from processing the wp-cron.php thousands of useless times.

Altering the way wp-cron.php works should be seen immediately as the reduced server load should drop a bit.
Consider you might need to play with the script exec frequency until you get, best fit cron timing. For my company case there are only up to 3 new article posted a week, hence too high frequence of wp-cron.php invocations is useless.

With blog where new posts occur once a day a script schedule frequency of 6 up to 12 hours should be ok.

 

Test your web browser compatability with Acid3 test

Wednesday, January 25th, 2012

Acid3 Test is a group of browser compitability tests. Acid3 test is a good indicator on how Web ready is your browser.

Acidtest is part of the web standards project. Latest Firefox 9.0.1 passes the test on 100% (100/100).
I've tried it with Epiphany and it scored only 67/100, still I'm using Epiphany on daily basis and I'm quite happy with it.
Acid3 browser compitability Test Firefox 9.0.1
The tests involved are testing browser for:
 

  • DOM
  • DOM2
  • Checks on HTML tables and forms browser rendering
  • SVG compitability testing
  • DOM1 and DOM2 compitability
  • Various ECMA Script Javascript compitability tests
  • Unicode (UTF-16 and UTF-8) browser compitability
  • XHML, SMIL, CSS, HTML compitability
  • Content-type image/png, text plain etc.

Acid3 browser test fail
The Acid3 test is written itself in Javascript. It consists of 6 testing "stages" (buckets) upon which the browser tested is evaluated.
Each of the test is represented visually by a rectangle. If the a test stage is passed you see a new rectangle appearing in the tested browser.
In wikipedia, there is a thorough list with web browsers by type and engine and the level of support for the Acid3 test.
The test is of great use if you're web developer.

How to convert SVG to PNG graphic formats (using GUI and console) on GNU / Linux and FreeBSD

Wednesday, December 7th, 2011

SVG to PNG Convert on GNU / Linux FreeBSD using command and GUI

I’ve playing trying to learn InkScapeThe Open Source vector graphic editor .By so far I’m quite impressed on how easy this program is learned and how easy graphical manipulation with this nifty program can be done.
The default format in which InkScape saves its files is SVG (Scalable Vectors Graphics). For all those unfamiliar with SVG – SVG is an open (free format) format developed in 1999 which insetad of containing binary data like PNG or JPEG does contain plain XML content. SVG being consisted of plain XML has multiple advantageous, the most important one makes it easy for text and visual data to be displayed among different program svg readers in absolutely identical way. Besides that the format if read with plain text editor like vim or emacs can be altered directly via the source.
Being multi system interoperable makes SVG as a great format for text and visual data storage in HTML5, actually SVG is already a part of the HTML5 html coding standard. And most probably its adoption rate will raise up drastically as soon as HTML5 starts substitute HTML4 and lower web standards.

Anyways I’m slipping away from the aim of this post so I’ll stop blabbering on how great SVG is and let people check it out for themselves (if not already).

Going back to the aim of my article to show How to convert SVG to PNG graphical extension on GNU / Linux and FreeBSD

After producing a bunch of files with InkScape I realized the default format in which Inkscape stores its files is SVG , this was okay with me but since I wanted to have my experimental produced content in PNG I needed a way to convert SVG to
My first logical guess was that The Gimp will be able to handle the situation and after opening my SVG file with GIMP and used the gimp File -> Save As option and give the SVGfile an extension of PNG , Gimp succesfully converted the file to PNG.

However I wanted to dig further and check out what is the standard accepted way to convert SVG files using a plain command. This will possibly be handy to me if I had to do something online (let’s say a website) which will accept SVG and will require the SVG files to be converted and also stored in PNG or other Graphic file formats.

After checking online, I’ve found a post which pointed me to librsvg2 which contains RSVG(Turn SVG files into raster images.)

librsvg is available as a package in most mainstream Linux distributions nowdays, Fedora, Debian etc., as well as contains a port inside the FreeBSD ports system. Since I’m using Debian on my notebook where I installed and tested the command line SVG to PNG convertion the way I did it is:

noah:/home/hipo/Desktop# apt-get --yes install librsvg2-bin
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following NEW packages will be installed:
librsvg2-bin
0 upgraded, 1 newly installed, 0 to remove and 16 not upgraded.
Need to get 72.5 kB of archives.
After this operation, 180 kB of additional disk space will be used.
Get:1 http://ftp.nl.debian.org/debian/ squeeze/main librsvg2-bin amd64 2.26.3-1 [72.5 kB]
Fetched 72.5 kB in 0s (184 kB/s)
Selecting previously deselected package librsvg2-bin.
(Reading database ... 376046 files and directories currently installed.)
Unpacking librsvg2-bin (from .../librsvg2-bin_2.26.3-1_amd64.deb) ...
Processing triggers for man-db ...
Setting up librsvg2-bin (2.26.3-1) ...

Afterwards the exact convertion of my Inscape SVG file drawing.svg to drawing.png using rsvg I’ve done like so:

hipo@noah:~/Desktop$ rsvg drawing.svg drawing.png

The convertion results for me was 100% uniqueness between the file converted and the output PNG. Some people might wonder why I didn’t used Inkscape’s Export to Bitmap function and then use convert command part of ImageMagick in order to convert the produced Inkscape bitmap to PNG.

 

One other thing worthy to mention is on  Debian,  librsvg2-bin contains 2 more executable besides rsvg. One is the rsvg-view command which allows one to view SVG files using command line or Graphic enviroment, the other one is rsvg-convert which supports again SVG convertion to PDF and to PNG

Before proceeding with the other described ways to convert SVG to PNG earlier in this article, I give a try to Inkscape’s Export to Bitmap embedded function but the produced bitmap did not resembled the original SVG file so I decided to completely abandon this method
Maybe there is some particular reason of the chaotic way I’ve tested Inkscape to place random images sometimes going out of the field of a paper etc. which influenced the improper generation of Bitmap using Inkscape, despite that it seems InkScape needs some more development until the bugs in Bitmap producing get fixed and it can be freely used to produce Bitmaps.

Maybe there is some particular reason for the failure of Inkscape to produce a good BMP file, like for example the chaotic way I’ve tested Inkscape to place random images sometimes going out of the field of a paper borders etc.This should have influenced the improper generation of Bitmap using Inkscape, anyhow it seems InkScape needs some more development until the bugs in Bitmap creation get fixed.

By the way if you’re wondering how to convert PNG to bitmap BMP after, once having converted SVG to PNG this is easily doable with convert command, like so:

hipo@noah:~/Desktop$ convert drawing.png drawing.bmp

Maybe in future releases it will be a good idea if InkScape developers integrate a convertion to other formats this will make it handy and make surely these nice program more popular among users. Hope this is helpful. Cheers and as RMS likes to say Happy Hacking 😉

How to link WordPress Post or Page Title to external URL website address

Monday, October 24th, 2011

I needed to link a new created WordPress Post to external web page address. So when one clicks over the created post he opens an external website.

I’ve googled around to see how this can be achieved and found ordpress external links plugin
I gave a go of the plugin, but pitily I couldn’t make it work. I decided to try some other methods and after some time I tried another approach. I used the HTML >a href=””< My Post Title </a> as a title and it appeared this simple method prooved working 😉

Here is a small screenshot, from wordpress Add New Post dialog

By the way the information online I’ve found on how this the external link creation for a Page or a Post is made was quite obscure and messy. i wonder why there is no clear explanation on the direct a href link creation, especially since WordPress is a de-facto standard for a blogging platform and nowdays powers up so many websites engines around the world.

How to change default Comments and No Comments location in WordPress in wordpress default theme

Tuesday, April 5th, 2011

For a number of time I’ve been planning to change my blog comments placement. Until this very day however I’ve kept the default wordpress theme’s Comments button placement.

I realize the default Comments button placement is a bit hard to see and not that much intuitive for the user that enters my blog for a first time.

My first guess was that there might be somewhere a wordpress plugin which will allow me to adjust my comments button placement.
After some research online and a realization that probably there is no such plugin existing yet. I’ve forced myself to tune it up myself.

It was clear to me that in order to change the it will be necessery to edit the WordPress templates files. I’m not a designer and when I hear about templates I usually get scared, however I took the time to take a look at the default wordpress template and find out actually that template modifications is actually rather easier than I thought.

My previous idea was that in order to edit templates you have to be some kind of CSS and HTML guru (which I’m not). Nevertheless it seems that in order to play and adjust in a good way the templates you don’t need ot be a pro.
Even an uneducated fool like myself can easily do almost everything he thinks of throughout few lines of code in the wp templates.

To get back to the major topic thanks God after a bit of review and reading of wordpress.org documentation and some user forums. I’ve figured out that in order to change my Comments placement you need to modify the file:
 

  • blog/wp-content/themes/default/index.php

In index.php find the line starting with:

You will notice within this opened paragraph the php code:

<?php the_tags('Tags: ', ', ', '
'); ?> Posted in <?php the_category(', ') ?>
| <?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

This is the actual default theme php code that makes the wordpress Comments or No Comments that maes the comments appear on the blog.

Now I’ve decided to let this be as it is but add one more Comment button to wordpress on a different location that is more appealing to my blog visitors

After quick evaluation I’ve determined that probably the best location that the Comments button should have is right after the end of the post text

If you think my idea for button placement is appropriate, to set this location for the Comments button, you will have to find the follwoing code in index.php:

<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>

Right after the end of this code place the following code:

<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
</div>