How to install XAMPP in Linux and make WordPress update work perfectly!

We have all been there... when we try to update something in Wordpress in Linux and it does not update. Even debug.log does not create. It is most of the time a permission issue. But Windows does not suffer from it. So, why should Linux have this issue? Fear not, we have a solution!

Step 1: Install XAMPP (LAMPP)

If you have not installed XAMPP yet on your linux machine, then first do so. I have written a tutorial here.

Step 2: Create Group for XAMPP Users and put yourself in!

* Replace "username" with your username.

sudo groupadd xamppusers
sudo usermod -a -G xamppusers username
groups username

The last command will show you the groups that your username is in. If you have xamppusers group in the list, then you are good.

Step 3: Own the files!

Run this:

cd /opt/lampp
sudo chown -R username.xamppusers htdocs
sudo chmod -R 775 htdocs

This will relax the file permissions of your htdocs folder, so you have less trouble. And also change the owners to the username you chose. You will taste great feedoms when editing files and modifying files with php after this.

Step 4: Edit the httpd.conf

httpd.conf is the configuration file for Apache.

First backup the conf file:

sudo cp /opt/lampp/etc/httpd.conf /opt/lampp/etc/httpd.conf.bak

Edit the file:

sudo nano /opt/lampp/etc/httpd.conf

You will find two lines saying something like this:
Tip: You can press Ctrl+W, type user daemon and press enter to find it quickly.

User daemon
Group daemon

Replace it with your values, something like this:

User username
Group xamppusers

Step 5: Restart XAMPP

This step is very important. If you do not do this the changes you made in httd.conf file will not be taken.

sudo /opt/lampp/lampp restart

or, use the GUI Control Panel if you have it.

Bonus Tip: Accessing htdocs from home directory

ln -s /opt/lampp/htdocs/ ~/htdocs

You will then be able to see a link to the "htdocs" folder in your home folder. This is so convenient for accessing files on htdocs.

Conclusion

After doing all this hard work you will be able to install Wordpress without any permission issues whatsoever. Also update Wordpress without any problem.

Plugin update also works!

Wordpress: How to simply Ajaxify your theme, any theme, with jQuery

For one of my new projects I needed to re-develop a online radio website. The website would have a a radio player. Radio player would be Flash-based.

The problem with these type of project is that Radio players usually stop when navigating through pages. This is normal because when the page is loaded, everything, including the player gets re-loaded. I wanted to improve it. So I decided on doing a page load through Ajax, so that pages don't load, but only their content loads every time user switches pages. Other components would stay in its place. The content would only load in its own div.

I searched for a Ajax powered Wordpress theme in wordpress.org. (For security reasons, it is better to only use themes from wordpress.org and not from anywhere else.) But with no luck I stopped searching.

Then a brilliant idea came to my brain with a bright light above my head. With jQuery Ajax Library it is possible to loop through each and every URL in a page. So we could add javascript code to them and replace the default behavior of navigating to a URL with something we want.

$('a').click(function(event){
            event.preventDefault(); //this will stop from navigating to its href URL

            // do something...

            // load content with Ajax or something...

});

It is also possible to load a pages content through .load() function. With the load function we can even

So, it comes down to this:
1. we loop through all the a tags in the page
2. Stop their default behavior of opening an URL
3. We load the target url's content in a div

And as always I put my code in the footer.php of my Twenty Eleven theme. You can use anyother theme. But there are some things to modify. I'll indicate them later, don't worry.

The first code I written was this:

        $('a').click(function(event){
            event.preventDefault();
                      
            $( "#main" ).load( $(this).attr('href') + " #main" );
            
        });

The Twenty Eleven theme has its main content (without the sidebar etc.) in a div that has id "main". We can use load function to load only a specific part of a URL's content like this:

.load( "http://www.example.com #main" );

We have used this technique to load the #main div of the target page. This should be changed according to your theme.

It works, but only for the first time. After the content is loaded, the <a> tags in the newly loaded content does not work. It is maybe because the jQuery script had attached the Click event on the page, not the content load. So the newly loaded URLs need to be re-attached with the event.

So, I have modified the code like this:

<script type="text/javascript">
jQuery(document).ready(function($) {
    function bb() {
        $( "a" ).unbind();
        $( "a" ).bind( "click", function( ev ) {
                            ev.preventDefault();
                            $( "#main" ).load( $(this).attr('href') + " #main", bb );
                            return false;
        });
    }
    bb();

});
</script>

This code above binds the click event everytime the content gets loaded. It also unbinds all previous events assigned to it.

The code is highly experimental. I am still testing it. It may have some problems with <a> tags with javascript code. It also breaks on Dashboard links (such as post "edit" link). And who knows what. So use it in your own risk! But the reward of using this code is far better, right? With some simple lines of code you can Ajaxify your content.