However, as always, nothing is impossible! We can make PivotX do what we want it to do with a little hacking in the core, and the help of the ‘Bonus Fields’ extension.

First of all we want to do some modifications to the PivotX backend. Of course this is not recommended, because when you upgrade to a newer version of PivotX, your mods will be overwritten. However, because the modifications are small, and only in one place, it should be fairly easy to make the modifications again after an upgrade.

In this example, we’re going to make a custom entry type called ‘Custom Entry’.  To get a menu option for creating ‘Custom Entries’ in the backend, we need to edit the menu structure that is in the data.php file in the PivotX directory.

Around line 73 in this file, we have the following code:

                    array(
                        'sortorder' => 1000,
                        'uri' => 'entries',
                        'name' => __('Entries'),
                        'description' => __('Overview of Entries')
                    ),
                    array(
                        'sortorder' => 2000,
                        'uri' => 'entry',
                        'name' => __('New Entry'),
                        'description' => __('Write and Publish a new Entry')
                    ),
                    array(
                        'sortorder' => 3000,
                        'is_divider' => true
                    ),
                    array(
                        'sortorder' => 4000,
                        'uri' => 'pagesoverview',
                        'name' => __('Pages'),
                        'description' => __('Overview of Pages')
                    ),
                    array(
                        'sortorder' => 5000,
                        'uri' => 'page',
                        'name' => __('New Page'),
                        'description' => __('Write and Publish a new Page')
                    ),

To create a menu entry for our ‘Custom Entry’, we have to add the following code right after the array for a ‘New Entry’, like so:

                    array(
                        'sortorder' => 2000,
                        'uri' => 'entry',
                        'name' => __('New Entry'),
                        'description' => __('Write and Publish a new Entry')
                    ),
					// create custom entry menu item
					array(
                        'sortorder' => 2500,
                        'uri' => 'entry&entry_type=custom',
                        'name' => __('New Custom Entry'),
                        'description' => __('Write and Publish a new Custom Entry')
                    ),
					//end of custom entry menu item
                    array(
                        'sortorder' => 3000,
                        'is_divider' => true
                    ),

For clarity: the new code is between “// create custom entry menu item” and “//end of custom entry menu item”.

To see if it works, let’s go to the PivotX backend, and look at the menu:

The modified back-end menu

There you go: a brand new menu item!
Now of course this menu item needs to do something as well. In order to make this work, we need to make sure the ‘Bonus Fields‘ extension is installed first. After installing the extension, we need to create ourselves a bonus field called ‘entry_type’. For this you have to go to ‘Extensions -> Configure Extensions -> Bonus Fields’, and enter the data as shown in this screenshot:

The 'Entry Type' bonus field

The field can be ‘hidden’, because we don’t actually have to see it in the back-end. For testing purposes, you could make it a normal field, but if you don’t want users to get confused, you should probably hide it.

At this point we should also create a new category just for this type of entry. You’ll have to go to ‘Administration’ -> ‘Categories’ and click the ‘Create new Category’ button. We’ll call the category ‘custom’.

Add a category

Next, we’re going to write a little hook-extension, that will do the following:

• Assign the category ‘Custom’ to our ‘Custom Entry’
• Add custom fields to our ‘Custom Entry’.

Create a file called ‘hook_customtype.php’ in the ‘extensions’ directory. The first part of the extension consists of comments, to identify the extension. I used the following code here, but you’re welcome to insert your own information (to be honest, I copied most of this from @Jadwigo anyway)

<?php
// - Extension: Customtype extrafields
// - Version: 0.1
// - Author: John Schop
// - Email: john.schop at gmail.com
// - Site: http://www.windmillwebwork.com
// - Description: Add bonus fields to custom type entries.
// - Date: 2010-09-02

The first thing to do is add a hook, so we can call a function when somebody edits an entry:

$this->addHook(
    'entry_edit_beforeedit',
    'callback',
	'extraCustomCategory'
    );

All this does is tell PivotX to call the function ‘extraCustomCategory’ as soon as somebody creates or edits an entry, and it will call the function before the entry is edited.

Now we need to create the function itself. The function will assign the value ‘custom’  to our ‘Entry Type’ custom field when you click the ‘New Custom Entry’ button in the top menu (the item we created when we started all this). It will also assign the ‘Custom’ category to these entries:

function extraCustomCategory(&$entry) {
	global $PIVOTX;

	//var_dump($entry);

	if(isset($_REQUEST['entry_type']) && $_REQUEST['entry_type']=='custom') {
		$entry['extrafields']['entry_type'] = 'custom';
	}
	// exit if not a custom entry
	if($entry['extrafields']['entry_type'] != 'custom') { return; }

	// add custom category
	if(!in_array('custom', $entry['category'])){
		$entry['category'][] = 'custom';
	};
}

Remember, we are still adding all this code to our hook_customtype.php file!

Next, we are going to make sure that ‘Custom Entries’ actually have something unique that normal entries don’t have: some extra information!

If you’re still wondering how you can use this, consider the possibility that you want to add products to your website, with custom fields like ‘Price’, ‘Size’ and a picture of the product.

First, the hook, so PivotX knows where to put this extra stuff:

$this->addHook(
    'in_pivotx_template',
    'entry-introduction-before',
    array('callback' => 'extraCustomFields' )
    );

The above code makes sure that PivotX is going to execute whatever we write in the function ‘extraCustomFields’ before the ‘introduction’ part of our custom entry.

Assuming you wanted to add ‘Price’, ‘Size’ and a picture to your entry, the ‘extraCustomFields’ function should look like this:

function extraCustomFields($item) {
	// exit if a not a custom entry
	if($item['extrafields']['entry_type'] != 'custom') { return; }

    $output = <<< EOM
    <table class="formclass" border="0" cellspacing="0" width="650">
        <tbody>
			<tr><td colspan="3"><hr size="1" noshade="noshade" /></td></tr>
			<tr>
				<td width="140">
                    <label for="extrafield-price"><strong>Price:</strong></label>
                </td>
                <td width="510" colspan="2">
                    <input id="extrafield-price" name="extrafields[price]" value="%price%" type="text" />
                </td>
            </tr>
			<tr>
				<td width="140">
                    <label for="extrafield-size"><strong>Available sizes:</strong></label>
                </td>
                <td width="510" colspan="2">
                    <input id="extrafield-size" name="extrafields[size]" value="%size%" type="text" />
                </td>
            </tr>
			<tr>
                <td width="150">
                    <label for="extrafield-image"><strong>Product Image:</strong></label>
                </td>
                <td width="400">
                    <input id="extrafield-image" name="extrafields[image]" value="%image%" type="text" style="width: 400px;"/>
                </td>
                <td width="100" class="buttons_small">
                    <a href="javascript:;" onclick="openUploadWindow('%label1%', $('#extrafield-image'), 'gif,jpg,png');">
                        <img src='pics/page_lightning.png' alt='' /> %label2%
                    </a>
                </td>
            </tr>
			<tr><td colspan="3"><hr size="1" noshade="noshade" /></td></tr>
        </tbody>
    </table>
EOM;
    // For ease of use, just try to replace everything in $entry here:
    foreach($item as $key=>$value) {
        $output = str_replace("%".$key."%", $value, $output);
    }
    foreach($item['extrafields'] as $key=>$value) {
        $output = str_replace("%".$key."%", $value, $output);
    }
    // Don't keep any %whatever%'s hanging around..
    $output = preg_replace("/%([a-z0-9_-]+)%/i", "", $output);

    return $output;
}

That is basically all the programming we have to do, but there is one important thing left: at the very end of our hook_customtype.php file, we need to type “?>” (of course without the quotes).

Now, in your backend, you should find a new extension in the list, that you of course will have to activate:

Activate the extension

Now, to check if everything works, let’s create a new ‘Custom Entry’:

Our Custom Entry

Ha! Apparently it works. Now if we save this entry, it should show up on the front page of our website (I used the Wichita template here):

Where are the custom fields?

Bummer…no custom fields anywhere. Of course not, because we need to add the custom stuff to our template! In your template, you could add something like this:

[[if $entry.extrafields.entry_type=='custom']]
	[[if $entry.extrafields.price!=""]]
		<div class="price">Price: [[ $entry.extrafields.price ]]</div>
	[[/if]]
	[[if $entry.extrafields.size!=""]]
		<div class="size">Sizes: [[ $entry.extrafields.size ]]</div>
	[[/if]]
	[[if $entry.extrafields.image!=""]]
		<div><img src="images/[[ $entry.extrafields.image ]]" /></div>
	[[/if]]
[[/if]]

And that should do the trick:

The custom entry in all its glory

Awesome!

If you want to create your own custom types of entries, feel free to use the source code.

Some additional notes and remarks:

- If the entry doesn’t show up on your frontpage at all, you probably forgot to add the ‘custom’ category to your weblog. You need to do this in ‘Administration’ -> ‘Weblogs’, then click ‘Edit’, choose the ‘Subweblogs’ tab, and add the ‘Custom’ category to the list of categories linked to your weblog. This is probably the most counter-intuitive thing in the PivotX backend, but it looks like we’ll have to live with it.

- Again, be careful when upgrading after you’ve done these mods. Everything will continue to work, but you will loose your ‘New Custom Entry’ menu item after an upgrade, unless you make the changes to data.php again.

Share/Bookmark

In the past, I’ve made a bunch of  ’Themes’ for PivotX. All of those are available on the PivotX Themes Website. The problem with that website is that it doesn’t display a lot of features for each theme.

But from now on, I will also present my themes in my newly opened PivotX Sandbox. Feel free to browse around!

Of course, the PivotX Themes website is the place to go if you want to download the themes…

Share/Bookmark

Download Wichita Theme.

The frontpage

Wichita Front Page

A detail of the navigation bar at the top:

Navigation detail

A detail of the sidebar (with WZUP extension):

Sidebar detail

A screenshot of an entry page (with comments):

Entry Page

And a screenshot of the search results page:

Search results

Like I said, the theme previewer on the official PivotX website has its limitations. Pretty soon, Windmill Web Work will have its own Theme Previewer for all our themes, so all the bells and whistles can be showed, and previewed in a ‘real’ environment. More news about that soon, stay tuned!

Share/Bookmark

Let’s dive into the “Deep Discount and Limited Assortment” segment of supermarkets. Walking around in those establishments is not a nice shopping experience to start with, but the prices are low, and that is their priority. We can only imagine where ‘web design’ is on their list of priorities. Let’s take a look:

First, we have Aldi, a chain based in Germany, that has about 1000 stores in the USA. Aldi specializes in own-brand staple items, and does not decorate their stores. The website of Aldi USA looks surprisingly pleasant:

Aldi USA Website

The main section actually looks really nice. I’m a bit disappointed by the header and the top navigation. The navigation does not jump out at you, and that is mainly what you’ll be looking for once you enter the website. The same goes for the little blocks on the right, where you can find a store locator, something a lot of people will be looking for if they’ve never been to your store. SEO wise, the site is not all that bad, but the XHTML is not valid.

Next up is Food 4 Less, a smaller chain. I’ve never been to their stores, but if their website is an example of what the store looks like, I wouldn’t mind shopping there:

Food 4 Less Website

The quick navigation at the very top right is nice, and has the most sought after navigation items right there. The whole website uses a color scheme that’s easy on the eye, with subtle gradients here and there. The logo could use a little updating, but that’s just a personal preference, and changing that could get very expensive, because they would have to change the signs on the stores too of course.

The website is missing a meta description, which does not seem very smart if you look at SEO. The source code doesn’t validate either, which may or may not be a result of using Microsoft Sharepoint.

For the next one in this category, I’d like to take you to Marc’s, a small chain that’s local to my area. If you think this website looks bad, you’ve probably never been in an actual Marc’s store.

Marc's

Again, I’m surprised by the website. At first sight, there is not much wrong with it. The navigation is somewhat messed up, because apparently the menu items “What’s New” and “Health & Beauty” do not fit in the allocated space, which is just plain ugly. I’m also glad I said ‘at first sight’ because upon inspection of the source code, we find out it is made with HTML tables. Now don’t get me wrong, I don’t mind a good table, if it’s used for actually displaying data that belongs in a table. And why a supermarket website needs a picture of the CEO in the header is a mystery to me.

There is also a lot of work left to do on the search engine optimization, and of course the page does not validate, as seems to be the standard in this business.

The last, and in this case the least of this showcase would be Discount Drug Mart, which is also a local chain in Ohio. Although their stores do not look as bad as Marc’s, their website is definitely the ugliest:

Discount Drug Mart

You don’t even have to look at the source code to see that his is just one big HTML table. Looking at the site, you feel overwhelmed by the amount of information on one page. If you follow the links on the left, you are shown a variety of different lay-outs and fonts. Of course, Comic Sans belongs on a website like this, including the occasional spelling error (‘Heathcare’ instead of ‘Healthcare’). Looks really professional.

I didn’t really want to test the validity f this website, but out of some kind of morbid curiosity i did. The score is 75 errors on the ‘Home’ page, but on some of the other pages it gets closer to the magic number 100. Also interesting (by lack of a different term) is the SEO report. Luckily, you can find them on Facebook and Twitter. That should help.

Share/Bookmark

Now let’s take a fresh PivotX install, which comes with the ‘Skinny’ theme. A typical comments section would look like this:

Skinny

I must say, it looks good ‘out-of-the-box’. However, a lot of blogs these days have a slightly different lay-out for each next comment, just to make a little visual difference between one comment and the next. You can see an example below, from the Designm.ag website:

Designm.ag

As you can see, there is a little difference in the shade of grey they use for the background color. Can PivotX do that? Yes, it can.

Let’s take another close look at the documentation, and you’ll find the %even-odd% templating tag, which returns ‘even’ or ‘odd’, depending on the number of the current comment.

Now, if we take the code for the comments section of the Skinny template file ‘entry_template.html’, we find the comments section around line number 25:

<div class="commentblock">    

	<p>[[ commcount ]]</p>
	[[ comments]]
	<div class="comment">
		%anchor%
		<img class="gravatar" src="%gravatar%" alt="%name%" />
		<div class="comment-text">
		 %comment%
		 <div class="meta">%name%, %email% %url% - %date% %editlink%</div>
		 </div>
	</div>

	[[ /comments ]]
</div><!-- .commentblock -->

Ok, that’s nothing to get scared of. Pay attention to the part between [[ comments ]] and [[ /comments ]], because that is where PivotX loops through all the comments for an entry. You can see that every comment is wrapped in a <div> with the class “comment”. Now, if we make use of the %even-odd% formatting tag, we can give each comment an extra class. Look at the following code, and look especially at the 5th  line:

<div class="commentblock">    

	<p>[[ commcount ]]</p>
	[[ comments]]
	<div class="comment %even-odd%">
		%anchor%
		<img class="gravatar" src="%gravatar%" alt="%name%" />
		<div class="comment-text">
		 %comment%
		 <div class="meta">%name%, %email% %url% - %date% %editlink%</div>
		 </div>
	</div>

	[[ /comments ]]
</div><!-- .commentblock -->

See what I did there? Now every comment will not only get the class “comment”, but also a class “odd” or “even”, depending on the number of the comment we are currently looping through. That’s great, because now, we can style those comments separately. If you look in the style.css file that comes with the Skinny theme, you’ll even find there is no styling for the “comment” class. Apparently that class was only added for semantic reasons.

Now we add the following code to the style.css file:

.comment {
margin:5px 0;
padding:5px;
}

.even {
border:1px solid #888;
}

Let’s look at that entry again, and see what effect that has:

The modified comments section

Of course I could have done a lot more there, with background colors and other bells and whistles, but the subtle border doesn’t disturb the otherwise very simple lay-out of ‘Skinny’ too much I think.

Important note:

If you do want to modify the Skinny template files, it’s better to copy the whole directory /pivotx/templates/skinny first, and rename it to something else. Then go into the PivotX back-end, and set the templates for your weblog to those files. If you don’t do that, you will loose all your changes when you upgrade to a newer version of PivotX, because the ‘Skinny’ directory would be overwritten with the original that comes with PivotX.

Share/Bookmark

These web pages are then referred to as ‘minimalistic’. If you look up ‘minimalism’ in a dictionary, you’ll find something like:

design or style in which the simplest and fewest elements are used to create the maximum effect

Examples of minimalism in art are for example the paintings of Piet Mondrian. I’m not going to give an opinion of minimalism in art here, but I must say that for web design, minimalism usually works really well.

Let’s look at some examples that I personally really appreciate:

Finch

Finch

Sleepover, San Fransisco

Sleepover, San Francisco

Hot Meteor

Hot Meteor

Being Wicked

Being Wicked

Design Intellection

Design Intellection

Full Cream Milk, one of my all time favorites.

Full Cream Milk

Of course, let’s not forget my own attempt at a minimalistc web design, for Keller Rigging & Construction

Keller Rigging & Construction

Share/Bookmark

In a PivotX template, you can place that ‘Read more’ link in a template with the [[ more ]] template tag. You can even control what the link looks like with the parameter ‘text’, like so: [[more text="Continue reading..." ]]. There is a problem with this template tag though…

Let me explain what the issue is before we look at solving it:

The automagically generated link will contain ‘#bodyanchor’ at the end of the link url, so you can actually let the reader jump to the body text. I don’t like that, because in a lot of layouts it’s confusing, and the user ends up scrolling up, to then realize he’s already read that part, and he was redirected to the actual body. Also, there is no way of giving the link a separate class.

The solution is simple: just make a link to the blog entry (the ‘permalink’):

<a class="more-link" href="[[ link hrefonly=1 ]]">Read More »</a>

This will display something like ‘Read more »’, and now the link has a class called ‘more-link’ that you can use to style it.

However, sometimes you write blog posts that are not very long, and those entries might not have more text to display than just the introduction. Normally, the [[ more ]] tag would not output anything in that case. The above code will, and this can be quite dissapointing for visitors to your blog, and confusing too. After clicking the ‘read more’ link, it turns out there’s nothing more to read!

Thanks to the power of Smarty, there’s always a solution. Just program some intelligence in your template, and you can make the ‘read more’ link disappear when there is nothing after the introduction.

The solution is to use an [[ if ]] statement that looks if there’s more to read first:

    [[ if $entry.body != "" ]]
         <a class="more-link" href="[[ link hrefonly=1 ]]">Read More »</a>
    [[ /if ]]

If you wrap your link like this, it will only show up if the body of the entry actually contains any text.

Note: I edited this post after publishing. I’ve been using the permalink for so long, I didn’t realize the [[ more ]] tag actually doesn’t display when there is no text in the body. Still I like to use the ‘permalink’ method for the ‘Read more’ link, and then you need the [[ if ]] statement…

Share/Bookmark

Because all those ‘home page makers’ had to wait until 1989 before Tim Berners-Lee finally invented the World Wide Web, most of those early designs got lost, you know how that works with home pages and stuff.

But, just like wooden shoes, the art of making ‘home pages’ never really got forgotten. It was one of the trades that you see at a fair or when you visit a farmers market or something. There would always be an old guy sitting on a stool somewhere, drafting pages with a set of old quill pens and a bunch of different colors of ink. Of course, hyperlinks and ‘back’ buttons were not invented yet, so browsing a corporate website of let’s say the Dutch East India Company required a lot of patience and concentration. Luckily, there were no animated GIFs either.

Anyway, after HTML was invented, everything went really fast. All of a sudden, all those weird guys that used to still work as a ‘home page maker’ at fairs and such, suddenly had a real job! They started calling themselves webdesigners, and within no time they were driving around in Ferrari’s. That didn’t last long, because apparently Ferrari’s are not made to be driven while you are wearing wooden shoes. The few webdesigners that survived, started wearing Italian shoes, and from that moment on things really got going.

We all know where it went from there. If it wasn’t for those early webdesigners, you wouldn’t be looking at this website! Of course, something like the AOL – Time Warner disaster or Internet Explorer 6 wouldn’t have happened either, but that’s just a minor detail in history.

Share/Bookmark

For a small webdesign agency like Windmill Web Work, it is nice to have experience with a niche blogging tool like PivotX, but it is also very useful to know stuff about WordPress, just because everybody assumes you do. Of course WordPress has its downsides as well, especially when it comes to the templating system. PivotX uses the template engine ‘Smarty‘, which means that you don’t have to be a programmer to be able to create a nice lay-out for your blog.

In fact, I was really disappointed with the way WordPress handles templates. Just compare the two screenshots  below of  the code to loop through the blog-entries, and you understand what I mean.

PivotX loop

WordPress Loop

On the other hand, the documentation for WordPress is so well written and organized, that anybody with a little PHP knowledge can learn how to deal with it pretty quick.

Since I have no experience with earlier versions of WordPress than 3.0, I can’t really make a good comparison for pre-3.0 installations of ‘WP’, but I was pleasantly surprised by how easy it was to install.

Install plug-ins from the back-end

Also, installation of plug-ins is a breeze, because you never even have to leave your WordPress back-end to install and activate them.

A big improvement, if I may believe people that have reviewed WordPress 3.0, is the increased ability to use it as a full-blown CMS. Now, truth be told, you can pretty much do the same with PivotX, but that requires more work.

Another big advantage of WordPress is the amount of plug-ins that are available for it. Of course there is a lot of junk and pieces of code that are incompatible with version 3.0, but still there are a lot of add-ons available. PivotX has only a small amount of (high quality) ‘extensions‘ available, and the number is growing every day, but I think it is safe to say that it will never get to the level of WordPress. It’s not hard to write your own extensions for it, but of course it does require some programming knowledge.

A pro of PivotX is the support community. The community is very small, but that has its advantages. If you have a problem, you can pretty much contact the lead developers directly (through the support forum), and it is almost guaranteed that your problem will be solved within the next 24 hours. Even requests for new extensions and functionalities are looked at on a daily basis, and if your request makes sense, there is a good chance it will be included in the core, or somebody will take the time to write an extension for you.

Where PivotX is especially lacking, is in the documentation department (although that’s being worked on as well). The basics are there though, and for most users that will be enough. The WordPress Codex is very well organized, and there are thousands of tutorials available online with advanced tips & tricks.

As a conclusion, I think it is safe to say that PivotX is the perfect choice if you want to start a blog. There is not a lot of choices in available themes and extensions (‘plug-ins’), so if you want something unique, you’ll have to do that yourself. The good thing is, thanks to Smarty, it’s easy to do. It is also very lightweight, and has native support for mod-rewrite (‘pretty links’) and other important things. For small websites with limited functionality, like my personal blog, PivotX will always be my first choice.

PivotX has just reached version 2.1.0RC (Release Candidate), and is being improved every day.

If you want to start a more complex website, and you don’t have any experience with programming, WordPress is probably the right choice. Although it is somewhat ‘bloated’ with features, a lot of people don’t mind that. If you don’t know what it is, don’t use it, and it will work out-of-the-box. Everybody can install nifty little additions without even using an FTP client or other scary things.

And oh, for people looking for the GIMP tutorials I had on my ‘old’ blog: they’re gone. I did not want to go through the trouble of converting the PivotX entries to WordPress, although I’m sure it wouldn’t be that hard. The good news is, in the future I will be publishing tutorials again, so just come back on a regular basis! (ever heard of RSS feeds? You can subscribe to the feed, so you’ll stay updated…

Share/Bookmark