Anne Dorko » Development

Setting up WordPress as a dictionary site

Anne — Thu, 08 Oct 2009 18:58:44 +0000

Updated on 12/05/2011

I just launched the WordPress Dictionary Plugin you asked for!

Check it out here:

Original Post:

Recently, I helped launch a website that served as a silly custom dictionary.

The concept was simple enough: create an online dictionary using only custom definitions. At first, I did some Google searches to see if there were any open-source dictionary apps. No such luck!

Then it occurred to me I should try WordPress. Searching the plugins, I realized that there was no dictionary plugin there either. That’s when I realized that I could set up WordPress itself to run the dictionary entirely.

Organization

I laid out a plan to make sure this would all run smoothly. I would use:

Posts: for definition entries
Custom Fields: to separate definitions, emphasis, etc. (made useful in combination with the “Get Custom Field Values” plugin)
Categories: to create letter listing pages
WP Post Sorting: a plugin to list entries in alphabetical order on letter listing pages
Custom Template: to display the information correctly, in dictionary fashion instead of like a blog

Setting Up

Now that I had my game plan, it was time to prep. I installed WordPress, and set up my categories. I took advantage of nested categories in case I decide to run a blog simultaneously on the site. To do that, I created a “definitions” category, with nested categories running A-Z.

Next, I installed the WP Post Sorting plugin, and set it up so that under the A-Z categories, entries would be listed alphabetically instead of by the usual date order.

Then it was time to set up custom fields. I went over to create a new post. I put in the word to be defined as the title, and skipped the usual post box, scrolling down to the custom fields section. You can use whatever information you want but I created a different field for each of the following:

Definition
Emphasis
Origin
Type (noun/adjective/etc)

Finally, I went to set up the permalinks. You can set it up however you choose, but I used the following settings:

Custom structure:
```
/define/%postname%
```
Category base:
```
list
```
Tag base:
```
tag
```

Creating a custom theme

Creating the theme is pretty simple, once you get the hang of it. If you don’t know how to build a theme, I suggest you learn how first.

I don’t care how you style it, but here are some tips to setting this up:

Install Scott Reilly’s Get Custom Field Valuesplugin, it will make your life easier. Then, all you have to do to pull the custom field is something like the following (used within the loop):
```
php echo c2c_get_custom('definition', ''); ?>
```
Re-write the code that spits out posts. You’re not using the_content(), but we do want to show the definitions of our entries! My code looks like the following:

php the_title(); ?>

/

Origin:

This code should be used pretty much anywhere on the blog that would normally just display the posts.
You’ll probably want to have a “Browse” option showing links for the A-Z categories somewhere. To do this, I simply used the following in header.php:
```
Browse: 
```
Simply substitute the “3″ after child_of with whatever the category ID “Definitions” is on your setup of WordPress, and this will display a list of the A-Z links.

From there on out, you’re on your own! If you have any questions or tips of your own, feel free to leave them in the comments.

If you’re interested, you can check out the finished product at Pugtionary (the dictionary for pugs).

Toggle (enable and disable) a form field with a checkbox: JavaScript 101

Anne — Thu, 23 Jul 2009 23:09:09 +0000

EDIT: First and foremost I am a small business web consultant. If you are a small business owner or know a small business owner, be sure to check out my new blog series called The Small Business Website Guide for Small Business Owners or follow me on Twitter or Facebook for free updates and tips on how to create, shape and grow a small business website.

Today at work I was creating a form. I’m not a big JavaScript buff, but one of my tasks was to use a checkbox to toggle a form field between “enabled” and “disabled”. So, after browsing the web for a solution, I decided it would be simpler to roll up my sleeves and get dirty writing my own function.

Here is what I came up with (view the demo):

JavaScript

function toggle(checkboxID, toggleID) {
  var checkbox = document.getElementById(checkboxID);
  var toggle = document.getElementById(toggleID);
  updateToggle = checkbox.checked ? toggle.disabled=true : toggle.disabled=false;
}

HTML

 When this is checked, something is disabled

This is pretty basic.

What we are doing is feeding the function the ID of the checkbox field, and the ID of the form field we want to disable. When you check or uncheck the box, we call the toggle() function, which determines what action we took – if it is checked, we disable the form field, and if it is unchecked, we enable the form field.

If you want to accomplish the opposite (checked = enabled, unchecked = disabled), simply switch the disabled values in the function:

function toggle(checkboxID, toggleID) {
  var checkbox = document.getElementById(checkboxID);
  var toggle = document.getElementById(toggleID);
  updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}

I haven’t done extensive testing as to whether this works across all browsers, but it seems to be working just fine in Firefox.

Demo

Using WordPress to create your page-based website

Anne — Wed, 01 Jul 2009 17:41:50 +0000

You’re a web designer, and you want to create a website – and like a lot of sites these days, it will be based around the pages, yet include a blog or news section. Congratulations! I am now going to give you a quick tutorial on making a page-based site using WordPress. This will make editing the pages easy, yet make it look like the blog is a separate installation.

If you have never touched PHP, roll up your sleeves and get ready to get dirty. I will try to make this relatively painless.

What you need!

WordPress

WordPress Plugins (Optional):

Programs

You’ll need to BYOP but here are the ones I use:

TextMate OR any text editor
Transmit OR any FTP program

Services

Domain name
Hosting — be sure to use the code “GatorTweet” for a $9.94 discount at HostGator.

You are now armed and ready!

Step 1: Install WordPress

If you got the hosting I recommended, all you need do is log into your control panel (yourdomain.com/cpanel) and click on “Fantistico”. From there, you can follow the instructions under “WordPress” and it will install automatically.

Otherwise you will need to follow the directions WordPress provides.

Step 2: Install your plugins (Optional)

WordPress now offers the nifty feature of being able to install plugins straight from the admin section. Go to yourdomain.com/wp-admin/plugin-install.php and search for the plugins I listed at the top of this article.

If you already downloaded them, use your FTP program to upload them into the plugins folder of WordPress (directions).

Make sure you activate them!

Step 3: Download a theme

You now also need to choose a theme for your site. There are probably quite literally thousands of free and paid themes to choose from, or you can create your own (which I recommend). However, the “how-to” create your own theme is an entirely different post.

You can download themes from the WordPress website, or use Google to search for themes to download. Install and activate your theme!

Step 4: Modify your theme

4.a Creating the “Blog” page

Now is the tricky part. Create a new file in your theme folder called “blog.php” – copy and paste the code from your “index.php” file into this new page.

At the top of this file, add the following code:

Make sure that you include this before the get_header() function, inside the php tags. The top of the page should be wrapped in “” like so -

Now, find the lines that look like this:

Directly in above these lines, you need to add the following…

We are telling WordPress that when it loads this template, we don’t want to see the content of the page we created, we just want a list of posts, listing the newest first.

Make sure that the get_sidebar() function is being called on the page, and if it is not, use the other template files to see where you should include it.

4.b Creating/editing the “Page” page

Technically, you could simply modify the existing page.php file, but I like to create a new template so that I can always refer back to the original, or even use it if I want. So, create a new file called “page-simple.php” and copy and paste the contents from page.php into it and delete the get_sidebar() function.

Usually I make further edits to help simplify the page, but this will vary depending on your theme.

Add the template name to the top of the page like we did when we created the Blog page.

/*
 Template Name: Simple Page
 */

4.c Creating a “Front” page (optional)

If you want to get fancy, you can rinse and repeat to create a custom front page template for your theme. You should base the PHP on page.php from your theme. Don’t forget to label the template!

4.d Upload!

Make sure that you upload your new template files! Otherwise you won’t be able to access them on your installation.

Step 5: Creating your pages

We’re getting close to being finished!

5.a Publish the Blog

Go and create a new page called “Blog” – don’t write any content, if you do it’s not going to show up. Before you publish the page, look on the right hand side for the option to choose your template. Select the “Blog Listings” template you created earlier.

Now you can publish your page. Visit it – it should be showing you a list of your blog posts just like the regular front page!

5.b Publish the Home page

Create another page, this one called “Home Page” or “Front Page” (it doesn’t really matter). Put the content you want to show up on your front page. If you created a special template for your front page, make sure to select it when you save it!

Step 6: Setting up WordPress to play nice

6.a Setting the permalinks

Log into your WordPress dashboard. Go to Settings > Permalinks. Now, I don’t care what format you want to take when making these permalinks, and you can get the WordPress permalink tags from their site, I recommend something like /year/month/name-of-post.

The thing I need you to do though, is add “/blog/” to the beginning of whatever you choose.

/blog/%postname%
/blog/%year%/%postname%
/blog/%year%/%monthnum%/%postname%

Those are all fine examples. I hope you get the idea. So choose your permalink structure and enter it into the “Custom Structure” option and hit save. Here’s a screenshot of my settings:

6.b Setting the front page

Now, go to Settings > Reading.

Switch the first radio button from “Your latest posts” to “A static page” – and in the drop down menu, choose the Home page you created in the previous step.

Step 7: Cleaning up and optimizing your site

Now it’s time to tame the beast.

Use PageMash to hide/show pages you want to be seen or not seen in the main navigation (such as your new “Home Page”).
Use the All In One SEO package to create custom titles and meta tags.
If you need a contact form, Contact Form 7 is your man.
If you need to show images, use the NexGen Gallery – it includes different methods of displaying these, using JavaScript and/or Flash.
I highly recommend getting a Google Analytics account and using the WP Google Analytics plugin to stick it into your site.

While these plugins may be more or less optional, they will probably come in handy for almost any kind of website you are creating.

What have we created?

You now have a website that is more focused on pages than posts.

One of your pages is the “Blog” page, which displays your posts. The link to the blog looks like “yourdomain.com/blog” and your post links will follow suit and look like “yourdomain.com/blog/permalink/structure/your-post“, but your pages will maintain links like “yourdomain.com/about” or “yourdomain.com/contact“.

Leave any comments, tips, questions or concerns in the comments! Especially if you found this to be useful.

Tutorial: How to display short blog title in WordPress

Anne — Mon, 24 Dec 2007 20:07:27 +0000

As was recently pointed out to me by Andy in the comments, this post was quite out of date. I was fairly new to WordPress and had found a hacked way to modify the core of WordPress to return a short version of wp_title(); — but this is a method far from necessary and will always get removed when you update WordPress.

I opted to delete the out-of-date method, so that you only get the stuff that makes sense!

There is a simple script you can use to implement a short blog title without modifying the base WordPress code. Open up your functions.php file within your theme and add the following:

[php]function short_title() {
$title = get_the_title();
$count = strlen($title);
if ($count >= 25) {
$title = substr($title, 0, 25);
$title .= ‘…’;
}
echo $title;
}[/php]

You can now reference short_title(); anywhere within the loop and call your short title. You can adjust how long your title is by changing the number “25″ to however many characters you want.