Wordpress 2.5
Posted on March 30, 2008
Filed Under Web development, Wordpress
Originally slated for a release date of March 10, 2008, Wordpress 2.5 made its debut yesterday. Most notable in the long list of improvements is a major upgrade to the admin area. Writing posts, pages, and especially managing assets (images, videos, mp3 files, etc.) received a total re-vamp and a slick new user interface to boot.
Invisible Window has been developing sites using Wordpress as a CMS for some time now, and it’s is a great system. Wordpress sites allow the site owner to easily make updates to content and imagery, and Wordpress has many features that allow better organic search engine results - these new features in this release make this great system even better.
If you have a site running a previous version of Wordpress (unless you’ve already contacted us for an upgrade, you do), shoot us an email (hello at invisible window dot com) and we can set up a time to upgrade your site so you too can be blown away by these new features.
In Praise of Wordpress
Posted on February 7, 2008
Filed Under Web development, Wordpress
The gang here at Invisible Window has developed multiple sites and written many articles about using Wordpress as a content management system (CMS). We believe it excels at this task and, more importantly, puts the site owner in charge of their own content. And who, after all, knows more about their company than anyone else ever could? There are many other advantages to using Wordpress, as you will learn in this video interview of Matt Curtis, one of the head developers at Google.
Google Maps Wordpress Plugin
Posted on December 14, 2007
Filed Under Web development, Wordpress
For over a year now our Invisible Window team has built some very cool web sites using Wordpress as the content management system. We’re pleased to announce our first publicly released Wordpress plugin, Google Mapper. Installing this plugin allows a site admin to add locations, stores, dealers, etc. to the database and for these locations to be plotted using Google Maps on the front end. Custom icons and markers can be used, and a default zoom level can also be entered.
You will need to signup for a Google Maps API Key to use this plugin on your site.
== Current Version ==
Google Mapper 1.0 - 2007-12-04
Download Zip: Google Mapper Plugin v 1.0
== Installation ==
- Upload `google-mapper` to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Enter your Google Maps API key and any optional default values
- Place
< ?php if(function_exists('gm_show_map')) gm_show_map(); ?>in your templates
== To Do ==
- Finalize Upgrade Script
- Allow setting streets, topo, hybrid view
- Allow setting for default map display size
== Donate ==
PayPal: Like this plugin? Want to see it developed further? donate here.
10 Mandatory Wordpress Plugins
Posted on April 16, 2007
Filed Under Web development, Wordpress
- Akismet - This one pretty much goes without saying, Wordpress comes bundled with this plugin allowing anyone to use it with no more effort than pressing the activate button within the plugin tab - provided you have a Wordpress account (which is free - here). Akismet will drastically cut down on the volume of spam that inevitably bogs down comments to posts. Get this plugin! http://codex.wordpress.org/Akismet
- FAlbum - Share your Flickr photos right on your site - this plugin installs easily and has some great gallery functionality. You will need a Flickr account to use this plugin. http://www.randombyte.net/blog/projects/falbum/
- Improved Include Page - This plugin allows you to include the content of a page into any template you make. This plugin allows you to include information in sidebars, etc. and gives you the ability to edit them right from the admin. hhttp://www.vtardia.com/improved-include-page/
- Search Pages Plugin - The search pages plugin extends Wordpress’ default search functionality to pages as well as posts. If your site uses pages and posts, this plugin raises the level of professionalism on your site and gives users the functionality they expect - after all who whants search results from only a portion of your content http://randomfrequency.net/wordpress/search-pages/
- Google Sitemaps - This plugin generates an XML sitemap of your Wordpress blog. Search Engines use sitemaps like these to index your site. Although this plugin is called “Google Sitemaps” other search engines (such as Yahoo! and MSN) utilize the same technology. http://www.arnebrachhold.de/2005/06/05/google-sitemaps-generator-v2-final
- PodPress - Whether you’re an avid podcaster or you’re just looking for an easy way to post audio and video on your blog, PodPress is worth checking out. http://www.mightyseek.com/podpress/
- Gravitars - Gravitars (Globally Recognized Avitars) can be added to comments by installing this simple plugin. This plugin while not necessary from a functionality standpoint, does make reading comments a little more interesting, and puts a face to a name (in a manner of speaking) for your blog community. http://codex.wordpress.org/Using_Gravatars
- WP-Cal - For events, dates, or any future posting - this calendar is a must. Although not every site needs this functionality, if yours does, this is a wonderful plugin. http://www.fahlstad.se/wp-plugins/wp-cal/
- All in One SEO Pack - For any blogger who is serious about SEO (and you all should be) this plugin is a must. It will re-write headers, create unique descriptions for each page, and allow you to customize each page’s meta tags - every bit of which will make search engines smile down upon you. http://wp.uberdose.com/2007/03/24/all-in-one-seo-pack/
- Wordpress Widgets - Although rumor has it this this plugin will soon be part of the Wordpress core functionality, you’ll need to install it before that is the case. This handy plugin lets you do all kinds of modification to your sidebar without ever touching a line of code. It does require a “Widgets Friendly” theme - or your can make your theme Widget Friendly. http://automattic.com/code/widgets/
It’s Alive!
Posted on April 13, 2007
Filed Under Projects, Web development, Wordpress
Well we’re by no means finished with the site, it still has a long way to go, but we feel like we have finally gotten it to the point that it’s presentable. So without further ado, welcome to the new (and hopefully improved) Invisible Window web site!
Widgets? How to make your theme Widget Friendly.
Posted on March 21, 2007
Filed Under Web development, Wordpress
What are Widgets anyway? I asked myself this question quite a few times while searching through various Wordpress blogs and continually seeing them referenced. It turns out that in a nutshell Widgets are little pieces of code that modify your default Wordpress sidebar. Bloggers have been modifying their sidebars since discovering Wordpress, but with Widgets this can be done easier, quicker and without ever touching a line of code. Want to display the latest three posts in your side bar - not a problem. Want to list all of your static pages, simple as well. All of this functionality is yours once you install one simple plugin. Oh and did I mention that you can do all of this without ever touching a line of code - I did, didn’t I?
First off you are going to need to install the plugin cleverly it’s called WordPress Widgets. Download and unzip the Plugin then install it . There is good documentation included with the Plugin and you should read that, but we all hate reading documentation so…
Make a directory called widgets in /wp-content/plugins/ then copy the 4 files from the plugin (delicious.php, gsearch.php, widgets.php, and rss.png) into that folder. Now activate Wordpress Widgets by going to your Wordpress admin -> Plugins and clicking the “Activate” button located next to “Wordpress Widgets”.
When I installed widgets, I was already using a Wordpress Theme that was safe for widgets. There are a ton of “widget friendly” themes out there, but if you happen to not be using one of them fear not, you can make your theme widget friendly. In the plugin zip there are two folders (classic and default) they each have a functions.php and sidebar.php file in them. If you are using defualt or classic for your theme - just uploading these two files will make your theme widget friendly but if you have modified your files in any way (like by including pages or manually hacking at the code) you will have to re-do your modification. If you are using some other non-widget-friendly theme, these two files will serve as the basis for your customization.
First off you will need to create (or edit if you already have one) a functions.php file in your themes directory (/wp-content/themes/your theme name/). Add this code to functions.php:
< ?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '', // Removes
‘before_title’ => ‘
‘, // Replaces
‘after_title’ => ‘
‘, // Replaces
));?>
Then within sidebar.php place the following code:
< ?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
after
- That’s about it - upload your new side bar and functions file and you should be good. Rumor has it that in future Wordpress releases, Widgets will be part of the core functionality. After using Widgets for a while, it’s easy to see why.
Wordpress 102
Posted on March 13, 2007
Filed Under Web development, Wordpress
This is the second in a series of lessons about how to use Wordpress as a full-featured Content Management System. The first post, Wordpress 101, of this two-part lesson is located here. Wordpress 102 will continue on where that one left off and we will address:
- How to utilize unique pages, with a unique layout
- How to include “pages” in other areas of your template
- How to make a portfolio with thumbnails and full size images
- Customizing the Templates
In the last tutorial, we discussed how to set your home page as a unique page - and how to rename and link to your blog. Chances are good that if you are going to run an entire site through Wordpress, there will be more to it than just home and blog. What we need to look at now is how to create a “Page” and how to link to it in our navigation.
You’re going to need your favorite text editor again, we’re going to create a new template. Open page.php which should be located in (/wp-content/themes/YourTheme) add the following code at the top.
/*
Template Name: About
*/
?>
Save this page as about.php and upload it to your server.
Next, log into your Wordpress admin section and click on “write” then “write page”. Give it a title (let’s call this one “about us” and fill in some content). In the side bar you will see “Page Templates” click on this and select “About”. Now your “about us” page is using this new template - you can modify this template to your liking.
Now not to get too deep into template modification, but what if you wanted to put a little bit about yourself in the side bar of your about us page? Now you could certainly open about.php (that we just created) and insert your html code, save, and upload. That would work, but it kind of defeats the purpose of a CMS, which is to have all of your site’s content update able via the CMS and not by editing files.
A nifty little plugin called Improved Include Page will take care of this for us. First download the plugin and install it - there is great information on how to install this plugin (and how to use it for that matter) on the download page. So we won’t go into the specifics here.
Got it installed? Good, let’s keep going…
Yet again we are going to start with making a new page in the admin. Create a page, make the headline your name and in the body just type your contact information. Save your changes. For our purposes, we will need edit sidebar.php (the Wordpress Codex has great information on modifying sidebar.php), again this can be found in your theme (/wp-content/themes/YourTheme) directory. Now go to “Manage” and click on “Pages” - the first column has each page’s unique id. Copy (or write down if your old school) the ID of the page you just created (it will be in the column labeled ID). Also make note of the ID of your about us page. Got those two numbers? Good, let’s open sidebar.php in the text editor. At the bottom of the file just inside the tag place the following code.
if(is_page('8')) if(function_exists('iinclude_page')) iinclude_page(12,'displayTitle=true&titleBefore=
‘);
?>Where I have the number 12 you need the ID of your new page (page snippet) that has your contact information. Where I have the number 8 you will need the ID of your about us page (parent page).
What is this code saying? OK, let’s take a look.
if(is_page('8'))
says if this page has the ID of “8″ then do the stuff that’s to the right (more on these conditional statements within Wordpress can be found on the Codex).
This code
if(function_exists('iinclude_page')) iinclude_page(12,'displayTitle=true&titleBefore=
‘);
Says if we have the function “iinclude_page” (which we do, cause we installed the plugin) include page ID 12The rest of the stuff is formatting - and if you care to delve into that, it’s all explained on the plugin download page. If you browse your site now, you should have your contact information included in the sidebar of only your about page. Cool huh?
These two pieces of information should allow you to accomplish 99% of the things you’ll want to do with your site. If you’re anything like me, though, you’re scratching your head wondering about that other 1%. So let’s look at one of those “other” things that a site might need. For my purposes, I also needed a portfolio (so that’s what we’ll address here).
I looked and looked for an “easy” way (that is to say plugin, widget etc) of doing this, but every time I started heading down a path, I would dead end into something that didn’t sit well with me. When things like that happen, it’s time to open the text editor and do it on our own. My idea was to have small images displayed in the sidebar that would link to a page containing a larger image and a description of the project. Since it wouldn’t be appropriate on all pages, I only wanted this to happen in the “portfolio” section. Now admittedly the rest of this is kind of a hack as it will require using a mix of FTP/code editor/wp-admin to update this section, but it works and sometimes that is the most important thing. Now someone who wanted to spend time with this could definitely turn this into a Plugin or a Widget - and if that someone is you, please let me know. With that being said, let’s hack!
First, let’s create a new page template for everything in our “Portfolio” section. Crack open your text editor and open your about.php file (provided you have done this tutorial from the start, you should have this file, if not - just read above and create a portfolio.php file). In the top of the file where it says:
/*
Template Name: About
*/
?>
Change to
/*
Template Name: Portfolio
*/
?>
Save this file as portfolio.php, upload (/wp-content/templates/your template name/portfolio.php) and voilla, a new template is born. Now let’s go to the admin section and create a page using this template. Eventually, you’ll probably want images and all kinds of cool things in your portfolio, but for now, just create a page, type some content in it - assign it’s page parent as “Portfolio” (after all, portfolio pages should be in the portfolio section) and lastly, but VERY IMPORTANT make the page slug the name of this page/client ie “clientname” (no spaces - no caps - that’s the important part) - more on that in a bit. Save this file and publish it.
We’re going to create a new sidebar include file that will only be used on our portfolio.php template. This will allow all pages with in our “Portfolio” section to use the same sidebar - which will be a different sidebar from the sidebar used for the rest of our pages. Open up your sidebar.php file (located in /wp-content/themes/your theme name/sidebar.php) and replace the code that is in it with the following (basically this code reads through everything in a directory - outputs all of the files contained within it to an array then echoes out that array):
echo ‘‘ . “\n”;
}
?>
Save this file as portfolioSidebar.php and upload it to your themes directory (you know the link by now, right?). In order for this to work, we need to tell our Portfolio template to use this sidebar and not the “normal” one. So open portfolio.php in your editor again.
look for this code:
and replace it with this (thanks again to the Wordpress Codes for this little bit of knowledge):
Save portfolio.php and upload it - now your Portfolio section has a unique side bar. Don’t look at it yet though, cause we’re not done. If you stop here, you will get an error message.
Our files should be good now, and we’ve created some content for the page - let’s get to making the image show up and having it link to that page. Open your FTP application, create a new directory in /wp-content/templates/your template name/
called “portfolio” this is where you are going to upload the thumbnail images that you want displayed in your side bar. Now make a thumbnail image and upload it (you’re on your own here) - name it as you slugged the page above (this is IMPORTANT - the slug and file name MUST match) ie clientname.jpg. That is it - if you view your site now and go to your portfolio section, you should see images in your new side bar and those images should link to their pages.
I think that wraps it up for Wordpress 102. Please let us know if you have ideas for a Wordpress 103 and happy blogging!
Invisible Window’s Top 10 Web Development Applications
Posted on March 2, 2007
Filed Under Projects, Web development, Wordpress
I realize that top 10 lists are all the rage, and that is all fine and good. Typically this is not the type of post I would write, but after purchasing a new application called CSSEdit this afternoon and playing with it this evening, I am inspired, so here we go:
Invisible Window’s Top 10 Mac Applications for building standards compliant web sites.
TextMate (macromates.com) The opening sentence on TextMate’s site puts it pretty perfectly “TextMate brings Apple’s approach to operating systems into the world of text editors.” One of the hardest things about Switching to a Mac was finding a good editor for writing (X)HTML and PHP code. TextMate has all of the features I was looking for, including custom color coding and a project viewer. At €39 (~$50) it’s not the cheapest editor out there, but In my opinion is one of the best.
Photoshop (adobe.com/products/photoshop/) From creating designs to cutting up design comps to optimizing and editing images - I am really un-aware of any application that competes with Photoshop. It is the industry standard, has been for years, and doesn’t have a real competitor. At $650 it is not cheap, but most developers will agree, bite the bullet - this is one application you’re going to use.
CSSEdit (macrabbit.com/cssedit/) This application inspired this post. Traditionally the job of editing CSS (or most any file type) fell to the text editor - developers have successfully edited CSS with text editors like TextMate for years. CSSEdit takes a different approach in that it was designed with one thing in mind - to edit CSS. CSSEdit does this perfectly and has many features that make building standards driven web sites much easier. One of the most helpful features is the ability to preview the page you are editing and see which declarations affect a highlighted area. Go buy CSSEdit, it will be one of the best $29.00 you’ve ever spent.
Transmit (panic.com/transmit/) The nature of building web sites is that eventually, you’ll have to move files to a server (otherwise it’s really hard for the world to view your work). In order to do that, you’ll have to have a FTP application. Transmit has a slick user interface and works flawlessly. You can buy Transmit for $29.95.
Firefox (mozilla.com/en-US/firefox/) Truth be told, in order to build a proper site, you’re going to have to look at your work in quite a few browsers (on at least 2 OSs). Through use and surfing, you’ll pick a favorite to use for your “normal” browsing, for me, that browser is Firefox, although I also have Camino, Flock, and Safari loaded on the Mac - and have a PC so that I can view sites in IE. One of the nicest things about browsers (other than bringing us the web) is that they can be downloaded for free!
Adium (adiumx.com/) Web developers tends to be a collaborative lot - email works - but IM works faster. The problem with IM is that every different service has a different application and everyone I need to stay in contact with tends to be on a different service from everyone else. In the past, this meant many different clients all open - all taking up valuable desktop space. By supporting all major IM services (aside from Skype) in one handy application, Adium simply rules. Oh yeah, and it’s free.
Terminal (/Applications/Utilities/Terminal.app) I am old-school, I’ve been developing websites since Vi was standard. Sometimes it’s just quicker to do something on the server rather than mess with FTP, edit, re-FTP etc. Terminal is built right into the Mac framework (and rumor has it that Leopard’s terminal will feature tabbed sessions).
Flash (adobe.com/products/flash/flashpro/) Being a fan of standards compliant web development, full on flash sites are not my cup of tea, but often times using flash as a supplement really enhances a site. Originally developed by Macromedia, Adobe now distributes Flash. Adobe is synonymous with two things, excellent quality and big price tags - Flash will set you back nearly $700 - yikes!
HyperEdit (tumultco.com/HyperEdit/) HyperEdit is a great text editor and could easily satisfy all the needs of a savy web developer. I stumbled upon HyperEdit after using TextMate for quite a while and was un-willing to switch. So what puts this ap on the list? HyperEdit has a PHP compiler which allows testing and de-bugging of PHP code without the need to transfer a file to the server. HyperEdit is a great time saver. You’ll quickly recover the $19.95 it sets ya back.
iTunes (apple.com/itunes/) So strictly speaking iTunes won’t help you build a website. But who wants to develop in silence? iTunes is a great ap, and we all know that.
Wordpress 101
Posted on February 14, 2007
Filed Under Projects, Web development, Wordpress
The developers at {iW} Invisible Window are continually making improvements to our CMS (Content Management System) called EMPOWER and we are quite proud of it. There are times, however, when the requirements of a project lend themselves more towards another similar, yet different system. Often times the transition point is in whether or not a project will have a BLOG. There is no point in re-inventing the wheel and Wordpress is a fantastic piece of BLOG software right out of the box. Upon first glance, however, it is not intuitive as to how to harness the power of Wordpress and use it for a full featured CMS system. As we were in the process of building our own site (which features a Wordpress CMS backend) we did lots of Googling to to become familiar with the process. Our Wordpress knowledge couldn’t have been gained without the help of other developer’s blogs. What follows is a step by step how-to on setting up a site and using Wordpress to manage it. Should you stumble along the way, the Wordpress Codex is your friend.
First, obviously, you will need to get Wordpress and install it. If you’re new to Wordpress, take a moment to play around with the interface. Familiarize yourself with the features, at this point in time you should be able to view your blog, login, make posts, and add pages. Now before yo get too far along…let’s start customizing.
The home page of your new site should now be your most recent blog postings - it’s pretty cool - lots of great information on that page. Generally speaking, a web site’s home page acts like an information kiosk - directing visitors to where they want to go within your site - a “recent blog posts” for your home page won’t really accomplish that goal. Home pages have very different jobs than the rest of the pages on a site and need a different look to do this job properly. So without further ado, let’s get a unique home page for our new site.
In Wordpress version 2.1 which is current as of this writing, creating a unique index page is quite simple. How to do this is covered in detail here (on the Wordpress Codex) and here (in the Wordpress support forums) (if you visit this link - skip forward - the beginning of the thread is from over 2 years ago and reference Wordpress 1.5). Here are the steps in case you don’t want to wade through all of that info.
- In your Wordpress admin, create a new page. Put some content on it (you can always go back and edit later) and save it - (Call it “Home”)
- In your themes directory (WordpressRoot/wp-content/themes/YourSelectedTheme) copy your page.php page and name it home.php
- Using your favorite text editor, Edit your new home.php page and right after the code for the header
get_header();insert this
?>
query_posts('pagename=Page Name');
?>Where “Page Name is the name of your page (ex. “Home”).
- Save home.php and with your favorite FTP application, upload it to your web server.
That is it. You should have a unique home page now.
Now that you have a unique home page maybe you want the navigation to each of your pages to show up. Now explaining EXACTLY how to do this is tough because there are nearly a zillion Wordpress themes out there and the code behind each of them is just a little bit different from the next. The following code is the key:
generally this code should go in your header file (WordpressRoot/wp-content/themes/YourSelectedTheme/header.php) but again - lots of themes - lots of different ways to do it (so we’re not spending too much time on it).
Now - you have a unique home page - you have your pages showing as nav, what if you want to call your blog something other than “BLOG” and what if you want it last in your navigation list (or as the Codex refers to it ” Making your blog appear in a non-root folder”)? Well it begins much like making a unique home page.
First, create a blog template. The easiest way to do this is to create a file named blog.php with the following contents in your theme directory:
/*
Template Name: Blog
*/
// Which page of the blog are we on?
$paged = get_query_var('paged');
query_posts('cat=-0&paged='.$paged);
load_template(TEMPLATEPATH . '/index.php'); //loads index
?>
Log into Wordpress and create a page named “Your New Name For Your Blog” with template “blog”. You’re done. The one last thing you will want to do is to update your permalinks structure to begin with “/blog/”, ie, “/blog/%year%/%monthnum%/%postname%/”. How you ask? Easy! Log into your admin system - Click on the “Options” tab, now Click on “Permalinks” then select the “Custom” radio button and enter this in the text field “/%postname%”. Voilla, done! Now you have a Wordpress-managed CMS with a unique front page and logically-structured blog content. Not only does this make your site appear better, this logical format of URL display should also help search engines catalog your site.
I think that’s going to do it for Wordpress 101. Look for Wordpress 102 to come in the following weeks. In that lesson we will address:
Unique pages (how to put Wordpress administrated code into your side bar etc.)
Portfolio (how to put thumb nail images in your side bar and display full images in the content area)
Customizing the Templates (we’ll cover a bit of everything here).
See you soon, and don’t hesitate to leave comments, I will try to answer them all to the best of my ability.
This is not necessarily part of Wordpress 101, but it is a great tutorial on how to install and configure Wordpress.
