development:
 adapter: mysql
 database: XXX_dev
 username: root
 password: root
 timeout: 5000
 socket: /Applications/MAMP/tmp/mysql/mysql.sock

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
 adapter: mysql
 database: XXX_test
 username: root
 password: root
 timeout: 5000
 socket: /Applications/MAMP/tmp/mysql/mysql.sock

production:
 adapter: mysql
 database: XXX
 username: root
 password: root
 timeout: 5000
 socket: /Applications/MAMP/tmp/mysql/mysql.sock

Finally, follow the steps provided here to create your MySQL DB for the project. Good luck!

As an aside, WordPress claims you need an FTP client to use it at all–this is false. You WILL, however, need an FTP client to get your wordpress blog online. It will transfer your database to an online server, and you’ll attract visitors to that server with a clever (or not) URL.

With that out of the way, let’s get to the actual transfer of this website to WordPress, which will be done entirely offline through a local server until the blog is ready to be posted. I’m a bit of a beginner with this myself, but I can at least help you avoid some common pitfalls, several of which I had to find the hard way before I performed the transfer the right way.

1. The content:

a. text: Text is actually easiest to transfer if you take the time to strip its formatting. Copy-pasting the content of a preexisting site directly to WordPress can create awkward breaks in the text, forcing the user to painstakingly edit the pasted text. this method takes an inordinate amount of time, and apart from the aforementioned breaks in the text, it can also land you with some unusable static page links. I initially avoided these problems by transcribing the page content to WordPress, and I saved about ten minutes per page/post by doing so. Incidentally, this was also a great way to take note of any typos or grammatical errors I had made, so it’s worth the irritation you’ll through while retyping absolutely everything. That said, there is a quicker, more intelligent way to strip the formatting of a block of text: paste it into Notepad first. Notepad removes the formatting of any piece of text, so a second copy-paste job will give you a more or less finished product.

b. images: I’ll repeat this later as a rule of thumb, but avoid using an image gallery plugin. Just create a devoted image folder and a few sub-folders inside your wordpress theme folder. Use that as your directory and upload entire galleries all at once. It’s easy, I swear, and you won’t have any issues with unexpected sidebars popping up or bits of page content sliding out of place. You almost assuredly will have these problems if you rely on a plugin. As for non-gallery images, experiment a little. Web pages are organized in layers, and sometimes you’ll need to swap between placing images with HTML, Slipping them into the background with CSS, and organizing smaller galleries in WordPress.

2. Links:

Create dynamic links to direct users to the dynamic content of your website. Static HTML links to your local host will be useless once the WordPress blog is online. Yes, I know, they look messy and awkward to a beginner, but you need them. If you’re still complaining, chin up. If you don’t know what a dynamic link is/looks like, allow me to help you.

This is what you’re doing:

<a href=”localhost/mypost.html”>Link Text Here</a>

This is what I want you to do:

<a href=”<?php the_permalink><h2><?php the_title(); ?></h2></a>

Confused? That’s okay, for my part, I always thought it was somewhat poetic that every line of php began with a question mark.

3. Punctuation:

Ooh, was that almost a segue? Because now I have to talk about punctuation in HTML. If you’re just making your first static site, this is no big deal, but presumably you’ll want your blog to look professional and adhere to some basic standards. I could go into detail, or I could just copy/paste a chart of unusual bits of punctuation that I’m pretty sure I got off of the W3C site.

****FLAGRANT COPY/PASTING BEGINS HERE****

1.  Name/Glyph

2.  HTML entity

3.  Example

QUOTES AND PRIMES

1.  Left single quote ‘ and right single quote ’

2.  &lsquo; and &rsquo;‘

3.  Hey, this is a quote!’

1.  Left double quote “ and right double quote ”

2.  &ldquo; and &rdquo;

3.  ‘Hey, this is a quote“within another” quote!’

1.  Single prime ′ and double prime ″

2.  &prime; and &Prime;

3.  The girl is 7′10″!

DASHES

1.  Em dash —

2.  &mdash;

3.  A break in thought—like this

1.  En dash –

2.  &ndash;

3.  Ages 2–5

1.  Hyphen -

2.  -

3.  key front-end developer

ELLIPSIS

1.  Ellipsis …

2.  &hellip;

3.  To be continued…

In addition to these common glyphs, there are numerous others: from the division symbol (÷ or &divide;) to the section symbol (§ or &sect;). If you’re interested in special characters and glyphs, then Wikipedia’s article on “Punctuation” is a good place to start (just keep clicking from there).

****FLAGRANT COPY/PASTING ENDS HERE****

Incidentally, here’s a pro-tip. Never create from scratch what you could legally copy. It’s just easier that way. Trust me, I tried to do an entire blog on my own when I should have started from a preexisting template. You’ll save yourself a lot of grief with the organization of divs and the infrastructure of your site, not to mention you’ll learn php by proxy. There’s no need to grope around in the dark with your first attempt at a dynamic programming language.

Other Tips:

Plugins–If at all possible, avoid WordPress Plugins. There usually exists a way to get the same job done more elegantly with a decent piece of PHP, with the added bonus of a decreased chance of incompatibility.

Widgets–See above reference to plugins.

Comments–Use them frequently. You’ll have so many divs, it’ll make you dizzy unless you know what they’re boxing off. Try Something simple like “container open” and “container close”. Do this for every significant piece of markup or code, or for a large interrelated block of css.

If your code seems too complicated for the job you’re attempting to do (5 separate pieces of style, plus an important! tag and some strong-arming with the html just to move an image around), it probably is.

The server:

This is still a bit of a mystery subject to me. I only began making websites recently, and the differences between servers still elude my understanding. That said, it’s easy enough to see roughly what a server does as a consequence of the languages it supports. Everything I’ve seen has at least a basic HTML interface and CSS compatibility (no, really?), but the rest is more than just icing on the cake.

1. Xampp:

This is the server solution I’ve been using for my own websites. It has worked reliably for both static pages (which any server should be able to handle) and wordpress blogs. And since my experience is limited to HTML, CSS, and PHP, this is a perfectly usable server setup for me or indeed any beginner. It’s also cross-platform, meaning that if I ever swap my Windows laptop for a Macbook, I won’t have to adjust to a new server until I’ve learned more advanced programming languages.

2&3:

These sections used to hold descriptions of Mongrel and Nginx, until I realized that they are web servers, not local servers, and that they are therefore not so useful for the initial creation of a website. It might be more useful, however, to explain Xampp’s cousins, the WAMP family of programs. These are actually packages designed to run on Windows operating systems and help in the construction of a website. At their most basic, they combine a server (Apache), a database manager (MySQL), and one of three programming languages (PHP, Perl, or Python) into a single program. They are very user-friendly, providing all the infrastructure for a website without the need for any legwork on the part of the programmer. As it happens, Xampp uses both PHP and Perl. It’s what I started with, and it’s what I’ll recommend.

The text editor:

about anything will get the job done, but your choice of text editor will be a matter of personal preference. Do you want to see more of your text at once, or do you need the individual characters to be larger and more visible? Is a white background A-OK with you, or do you want the option to easily swap to a darker, less abrasive color scheme? It’s all a matter of taste, with one notable exception: Notepad is for chumps. The following are all superior to Notepad by far, and they are entirely free.

1. NetBeans

The first text editor to which I was introduced is not necessarily the best, even for a beginner. It has a simple setup, with decently colorful text to differentiate between HTML tags, attributes, conditions and what have you, but that’s about it. There is no option to divide your screen, which would make it easier to handle even a basic HTML/CSS page by keeping both types of files on screen at once. Also, I’m not personally a fan of white backgrounds. I thought this was a fairly big issue in usability. Maybe we’re not all using the same backlit screens we were in the 90′s, but stark white is still painful to human eyes. Skip to the next two recommendations.

2. Sublime Text

Ahh, that’s more like it. A charcoal background and numerous neon-colored fonts for differentiation come standard here, and there are more options for that under the preferences menu. Font size is also easily changed, and the screen can be divided into numerous columns, rows, or a 4-quadrant grid. Add to that a simple, unobtrusive interface and it seems like this should be the perfect overall editor. Unfortunately, the text can only be shrunk down so far, and that makes for awkwardly wrapping text once the screen is divided into two or more columns. Code begins to look awfully messy when there are breaks in the text that a user didn’t put there. Also, Sublime Text is technically free to use, but every now and again a pop-up appears reminding the user to go and purchase the retail version. It gets annoying after a while, but I still recommend the text editor with very few caveats.

3. Komodo Edit

The initial interface of Komodo Edit is not that great. A white background and text colors ranging through different shades of blue don’t exactly help a newbie coder retain their focus. However, darker schemes are readily available through the Preferences menu and online. I prefer the downloadable “Twilight” color scheme (insert your own vampire joke here), which shrinks the text significantly for use with multiple columns and utilizes both a dark background and light, readable colors. Ever stared at a text editor for so long that your vision blurred and your will to work dissipated? That won’t happen quite so easily with Komodo Edit under the Twilight setting. The interface is slightly more obtrusive than that of Sublime Text, as the on-screen dividers and menus contrast with the actual text field and keep the user mentally anchored to their operating system. It’s really not so bad though, and I’ve yet to receive a single irritating “buy the full version” pop-up. This editor also comes highly recommended.

4.Notepad++

Remember what I said about Notepad being for chumps? That’s still true, but apparently those two little plus signs make all the difference in the world. Notepad++ is a far superior program that I would classify as a blank canvas in comparison to the mostly prepackaged editors mentioned above. It can be customized to have all of the positive functions (split screen, dark theme, text differentiation) as all the others and then some. Notepad++ makes it easy to stay organized, too, creating collapse/expand points wherever you’ve hit the enter key. This is a very tempting package, and if you’ve got the patience for it you can create a work space custom tailored to your needs, but I still can’t recommend it for first time programmers. It’s difficult to customize the first time through, it’s buggy, and the initial settings are pretty useless for coding.

You should check it out here, where I’ve also included the process.php file for download. I’ll be working on additional features in the future, including product listing and price comparisons.