Praj's Site » Web Development

Cloning a WordPress Site

praj — Tue, 22 Jun 2010 10:55:26 +0000

These are the basic steps for cloning a WordPress site. In this example, I assume your source web server is your live site on your web hosting and your target web server is your local development web server. Try to keep the same directory name and database name to keep things simple.

Backup all of the files from your site on your web hosting and download (e.g. via FTP).
Export your database to a SQL script (e.g. through phpMyAdmin for MySQL)
Extract your files to your local development server directory
(Create) and import your database using the exported SQL script (e.g. through phpMyAdmin for MySQL)
If your database name or database user/password has changed, update wp-config.php in the main directory accordingly.
Start your SQL tool (e.g. phpMyAdmin for MySQL). You will need to update the table wp-options. The two options you will be updating (option_name) are siteurl and home. Change these from the URL of your source site (live site) to your local development web server URL (option_value fields).

Hopefully your local development site is now working.

Pages not printing in Firefox

praj — Sat, 19 Jun 2010 03:29:50 +0000

While redesigning this site, I incorporated a new print style sheet. During the process I discovered a feature in Firefox when printing a web site. Basically, if you have the overflow: hidden CSS attribute set, then it could prevent Firefox from printing all pages from the web site.

So, if you notice that you are only seeing a portion of your web site in your print preview, check your CSS code, and look for any cases where overflow: hidden has been set. For example, I had it set in my container div to allow the footer to always be placed right at the bottom of the page regardless of the content size above it.

Equally aligning images in CSS

praj — Thu, 17 Jun 2010 09:16:26 +0000

Equally aligning a row of images so they are equal distances apart with the first image being flush left and the last image being flush right, is actually a lot harder than you would think! Eventually, I turned to Google and came across the solution at CSS tricks.

I’d actually tried the first two approaches described in the article, but didn’t go down the table road. Instead, I stopped and thought, someone somewhere must have solved this. What did they do?

It works really well, but it is not intuitive at all. By the way, you can use exactly 33.3% (instead of 33%) for your width if you really need to be spot on. It works in IE6 too which is always a bonus.

What’s the go with the target attribute?

praj — Tue, 04 May 2010 04:04:29 +0000

If you want to open a link in a new browser window/tab, the common approach is to use the target=”_blank” attribute in your anchor tag. However, the target attribute is deprecated by W3C standards and your HTML won’t validate if you use it.

The common alternative is to use JavaScript but I don’t really like that — what happens if the user doesn’t have JavaScript enabled? Also, apparently JavaScript versions are more susceptible to pop up blockers (although I can’t confirm if this is really the case).

Smashing Magazine argue that links shouldn’t open in new windows, because it leads to bad user expectation as users expect links to open in the same window. They do say there are certain exceptions. I don’t entirely agree with this. I may not expect a window to open in a new window, but I don’t know if that necessarily leads to a bad user experience, you just go, oh it opened in a new window, right lets go there now…

One way to make the target attribute validate is to the XHTML transitional DocType:

Again though this isn’t ideal because of the other subtleties of using a transitional DocType instead of a strict one. So, that’s why I ask, what is the go with the target attribute? Is there an alternate, HTML only solution? Is everyone comfortable using the unobtrusive javascript way? Do I just need to harden up and do that?

BTW, I do realise its ironic that this post links to external sources using the deprecated target=”_blank” attribute. But that’s just the easiest way to do it in WordPress.

Web Mockups with Pencil

praj — Mon, 03 May 2010 04:25:09 +0000

Discovered Pencil today, a nifty free/open source mockup tool. Initially I wasn’t going to try it because it is advertised as a Firefox extension, and I didn’t want yet another firefox extension installed. But then I found you could download a standalone version. So far, it works pretty good, my only complaint is that I there isn’t a grid view OR at least I don’t know how to turn it on.

CSS Shorthand Property Order

praj — Sun, 02 May 2010 07:44:07 +0000

You can use a shorthand notation for setting certain CSS properties, for example:

div.example {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

Is the same as:

div.example {
    margin: 10px 20px 30px 40px;
}

Nothing revolutionary there.

However, I always have trouble remembering the order, so I came up with my own Gen-Y acronym (mnemonic) - trbl for trouble remembering. Get it?

That is, top right bottom left. Might be helpful next time you are writing some CSS and can’t remember the order…

Update: as a number of people have correctly pointed out, a better, more traditional way of remembering this would be to think of a clock – going clockwise from 12 (top) -> 3 (right) -> 6 (bottom) -> 9 (left).

Dummy HTML Content

praj — Sat, 01 May 2010 04:17:28 +0000

Very handy if you need some dummy HTML content: http://html-ipsum.com/

Web Development with NotePad++

praj — Fri, 30 Apr 2010 10:33:24 +0000

I’ve started using NotePad++ as my primary editor for web development – HTML, CSS, JavaScript and PHP. Notepad++ gives you everything you need, but you do have to turn on a few settings.

Autocompletion.

This will prompt for you to complete repeated or known text for the relevant language you are working with:

Settings > Preferences > Backup/Auto-Completion

Tick enable auto-completion on each input, and leave it as function completion. You can start from the 2nd character or more if you find it annoying. Press the or keys to automatically populate the full word.

TextFX Settings

TextFX can perform automatic closing of (X)HTML and XML tags through the following setting:

TextFX > TextFX Settings > Autoclose XHTML/XML

NotePad++ Run in Various Browsers

praj — Thu, 22 Apr 2010 01:46:49 +0000

By default, NotePad++ has a number of browsers included in the Run menu including:

Firefox
Internet Explorer
Safari
Chrome

However, depending on where these browsers are installed on your computer they may not work. For example, I have Firefox Portable installed, so, the command to launch it is D:\Programs\Firefox\FirefoxPortable.exe.

To update the shortcuts listed on the Run menu, you need to edit the file shortcuts.xml in the NotePad++ installation directory (e.g. C:\Program Files\NotePad++\shortcuts.xml). However there’s a catch. You can’t edit this file with NotePad++. Instead, edit with another text editor (e.g. plain old NotePad). If you edit this file with NotePad++ the changes won’t persist – and the file will be reset back to its defaults.

Here’s the change I made to the file for Firefox Portable:


D:\Programs\Firefox\FirefoxPortable.exe "$(FULL_CURRENT_PATH)"

StatPress Analytics in WordPress

praj — Tue, 13 Apr 2010 21:00:06 +0000

I’ve been trying StatPress for a week now and its going pretty well. Its an alternative to analytics software such as Google Analytics to give you information about visitors to your wordpress site.