Search the Community

Every website developer needs to do some basic tasks related to web-development. Among the important ones is looking for new ways to improve website's user experience as well as keeping it secure with the latest updates and patches. And all this needs to be done without affecting the availability of the website for a single minute. That is why, most web developers like to create local test labs that mimic their online websites and in this way they can test new stuff in their local labs without affecting the availability of the website to the general public. In this post, I will talk about creating local wordpress lab that will be very handy for web developers who use wordpress platform (the most famous framework for websites and blogs).. The main reason for me to create such a lab was to work on my current wordpress theme, which because of some obscure reason was having difficulties with the latest wordpress platform update. With such a local environment, I was able to workout a method whereby I got to keep my theme as well as update to the latest wordpress version, and all this without affecting the availability of my website for a single minute. Different ways to create a local wordpress lab: There are a number of different ways to create a local wrodpress lab (and almost all of them are well-documented online).. However, I personally felt that the lab should be as similar to the actual website as possible, not only in terms of look and feel but also other ways such as how I connect to my website, how I access different files and folders, how I edit them etc. In short, I wanted my lab to behave in such a way that it feels as if I am working on my real website. Local installation of wordpress can be done in different ways. The most common method is to install and setup apache, php, mysql ect on your local machine and then use these services to run wordpress. This method can be simplified by installing WAMP (a package containing Apache, Mysql, Php together, making the installation and configuration easy) on windows or LAMP on linux. Another method of a local wordpress installation is using a package called “InstantWP”. It is also a modification of the above method but is made in such a way that installation and setting up is as painless as few mouse clicks. Furthermore, it also gives you a nice interface for doing different tasks easily. Another method, which is not as simple as those described above, is using a virtual machine to create a server which would then host the local wordpress website. I would like to emphasise again that for most users, setting up such a lab will not be the easiest of tasks. However, this is the method I like the most and in this tutorial I have described in detail how to create such a lab. There are two main reasons why I like this method the most: 1. The main operating system which I use for my normal work is affected minimally by this method (I need only to install Virtual box or Vmware). And thus the need to turn my main OS into a server is avoided. It also provides a sandboxed environment where if something goes wrong, can be corrected easily and even can be reset without affecting the main OS. Thus my main OS remains clean and stable and I can work without worries of damaging it. 2. The second reason is that by creating a local lab using virtual server, I am able to mimic the actual experience of working on my real website as closely as possible. I normally access my website via FTP, and this is how I would be doing it in my local lab. Furthermore, I can also create a cPanel for this local website similar to the actual website, which makes it feel like I am working on my real website. And it really feels good. So I wouldn't mind doing some extra work in the beginning to have a better experience in the longer run... Setting up a virtual server: The first thing that needs to be done to setup our lab is to create a virtual server and for this we first need to create a virtual machine. Two most commonly used applications for creating virtual machines are Oracle Virtual Box and VMware workstation. The first one is Open Source and the second is commercial but a bit more polished, but both work fine. I personally use VMware, but the steps are similar for both applications. Before creating a virtual machine, you need to decide which OS to use for your server. There are many choices, but for me Ubuntu server is the winner. It is free and does a great job and also has a huge database of support available for it. So go ahead and download Ubuntu server 12.04 LTS … I won't go into the details of how to create a virtual machine and install an OS onto it but I must say that the overall process is very simple (maybe I shall write another tutorial for this). You just need to follow the prompts. One point specific to the ubuntu server installation is that during installation it will ask for which services you need to install. For our needs, we just need the ubuntu basic server, SSH server and LAMP server. However, if you miss it during installation, you can do it later.... No worries One thing that need to be understood here is that ubuntu server (and many other pure server linux distros) don't have a graphical interface by default. i.e. you are just presented with a black command line screen and you have to do all your work via this command line interface. Graphical interface (Desktop) can be installed, rather easily, but I would advise against it because it is resource intensive and won't be of much use for a server. First thing's First: Update and Upgrade: After the installation is complete, the first thing you need to do is update the system.. Use the following commands: sudo apt-get updateand then sudo apt-get dist-upgradeThis will make sure that you have the latest and greatest services running. Firewall: After updating your server, make sure that the firewall is enabled. Issue the following command: sudo ufw enableAnd then make sure that firewall is allowing HTTP (port 80) and SSH (port 22) traffic. Use the following commands: sudo ufw allow 80sudo ufw allow 22 Required Services: Once the firewall is ready and configured, we need to make sure that require server services are installed. Use the following command: sudo taskselYou will be greeted with a prompt similar to following picture Make sure that “Basic Ubuntu Server”, “OpenSSH Server”, and “LAMP Server” are installed. The Basic Ubuntu Server and LAMP server are for the normal server functionality needed to host our wordpress website. The OpenSSH server is to make accessing the server easier. It enables us to use services like SSH (to directly commnicate with the server) and FTP (for file transfer). Connect to your virtual machine over SSH: There are two main reasons for using SSH. First one is to safely communicate with your server without the need of opening the virtual machine again and again i.e. the vitual machine can run silently in the background and to communicate with it, you would just need to use an SSH client (e.g. Putty). The second reason is to make our FTP secure. FTP is inherently insecure but by using FTP over SSH, we can create a secure way to use this protocol. To connect over SSH, we will use Putty. To establish a connection, you just need to know the IP address of the virtual machine, which you can easily get by command: ifconfigOnce you get the IP address (mine was: 192.168.188.120) you just provide it into putty and then login using the username and password of your virtual machine... Connect via FTP: FTP is a great way of connecting to a server for uploading and downloading files. For this tutorial, we will use Filezilla FTP client. So open up FileZilla and just provide the information it requires i.e. host: IP address of your virtual machine (in my case: 192.168.188.120) Username: username of your virtual machine user Password: Password of the user Port: Since we will be connecting over secure SSH port so use 22 After you click quick connect, the connection will be established. However there is one issue. The default directory to which FTP connects is “/home/username” however, the files for web browser (port 80) are in “/var/www”. So we need to create a symbolic link to /var/www folder in our /home/username folder so that we can easily access the files for our website. To do this issue the following command: sudo ln -s /var/www /home/pseudo/www(pseudo is my username) Now when you look at filezilla, there would be www shortcut visible... this is where we will place our wordpress files. Download wordpress: Next thing you need to do is download latest wordpress from wordpress.org. Once, downloaded, you need to extract the contents from the zip file into a folder. Change ownership of /var/www folder: To be able to edit the contents of /var/www folder on your server via FTP, you need to change the ownership of this folder and assign it to the user whose credentials are used for logging in via FTP. Normally, this folder belongs to the root user and even a normal user cannot edit its contents directly (i.e. without sudo). But in our case we need our user (“pseudo” in my case) to be able to add and delete files to this folder and also edit the files so that we can do this via FTP.. To change the ownership, use the following command: sudo chown user-name:user-name /var/wwwReplace user-name with your actual user name (I replaced it with pseudo: sudo chown pseudo:pseudo /var/www Upload wordpress files to your virtual server: Connect to your server via Filezilla and open the “www” directory. Make sure that you have deleted the “index.html” file in /var/www. Then upload all the contents of the wordpress folder to /var/www. Check via Browser: Then open up your browser and navigate to the IP address of your virtual server. In my case it was 192.168.188.120 … If everything has gone well, you will be welcomed by wordpress welcome screen. <a href='http://postimage.org/'target='_blank'> <img src='http://s6.postimg.org/yungr6oct/wordpress_welcome_screen.jpg'border='0' alt="wordpress welcome screen" /></a> Once you see this welcome message, you know that everything uptil now has worked fine. Create mysql databse for your wordpress website: Next thing we need to do is create a mysql database and user for our wordpress website.. Use the following commands: sudo su (this will change your prompt to root, so that you can access mysql) mysql -p (this will ask you for a password. Enter the password you used while installing mysql (in LAMP package)) CREATE USER 'wordpress'@'localhost' IDENTIFIED BY 'wordpress';SET PASSWORD FOR 'wordpress'@'localhost' = PASSWORD('yourpassword');CREATE DATABASE wordpress;GRANT ALL PRIVILEGES ON wordpress.* to wordpress@localhost;quitThis will create a user "wordpress", then set password for this user and then create a database. In the last it grants all the required privileges to this user. Start the wordpress installation in your browser: Once you have created the database, enter the IP address of your virtual machine in the browser once again. Then start the wordpress installation. First it will ask you for the datase name, user name, password, and database host etc. Enter the information and click submit Usually, this would create the config file for you but sometimes things might not go as expected and the file may not be created automatically. In such a case, you will be presented with a page as shown below: You just need to create a file named “wp-config.php” and copy the code presented in the page (as in picture above) into the file. Place this file with the rest of the files (i.e. where you have put wordpress files on your virtual server). Then click “Run the Install” After this you will be presented with another welcome screen, where you need to provide information about your local wordpress website. Enter the required information and click “Install wordpress” If everything goes right, you will be presented with a success message. Then login to the website using the credentials you provided earlier and you will be presented the dashboard of your local wordpress website... thats it... Extra tip: To access your website, you need to provide the IP address of your virtual server, which is kind of ugly and inefficient. This can be made very attractive and efficient. You just need to edit the following file: C:\Windows\System32\drivers\etc\hosts Add the following line at the bottom of the file: 192.168.188.120 mylab (Note: I have used 192.168.188.130 in the picture shown.. don't be confused, just use your virtual machine's IP address) and then save it... Next time you just enter “mylab” into the address bar of your browser, you will be able to see your local wordpress website.. Great !!! What we achieved: After all this hassle, we created ourselves a greate testing environment. We created a local wordpress website that behaves just as our orginal website on the internet. It is hosted on a separate server and we can play with it as much as we like without the worry of damaging our working computer. Disclaimer: I have personally created this tutorial while actually following each step as mentioned. And I confirm that it is 100% working. If there is any mistake in this tutorial (due to some typing error etc) please let me know.... Suggestions on how to improve it are also welcome... Thanks...

In keeping up with reviewing Wordpress books, I have another book that I would like to talk about and it is called “Web Designer’s Guide to Wordpress” by Jesse Friedman and if you read my Wordpress: Missing Manual Review I am a person who has gone beyond the basics of Wordpress and want to design Wordpress templates. That is where this book comes in as this picks up where The Missing Manual book left off and gets your hands dirty right away. One thing I like about this book is that it sections off the Wordpress template quite nicely and it should because Wordpress is a bit complex and each section of Wordpress like the Header, Sidebar, Footer, Pages, and navigation each have a specific focus with very specific needs. In short you have to understand how they function independently first and then once you do that you can begin learning how they function together. Sure, you can skip all that and plug the code in and get a fancy website up and running. However, with HTMl5 being the new king of web design, you kind of have to take a few steps back and relearn everything. Yes, I know, for some they are Gods of coding and pointing and laughing so this guy is a moron, but if you want to design a website the right way and with the least amount of problems I hope you think about my words for a second. Though, I will point out that you can still use XHTML as most of the code you will be dealing with will be in PHP. With that in mind, let’s talk about the book. Friedman does, in my opinion, a good job breaking down everything and more importantly giving the reader ample time to learn about them. It is not a tell-all book or a Bible not at 271 pages but it gives you enough information to work with and get a Wordpress template up and running in no time. Interesting note about this book is he provides a chapter on working with Responsive Design. He doesn’t go too deep about the topic but from reading this particular chapter is that you need to take a cautionary approach with designing a Responsive Wordpress template because of Wordpress interprets HTML. I would think most Wordpress designers would agree that more time is needed when putting a Responsive layout together just because it doesn’t take much to break a website that is controlled mostly by PHP. Overall, this is a good starting book to start designing Wordpress themes and obviously there are quite a few books out that cover this topic. Nonetheless, this book is small enough to prevent you from scratching your head or making things more complicated than they need be. It’s a good easy ready but if you’re looking for more technical stuff Wrox’s Wordpress books will provide that.

I have been working in the Wordpress environment for a few years now and I would say that I pretty good at using this CMS at setting quality websites. Granted, I wish I would have the patience to create and code templates but I would be wasting more time figuring out what I would want my website to have and not have. That being said, when I got my copy of Wordpress: The Missing Manual, I have been a fan of the series as the books are well detailed and really help get a beginner going on a specific topic. That is the case with this book as it covers everything you need to know about running your website or blog on the Wordpress platform. I don’t consider myself an expert in any way, but a majority of the book is kind of useless to me, web designers, and bloggers who use Wordpress. I am sure there could be tidbits of information that I may not be aware about but at the same time, I can keep myself more up-to-date on the Wordpress website or various blogs that talk about Wordpress. As for those who are experienced with Wordpress or want to get more out of it than what they have now, then sections three for five would be more practical sections of book to read, especially if you are looking to design your own Wordpress template. I will caution you though that this particular section only gets your feet wet, you would have to rely on the Wordpress repository to get the most out of building your own Wordpress template. Especially since the repository constantly gets updated with patches and security fixes or even recommendations from Wordpress experts themselves. With that being said, this book is only practical for people starting out or people looking to blog and write. If you’re a web designer and or use Wordpress as a CMS to build websites for your clients you are better off looking for other books about Wordpress.

I have been digging deep into wordpress plugin development (at least trying to) so that I can develop some plugins for my website that would enhance its user experience and reduce the maintenance efforts. One of the planned plugins is one that handles some shortcodes for me. Wordpress has provided a rich API for shortcode development and it is quite fun to use. But I am stuck with one issue that I need to resolve. The plan is to create a shortcode which uses a variable as the word. For instance the following code will register a shortcode [home] that will be converted to a link to the home page. add_shortcode('home', 'show_home_link');function show_home_link () {return '<a href="http://http://www.mysite.com/;;} But what i need is that the word "home" be a variable $var. The plan is to check the value of $var agains the post_title entries of the wp_posts table of the wordpress database. And then according to the match found, display appropriate link to that specific page. This would make me able to just say [about] to post a link to about page. or [my first blog post] to post a link to the post with title "my first blog post". I know how to develop the function to check agains database entries and produce corresponding link but what I don't know is how to make the shortcode use a variable entry.

Most people, especially those who own small businesses or host personal websites, use wordpress as their CMS. It is a great content management system as it is easy to maintain and support is awesome. You can find help about any issue you can think of. The reason is that it is so widely used that almost every aspect of it is covered by someone. Often there arises a need to make some changes in layout or design of the website. It is very easy to do in wordpress. All you require is basic understanding of HTML and PHP. And you can operate and customize your wordpress like a pro. Recently, when I was making some changes to my website, I realized that the website was live during the time I tested various patterns. So anyone who was visiting the website at that particular period of time would have had a bad experience. Things would have changed randomly for him and there also might be some temorary errors shown to him. This might not sound like a big issue for small websites with upto 5k visits a day but for high traffic websites it is a major issue. I tried to look for various solutions. The one I decided to adopt was creating a local copy of my wordpress website and testing all the stuff I wanted to on that local copy. Then when the customization is final, all I have to do would be just to upload the modified stuff to my server and the website will be updated in one leap. This sounds pretty good in theory but while I was setting up a local copy of my wordpress website, I ran into lot of problems. Most of the problems are now fixed but I am still not able to run my website locally as if it was running on the internet. Below are the steps I took to create a local copy of my website (keep in mind that the local copy I created is still not 100% functinal, which means that I have missed something or done something wrong). Wampp: First of all I downloaded Wampserver 2.0a. I have previously used Xampp but because I have now shifted to a x64 system, and according to my knowledge, Xampp doesn't fully support x64 yet, so I decided to go with wampp. The process was really easy without any hiccups and every thing went well. After setting up wampp, I opened my browser and entered "localhost", which carried me to the local wamp server page. This indicated that wampp was running fine. Copied my remote website: The next step was to copy my remote website. I did it through the backup wizard on my cPanel, but the ftp client can also be used for this purpose. Copied my remote database: Using the same backup wizard, I also obtained a copy of my remote database. Copied my remote website contents to localhost: Then I copied the all the files and folders of my remote website to the "www" folder in my wampp installation. Created a new database in local server: Then I created a new database in local server with the same name as the database name on my remote server. Imported the remote database into the local database: Then I imported the remote databsae into the local database so that every bit of data is transferred to my local server. Created new user: I created a new user on phpmyadmin on local server with same details on my remote server. Granted it all priviliges. Changed the default location of my wordpress website in local database: The remote database had default location of my website as "http://www.mananatomy.com/;. As I was going to create a local copy, I changed it to "localhost". I did it by editing the wp-options table in my database. After all that effort, MY WEBSITE DIDN'T WORK LOCALLY. So I tried to follow a different method. I deleted all the files and databases I had uploaded to the local server. Then I downloaded a fresh wordpress copy from wordpress.org and and extracted the contents into the "www" directory of wamp. Then I created a new user and a new database, but the details I used were the same as for the remote server. I configured the new wordpress and installed it with the same details I used for my website when I installed it on my remote server. Then comes the trick that solved many of the issues. I created a new database, imported my original remote server database into it and deleted the wp_options table from it. On the local database that I used for fresh wordpress installation, I deleted all the tables except wp_options. Then I copied all data and structure from the random database (which contained the original contents of remote database) to the local wordpress database. After that I copied the original files of backup and pasted them on top of the fresh wordpress installation in the "www" directory fo wamp. After the files were replaced and directories were merged, I checked if the local website is working. And guess what, it worked. It worked but one major problem still remains. The website is not showing any content. It is showing that there are 336 pages (in the admin area) but the actual website doesn't show any content. The theme is loaded, the CSS loaded but the content isn't there. Furthermore when I click on the links, I am taken to the online version of the website. SO the links are also not working. So here are two problems I need to fix and I need your help on this. 1) Why is the content not appearing? 2) How to make the links work locally and prevent them from going to the online version of the website?