The purpose and goal of the new inchoo.hr website is simple: To attract potential employees, educate them and give them a good idea of what working at Inchoo is all about. We intentionally put emphasis on career section, making it the most prominent part of the homepage. Homepage also features a rich multimedia section with videos and pictures. We created detailed explanations of the types of employees we’re looking for and outlined all of the benefits and opportunities that working at Inchoo gives you.

Since the goal of the project is to attract potential employees, and job applications started arriving immediately after the launch, I’d say we achieved exactly what we wanted and project is a success.

Website’s beautiful design is a work of Lyssandro. Slicing and coding was done by Stanislav. This was Stanislav’s first project at Inchoo and I’m proud that he did such a good job. Project management and copy-writing was done by yours truly.

It’s highly advised to read part1 first to understand what’s going on.

When our TWIG engine autoloader is ready, and our plugin is activated from wp-admin side, we can go to wordpress themes folder and make new theme folder. Inside our theme folder, let’s make starter file: ‘index.php’ slightly modified to fit our needs:

<?php
wp-content/themes/Our theme folder/index.php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Our theme
 * @subpackage Our theme
 */

$loader = new Twig_Loader_Filesystem(dirname(__FILE__));
$twig = new Twig_Environment($loader, array(
            'cache' => false
        ));
$template = $twig->loadTemplate('index.html.twig');

$template->display(array('variable1'=>$variable1,'variable2'=>$variable2 ...));

After we made that, we should make starter file for out twig theme: index.html.twig and all the other necessary files for our theme with twig templating possibilities.

But, there is one more problem with wordpress: How can we reach easy way wordpress environment functions defined from our TWIG template?

We should pass that variables somehow to TWIG so they can be used.

After some brainstorming, I made to this solution:
let’s make a some kind of proxy class in our twig engine plugin folder so we could pass instance of that class to our twig engine and make all necessary calls to wordpress functions from inside that class. Is that many work to do? Must we define all the wordpress functions inside our class to reach them?
No. Let’s add this to our custom file that we autoloaded in part1, so our file looks like this:

<?php

<?php
/*
…. /wp-content/plugins/wp_twig_engine/Wp_TwigEngine.php
  Author: Darko Goleš
  Author URI: http://inchoo.net/author/darko.goles/
*/
*

class Wp_TwigEngine_Autoloader {

    static public function register() {
        ini_set('unserialize_callback_func', 'spl_autoload_call');
        spl_autoload_register(array(new self, 'autoload'));
    }

    static public function autoload($class) {
        if (0 !== strpos($class, 'Wp_TwigEngine')) {
            return;
        }

        if (file_exists($file = dirname(__FILE__) . '/../' . str_replace(array('_', "\0"), array('/', ''), $class) . '.php')) {
            echo($file);
            exit;
            require $file;
        }
    }

}

class OurTwigProxy {

    public function __call($function, $arguments) {

        if (!function_exists($function)) {
            trigger_error('call to unexisting function ' . $function, E_USER_ERROR);
            return NULL;
        }
        return call_user_func_array($function, $arguments);
    }
}

You see, I used php __call function to make this class somekind proxy for our wp functions.

Let’s see our index.php inside our theme folder now:

$site = new OurTwigProxy();
$loader = new Twig_Loader_Filesystem(dirname(__FILE__));
$twig = new Twig_Environment($loader, array(
            'cache' => false
        ));
$template = $twig->loadTemplate('index.html.twig');

$template->display(array('site' => $site));

you see, now we made instance of our autoloaded ‘proxy’ class an passed it into template.
From inside template we can now call any WP functions that we need:

#{file: index.html.twig}#

{% if site.is_category %}
...
Hello from here
...
{% endif %}

Those two articles about twig was just idea, and I didn’t finish this project yet. I will try to finish this code and also implement ‘yaml’ config file possibilities to be used for wordpress theming, but that will be content of next part. Thanks for now, and I would like you to leave some comments what you thing about this idea.

Cheers

Maybe someone will say: this is a crazy idea. Why would someone want to do that?
Maybe it really is crazy, but I would say: why not?

What is TWIG? TWIG is new generation php templating engine made by Sensio Labs. It is used in their new project Symfony2 as main templating engine provided with framework.
As official page says:

Fast: Twig compiles templates down to plain optimized PHP code. The overhead compared to regular PHP code was reduced to the very minimum.
Secure: Twig has a sandbox mode to evaluate untrusted template code. This allows Twig to be used as a template language for applications where users may modify the template design.
Flexible: Twig is powered by a flexible lexer and parser. This allows the developer to define its own custom tags and filters, and create its own DSL.
It is not necessary to explain in detail why will someone (me) want to use that as wordpress templating engine, but one of the main reasons is that I want to rewrite some messed up php template for WP to better code organized one, and at the and I want it to be with cleaner code as possible.
I don’t like very much when is necessary to mix up php tags and functions inside HTML code to make it work.
After some thinking about TWIG and how to implement it in my WP installation I got idea:
I will make plug in for WP that will provide all necessary stuff to start using TWIG with WP.

First I created the plugin folder named wp_twig_engine.I put folder named ‘lib‘ downloaded from twig-project site in there. So I had the twig library almost prepared for using.
Now I had to find some appropriate wordpress hook to inject my code into wordpress application logic. After some investigating and testing, I found that it will be possible to use the ‘init‘ hook and register autoloaders for TWIG library and my custom class in the same function, so I can reach my code from inside template folder later.

Main plugin file: wp-twig.php

<?php

/*
  Plugin Name: WordPress Twig templating engine
  Version: 1.0
  Plugin URI: http://inchoo.net
  Description: Engine for creating twig templates for wordpress
  Author: Darko Goleš
  Author URI: http://inchoo.net/author/darko.goles/
 */
//Main twig library autoloader file
require_once dirname(__FILE__) . '/lib/Twig/Autoloader.php';
//My custom class made, I also want it to be autoloaded
require_once dirname(__FILE__) . '/Wp_TwigEngine.php';

function twigAutoLoad() {

    Twig_Autoloader::register();
    Wp_TwigEngine_Autoloader::register();
}

add_action('init', 'twigAutoLoad');
?>

Just to show you how to autoload my custom class with that (of course I got idea from original twig autoloader and just changed the code to fit my needs:

<?php
/*
Wp_TwigEngine.php
  Author: Darko Goleš
  Author URI: http://inchoo.net/author/darko.goles/
*/
class Wp_TwigEngine_Autoloader {

    static public function register() {
        ini_set('unserialize_callback_func', 'spl_autoload_call');
        spl_autoload_register(array(new self, 'autoload'));
    }

    static public function autoload($class) {
        if (0 !== strpos($class, 'Wp_TwigEngine')) {
            return;
        }

        if (file_exists($file = dirname(__FILE__) . '/../' . str_replace(array('_', "\0"), array('/', ''), $class) . '.php')) {
            echo($file);
            exit;
            require $file;
        }
    }

}

And that’s it from the plugin side for now. Just have to implement it in the template folder. That is additional theme for another article.

FYI that links inside content look like this:

<a type="amzn"> “Jerusalem the Golden” performed by Rupert Gough–Malcolm Archer–Wells Cathedral Choir</a>

When links was formed like that, our site could never pass HTML validation, and also we had some click-able non-functional links in our content. It would be very hard work to parse every article inside database and remove that links from our content, because we have much content that would need checking and fixing.

I found the good plug-in that parses that links into proper formed links and making our links work, but there was one more problem to solve with that:

With regular Amazon API, like this new plug-in does, links are parsed with some included Javascript files that are linked directly from Amazon.com and small chunk of calling Javascript are included inside page to make it work.

But, what is happening when my colleagues develop iPhone application that reads content from web site’s rss feed are trying to make this links functional? They have to manually include all of this Javascript inside iPhone application and run that script locally from device.

I don’t think that is the best solution for us. So decided to make some own wordpress plug-in that will build that links with php and show them already parsed on web page and also inside feed to avoid Javascript parsing.

Here is the code:

<!--?php /*   Plugin Name: Amazon ASIN links parser   Plugin URI: http://www.surgeworks.com   Description: Plugin that parses Amazon links with ASIN code and converts them to full Amazon affiliate url without javascript   Version: 1.0   Author: Darko Goleš   Author URI: http://inchoo.net/author/darko.goles/   License: Surgeworks - all rights reserved.  */ define('DVO_LOCATIONS_PLUGIN_PATH', dirname(__FILE__)); define('DVO_LOCATIONS_PLUGIN_URL', get_option('siteurl') . '/wp-content/plugins/' . basename(DVO_LOCATIONS_PLUGIN_PATH)); include(dirname(__FILE__) . '/simple_html_dom.php'); //Adding filter into content add_filter('the_content', 'parseLinks'); function parseLinks($content) { 	/*if(is_feed()) 	{*/ 		$html = new simple_html_dom(); 		$html--->load($content);

		$ret = $html->find('a[type="amzn"]');

		foreach($ret as $val)
		{
			if(isset($val->asin))
			{
				$asin = $val->asin;
				$linktext = $val->plaintext;

				$newLinkStr = buildURL($asin,$linktext,'divine-office-20');

				$val->outertext = $newLinkStr;
			}

		}

		$content = $html->save();

	/*}*/
    return $content;
}

function buildURL($asin, $linktext, $affiliate)
{
	return '<a href="http://www.amazon.com/dp/' . $asin . '/?tag=' . $affiliate . '">' . $linktext . '</a>';
}

For parsing I used the SimpleHtmlDOM library that can be found on web for free download.

Now when displayed, Amazon links looks like this:

http://www.amazon.com/dp/B0000542GQ/?tag=divine-office-20

Feel free to use this code to make own plugin for AMZN links with ASIN code.

Cheers

I this particular case, we want to add our map to wordpress page of our choice inserting ‘{dof_google_map}’ text on the place we want to show our map.

So, for this case, we will use: add_filter(‘the_content’, ‘renderMap’);
in our plug-in to insert our map and function renderMap will replace ‘{dof_google_map}’ with our map container div and also, we could add some HTML if needed on that page. For example purposes, we added a button to trigger Javascript that generates map inside container div named: ‘map_canvas’.

<?php

/*
  Plugin Name: Test site Locations Google Map
  Plugin URI: http://www.surgeworks.com
  Description: Plugin that shows live data map of visitors currently on site testsite.com
  Version: 1.0
  Author: Darko Goleš
  Author URI: http://inchoo.net/author/darko.goles/
  License: All rights reserved.
 */
define('DVO_LOCATIONS_PLUGIN_PATH', dirname(__FILE__));
define('DVO_LOCATIONS_PLUGIN_URL', get_option('siteurl') . '/wp-content/plugins/' . basename(DVO_LOCATIONS_PLUGIN_PATH));
//Adding filter into content
add_filter('the_content', 'renderMap');

//Function that replaces '{dof_google_map}' string with container div for our map
function renderMap($content) {
    $strtoreplace = "{dof_google_map}";
    $outputtext = '';
    //TODO: remove this button later and implement that call in 'body onLoad()'
    $outputtext .='<button type="button" onclick="init_map()"> This is test button. Click me to see the map!</button>';
    //TODO: Make dimensions to enter from wp-admin and not from here
    $outputtext .='<div id="map_canvas" style="width: 570px; height: 500px; z-index:100;"></div>';
    $content = str_ireplace($strtoreplace, $outputtext, $content);
    return $content;
}

The Javascript function init_map() is located in separate file that is included in header of the page.

How it is included? It is necessary to include it only on Map page and not in other pages of the site, so Javascript will not be added unnecessarily on each but just where needed.

//Filter that help putting Javascript in header
add_filter('the_posts', 'add_script_in_header'); // the_posts gets triggered before wp_head

//Function that decides to put our Javascript in header only on page with map
//not to insert in other pages
function add_script_in_header($posts) {
    if (empty($posts))
        return $posts;
    $shortcode_found = false; // use this flag to see if styles and scripts need to be enqueued
    foreach ($posts as $post) {
        if (stripos($post->post_content, 'dof_google_map') > 0) {
            $shortcode_found = true;
            break;
        }
    }
    if ($shortcode_found) {
        //TODO: Need to put google api key on wp-admin side
        $google_maps_url = 'http://maps.google.com/maps?file=api&v=2&key=' . get_option('dvolocgmap_gapikey') . '&sensor=false';
        wp_enqueue_script('google_maps_script',$google_maps_url );
        wp_enqueue_script('script-to-generate-map', DVO_LOCATIONS_PLUGIN_URL . '/lib/script.php');
    }
    return $posts;
}

You may ask: where is our Javascript included in header that generates google map?

Because that Javascript needs to be dynamically generated depends of locations of visitors every time, I put it in php file and named it script.php, but in beginning of the file put:

“Header(“content-type: application/x-javascript”);”

script.php

<?php
Header("content-type: application/x-javascript");
/*
 * Autor: Darko Goleš
 * Script that connects to Google API and preparing Javascript to be included in header of wordpress page
 */
require_once dirname(__FILE__) . '/MapRenderer.php';
//New instance of map renderer
$map_renderer = new MapRenderer();
//Load functional javascript with locations data inside
//Map renderer class reads from XML and generate Javascript for each visitor location like this:
//$generatedJavascript .= 'var latlng = new GLatLng(' . $item->lat . ',' . $item->lon . ');' . "\n";
//$generatedJavascript .= 'map.addOverlay(createMarker(latlng,' . $item->id . ',null));' . "\n";
$locations_generating_script = $map_renderer->getMapJavascript();

$script = <<<EOD
/* <![CDATA[ */
    function init_map() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
       map.setCenter(new GLatLng(0, 0), 2);

        map.setUIToDefault();

        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);

        // Creates a marker whose info window displays the letter corresponding
        // to the given index.
        function createMarker(point, index, dto) {
          var letter = String.fromCharCode("A".charCodeAt(0) + index);
          var letteredIcon = new GIcon(baseIcon);
          letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
          markerOptions = { icon:letteredIcon };
          var marker = new GMarker(point, markerOptions);

          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("<b> (" + letter + ")</b><br/>"
                    +"Address: "+dto.address+"<br/>"
                    +"Name: "+dto.firstname+" "+dto.lastname+"<br/>"
                    +"email: " + dto.email+"<br/>"
                    );
          });
          return marker;
        }
        $locations_generating_script // here is our dynamically generated javascript from locations.xml file
      }
    }

/* ]]> */
EOD;
//Finally echo our dynamic javascript
echo $script;

I hope that this tutorial will be helpful with idea of using Javascript from wordpress plug ins.

It’s not so heavy, but you have to pay attention on some really important things and because of that, I would like to say that it is not heavy but more sensitive task to do.

So, let’s start with article.

Imagine this situation:
We have one live site on http://somedomainold.com with fully functional WordPress installation, many articles, plugins installed on the site. Let’s say that current database is bigger than 500 Mb. We have access to control panel, ftp and also ssh on live server.
Now we want now to copy same WordPress installation to http://portal.somedomain.com (into sub-domain of new domain on new server).

Why did I mentioned SSH?

Because I don’t want to download database file and then upload it again on new test server but I want to transfer whole data without downloading it.
(Of course, in this case we must have ftp and ssh access to new server also).

TIP: For those that never used SSH before, I would advice that use Google for basic UNIX terminal commands, because they would need them.

First of all, we have to back up live site (just in case something goes wrong) and also we can use backup to transfer both database backup and files backup to new server without problems.
Often it could be done through control panel of live site. If not, there are alternatives, but I will talk just about first mentioned case for now.

When backup of whole site is finished, copy that ‘somefile.tgz’ backup file into public folder either from control panel or from some root ftp access so we could download that file via URL (for example: www.somedomainold.com/somefile.tgz. (Do not forget to delete it after transferring!)
Next, we have to connect by SSH to new server with our credentials (I often use Putty for SSH access because it is relatively simple, but there are more tools available for free).
Fire up Putty and enter basic connection information in sessions category: Host-name / IP address of server we will connect to and press ‘Open’ button to start the session.

If all went right you should see console like this:

Now it’s time to do some UNIX stuff.
First we want to choose our folder on server where we will host out new wordpress installation. (Using comands “cd”, “ls” will give us that possibility).
Next, we need to is ‘download’ that backup file from old server to new. We can do it with “wget” command in terminal.

After that we want to decompress our downloaded backup package and move site files from inside unpacked folder to our sub-domain directory and also extract our sqldump file so we could restore it on our mysql database on new server. (I didn’t mention that we should first create mysql database and assign a database user with root credentials to it and one of the easiest possibilities is to do that through control panel of new site).
For file decompressing you can use ‘tar -zxvf yourfile.tar.gz ‘.

Because I went too deep in details, let’s back to main theme.

After these ‘few’ steps, we should ensure that all is on it’s place, so finally we should finish with folder structure like this:

/html/portal/
here should be out wordpress installation (index.php, .htaccess, folders wp-content etc.)

(By the way, folder ‘html’ is in our case root domain public directory and folder name portal is our sub-domain folder where http://portal.somedomain.com points to). Why is this important? Because of .htaccess setup later in this article.

Next we should replace all occurrences of ‘http://somedomainold.com’ with ‘http://portal.somedomain.com’ in our sqldump file.
First time I tried to do that with ‘nano’ text editor in SSH terminal, but database was too big for that editor, so Putty and SSH connection crashed every time and I decided to take advantage of another tool in terminal, so I used ‘vi’ editor for that purpose because it won’t load whole file in memory, just visible part so terminal wouldn’t crash.
(Use Google to search for ‘find and replace with vi’ tutorial).

After replacing domain names in sql dump file save it and exit vi editor.

So, now we have files of site on right place and also sql dump file ready to restore to new database.
(of course while ‘vi’ editor is open we should probably add line on top of existing sql statements: USE new_database_name; )

Let’s Google again for instructions how to restore sql dump file to mysql using console. There are plenty of tutorials doing that.

When restoring database is completed we are almost ready to start our transferred wordpress site.

Open up your browser and try to enter to wp-admin: http://portal.somedomain.com/wp-admin,
log in with old site credentials and check general settings for updating URLs of the site. Also check permalinks settings and save it again.
If new wordpress site is not working or displays only frontpage and not other pages in menu, probably is some problem with rewrite and / or permissions in .htaccess file. So in that case – delete .htaccess file or rename it via ftp and go to wp-admin – > settings – > permalinks again and save it again and new .htaccess file will be created with some wordpress lines.
From my experience because our installation was in root domain before and now is on subdomain,
we need to add subdomain folder name before /index.php in .htaccess file (like on image) and all should be OK.

Maybe there are easier ways to move site, maybe there are better ways, but I felt that I have to write about that from my experience before, so thank you for reading .

This is also an Open Source project, which means we can play a part in its development. WordPress for Android is released under the GNU General Public License. Both app and source code are free to download and use however we’d like. Sweet!

Download WordPress for Android

If you have a barcode scanner installed on your device, scan the code here to be taken directly to the download page for WordPress for Android.

Other way is top open Android Market application and search for “wordpress”. Select and install the application that is published by Automattic, Inc

Summary

Although the app itself lets you easily write blog posts, edit and create pages aswel as view traffic stats, I don’t believe I will use anything else than comment management.

Wordpress for Android Comments

After all the work we have done to get our new website up and running, we are now trying to get the attention of the design community and show that we do design in the same way we do development; with distinctive passion and quality. If you want to help us to win this award, all you have to do is to go to cssdesignawards.com hover the image and vote for us!

Thank you all!

Lyssandro Reis

Project Definition

We can say we are already recognized as Magento developers, so the main objective was to let the world know that we do design on the same level of excellence. We all agreed that we needed a fresh design, something to achieve that “Wow” effect. For started we brainstormed whether we were talking about re-designing the website keeping its structure or we will take totally different direction.

Tomislav and Toni pointed out some important competitors to provide a bigger picture. We discussed competitors strategies, checked our Google Analytics data and decided that I was free to suggest something completely different. Two of them already had an idea, so the differences in our thoughts could improve everybody’s predictions about the project.

Wire-framing

The wire-framing phase was always a very collaborative step at Inchoo. Ideas and suggestions generated by the team gave me a valuable opportunity to challenge myself and enhance the outcomes. After researching and being eager to show something out-of-this-word, I reached the following approach:

As you can see, the homepage had suffered some major structural changes and the blog wasn’t the star anymore. It was an interesting exercise but it brought a lot of questions.

The research and thought involved has added to the project and opened another window for discussion. After throwing some ideas back and forth we all agreed that along with stating that “We have top-notch designers and we can provide awesomeness in design as well as in Magento Development”, we needed to be considerate to our fellow reader, to the Community of Magento developers and business owners that compose our regular audience. We should not assume an institutional image or give priority to a design spectacle over the valuable content we provide and our visitor’s interaction.

It did not take a lot to get everybody on the same page. We then decided to identify the blog as the core of our web presence. Therefore, we put the homepage planning aside for a moment and jumped straight into the blog wire-framing.

See our single post wireframe below.

We concentrated our efforts in the improvement of our blog features and structure. Everything now should fall in place as we proceed. With everybody in agreement, we decided to start the blog design.

The Design Challenge

We didn’t want to be compared to our competitors. The idea was simple: as we spend most of our lives working and having a lot of fun doing it, we wanted to have a website that reflects this. We were looking for an original approach, a concept aligned to our culture and personality.

The light atmosphere and funky mood that is present all over the site, posts, tweets and so on, drew my attention.

As some of you know, Hrvoje – one of our developers is the illustrator of The Inchooers, the bunch of funny characters, inspired by the Inchoo developers themselves. He is bringing the jokes, the funny episodes and even Chuck Norris into our web presence for a long time. Everything with good humor, a dash of irony and sarcasm at times. It was definitely a good idea to emphasise it on our new visual. Hrvoje was very enthusiastic about it.

Everybody was quite happy with this approach and it has generated a series of inputs and feedback. The major concern was whether it has gone too playful or too “childish”. However, we were all confident that we were on the right track, it would be just a matter of improving this language and finding the right tone.

It was time to look into details and present a more polished design proposal that would solve those issues.

This time we created the Wow-effect we were looking for.

Front-end WordPress Development

As well as design, I was also responsible for the front-end development on this project.

The design created some challenges that made it necessary to use of some new css3 capabilities, for which we are providing fallbacks for ie7 using modernizr.com. We opted for using web-fonts for the headers instead of relying on web-safe fonts or images.

It’s been a great opportunity to experiment these new resources and has made the front-end development more enjoyable. In fact, we are still testing, adding some bits and pieces and improving the theme as we go. We decided to go live and finish with the little details in middle-air fly.

Vanja Devcic was the front-end developer responsible for the CMS implementation. We have been working in close contact in this phase and the nature of this project gave us the opportunity to try different solutions for different challenges and processes. Although we’ve been working from different sides of the world ( I, from Sydney, Australia and Vanja from Osijek, Croatia), I always had a feeling like we were in the same office.

Besides WordPress development, he has provided an impressive amount of support which contributed to the high-quality output you can see now.

Teamwork

I definitely should mention Renato Carvalho, Rafael Torales and Ney Ricardo form our Design Lab for their positive re-marks during the whole process.

Internal linking – After years of expectations WordPress will gain more on CMS functionality then ever and make wordpress even more SEO efficient.

Writers will now have the ability to browse thru posts and pages from the admin and add the internal links directly while writing the post. Guess I’ll stop using dedicated desktop apps that don’t support that.

Front-End Admin Bar – Having the back-end on the front-end in terms of a on-top placed administration bar will provide easy access to the dashboard, post writing etc.

This would come in handy for multisite wordpress sites and for those who like having some bar sitting on top Judging by the community feedback it’s a very welcomed feature.

Admin Screens on AJAX – This one will allow reordering/sorting columns for the admin interface. One great application of this is with the sorting, pagination and most importantly searching. Hope this one gets applied to comments also but as they state on their dev blog “it’s still being reviewed for inclusion”.

Next presented features are more interesting to developers and advanced users since they bring WordPress even closer to that CMS flavor:

Advanced taxonomy queries – The taxonomy queries, as announced, should be easier to create and enable sorting posts and pages a lot easier. I guess that recreating multiple taxonomies through categories should be a thing of the past.

Something like: “I’d like a list of all your cars without the stereo please”. “Yes sir, here you are.” but without wordpress actually talking with the user

Post templates / Post styles – This feature brings WordPress a few steps closer to an actual CMS with the ability for the user to select a pre-defined post template or post style, carefully prepared by a developer and accessible via drop-down.

All of these improvements are also accompanied with bug fixes and of course, some UI changes and enhancements. This will also be the last version to support PHP 4.

The release is scheduled for December 15, a month after the Beta release.

You can read their full process and scope at their dev blog.

A little bit of OK Auto: Today, over 30 years later, OK Auto can be your main source for all of your automotive and off-road needs. With 22 employees who have worked here an average of 13 years, they have cumulative 267 years worth of industry experience! You can find them at the lovely place called Stewartsville in New Jersey, USA.

With standard features of an online store that fit into Magentos’ in-the-box feature list, they wanted News Article Manager, Image Gallery, Event Calendar, Shop by Vehicle Fit extension, and many more. After some consideration whether it is better to have everything in Magento or go worth WordPress integration, we decided to take the second route. Magento is getting better CMS features with every version, but it is still long way from WordPress. Check the website out at: http://ok4wd.com/

Let me be blunt: Magento development isn’t for the faint of heart. Magento development is extremely involved as its file structure and the way it functions is complex. Not to mention its extremely picky about the way things must be done. It’s very easy to be over your head in problems and confusion. The guys at Surgeworks/Inchoo not only knew what they were doing, but also helped keep the project moving when we dragged our feet. Everyone was professional, knowledgeable, and took great care in not only the website, but also our company as a whole. When we had crazy idea’s, they let us know if it were possible or if were about to build a sand castle in quick sand.

I cannot explain how grateful I am that we had such a group of knowledgeable developers working on our website. Over the past two years (I said we dragged our feet!), it seems like I can now fly out to Croatia, call my friends at Inchoo and grab a bite to eat. They are just that great as developers and as people. To be honest, I couldn’t see anyone else doing what they did. Looking back, we had some crazy request and features we wanted. They went beyond the call of duty as developers and as long as I’m in charge, no matter the company I work for at the time – these guys will be the first that I email.
James Henry, Website Project Leader, OK Auto

This major editions bares the code name Thelonious named after Thelonious Monk of course following the tradition of naming versions inspired by famous Jazz musicians.

1. Dashboard

WordPress dashboard remains the same in terms of layout and functionality except the new item in the Dashboard menu (moved from the tools menu) where the “Updates” section is now present as a separate page with info about the version of WordPress, plugins and themes you are currently running. There is also an option for reinstalling your wordpress automatically or download the latest version and reinstalling it manually.

2. Post thumbnail is now Featured Image

Since WordPress 2.9 you had the option of adding the post thumbnail to a specific post. It’s media label is now changed from “Post thumbnails” to “Featured image”.

There is a slight drawback to this functionality since it doesn’t work out of the box with the new wordpress default theme called “twentyten” so you have to add this line of code to the loop.php file in order to make it work:

How to:

1. Open up the loop.php from the theme folder and locate line number 136 where the “entry-content” div is.
2. Insert the code below on the new line and save the file.

< ?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(250,210), array("class" => "alignleft post_thumbnail")); } ?>

Note: The loop.php file now holds pretty much everything from the index.php functionality while the index.php is reduced to 32 lines holding mostly comments and loading the ‘loop’ and ‘index’. This is a step forward in my opinion since now you can leave that index.php intact and override it with loop-index.php in the child theme if child themes are your thing

3. Menu(s) administration – About time!

Since ever WP users had to install a plugin in order to handle the menus. No more. Following the “The less plugins the better” code, you now have the native support for the menu’s content and placement.

Custom links, Pages and categories can be added and then additionally edited. You can change the Navigation label and even the title attribute and order them with simple drag and drop. Neat

4. Tools – Import/Export

If you ever used the import functionality in WordPress you’ll be surprised now that you’ll have to install the plugin in order to do that although some importers are listed you’ll get this modal window asking you to install it first:

The export functionality now has numerous options: Start date, End Date, Authors, Categories, Post tags, content types and statuses.

5. The Custom Post Types and Multi-site feature

These highly anticipated WordPress features have to be enabled first in order to be used The custom post type requires some code writing in the functions.php:

function post_type_tshirt() {
register_post_type( 'tshirt', array( 'label' => __('T-Shirts'), 'public' => true, 'show_ui' => true ) );
register_taxonomy_for_object_type('post_tag', 'tshirt');
}
add_action('init', 'post_type_tshirt');

Enabling Multi-site feature requires temporarily disabling all of the plugins and adding this code to the wp-config.php:

 define('WP_ALLOW_MULTISITE', true);

Finally, for the full list of features go to codex.

Cheers and thanks for reading!

I made this table that compares privileges of different WordPress user roles (Administrator, Editor, Author and Contributor), I hope it helps you!

The Content Permissions module adds a meta box for the post/page editor that allows you to grant permissions for who can read the content based on the the user’s capabilities or role.

The Shortcodes modules rovides a set of shortcodes that may be used to restrict or provide access to certain areas of your site from within the post editor (or other areas where shortcodes are allowed).

Two more modules compelte the plug-in arsenal: Template Tags adds new functions for use within your WordPress theme for various things and Private Blog will create a blog that can only be accessed by users that are logged in (redirects them to the login page).

At a glance, the plug-in is very well documented so be sure to check /wp-content/plugins/members/readme.html after you install the plug-in (the documentation is not easily accessible from the plug-in’s website).

The plug-in was released on September 17, 2009 and the great news is it’s open source: it’s not a commercial product like most of its competitors… Check it out on Justin Tadlock website.

WordPress Popular Posts

The first one on the list is a plugin that comes with it’s own administrative interface which offers just enough options you would need out of it. Here’s the screenshot from the admin interface.

Displays popular posts, supports images, comments and customizable through WP admin.

Description: Retrieves the most active entries of your blog and displays them with your own formatting (optional). Use it as a widget or place it in your templates using < ?php get_mostpopular(); ?>

Plugin URI:

http://wordpress.org/extend/plugins/wordpress-popular-posts/

Author URI: http://wordpress.org/extend/plugins/wordpress-popular-posts/

Recent posts

Recent posts plugin is pretty self explanatory with options in displaying the number of posts, skipping posts and a few other “might come in handy” tweaks for your needs.

Description: Retrieves a list of the most recent posts, you may pass parameters when calling the function to configure some of the options.

Plugin URI: http://wordpress.org/extend/plugins/recent-posts/

Author URI: http://nickmomrik.com/

Recent Comments

Description: This plugin displays excerpts of the most recent comments and/or trackbacks that have been posted to the articles in your blog.

Plugin URI:http://blog.jodies.de/2004/11/recent-comments/

Author URI: http://blog.jodies.de

On top of retrieving a list of the most recent comments it has it’s own pretty well programmed backend where you can choose from the number of options like:

• Number of comments displayed
• “Chopping” of the comments text
• Word wrapping
• Excluding by author

… and a few other handy options.

Hope you find these 3 plugins useful enough to put them in your toolbox and save time

Let’s say you want to have a sidebar box with the latest news from your wordpress blog on your magento powered store, and you want to show the thumbnails with it. We’re going to do it by displaying articles from our RSS feed.

First, we have to make sure to generate thumbnails in our Wordpres RSS feed. Just paste this class into your wordpress theme’s functions.php file. This function grabs the first image in your article and attaches it to RSS feed article.

class RssImage {
var $nextgen_shortcode_backup = array();
var $thumbs = array();

function RssImage() {
// 'wp' hook couse is_feed is too early for 'init'
add_action('wp', array($this,'init'));
}

function init(){
global $shortcode_tags;
if(!is_feed()) return;
add_action('rss2_item', array($this,'rss2_item'));
add_action('rss_item', array($this,'rss2_item'));
}

function rss2_ns(){
echo 'xmlns:media="http://search.yahoo.com/mrss/"';
}

function rss2_item(){
global $post;
$thumb = $this->get_thumb();
if(!$thumb) return;
echo "<enclosure url='".$thumb."' type='image/jpg' />";
}
function get_thumb() {
global $post, $posts;
$thumb = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img .+src=[\'"]([^\'"]+)[\'"].*/>/i', $post->post_content, $matches);
$thumb = $matches [1] [0];

if(empty($thumb)){ //Defines a default image
$blogurl = get_bloginfo('stylesheet_directory');
$thumb = $blogurl."/images/default.jpg";
}
return $thumb;

// NextGEN gallery?
if (class_exists('nggdb')) {
$tagregexp = 'nggallery|imagebrowser|slideshow';
$pattern = '\[('.$tagregexp.')\b(.*?)(?:(\/))?\](?:(.+?)\[\/\1\])?';
$m = array();
if(preg_match('/'.$pattern.'/s', $post->post_content, $m)) {
$attr = shortcode_parse_atts($m[2]);
if(isset($attr['id'])){
if( ($gallery = nggdb::find_gallery($attr['id'])) and $gallery->previewpic){
if( ($image = nggdb::find_image($gallery->previewpic)) ) return $image->thumbURL;
}
}
}
}
return false;
}
}

$rssimage = new RssImage();

In order to create automatic thumbnails, we’re going to use smart image resizer. Download it and place image.php file in your magento theme’s skin folder.

After that,  create a file called latest_news.phtml in app/design/frontend/default/[your_theme]/template/callouts/latest_news.phtml. Here, we are going to grab image, title and summary from articles in feed and display it in magento.

< ?php $channel = new Zend_Feed_Rss($this->getUrl('press/feed/'));
function text_limit($string, $length, $replacer = '...') {
$string = strip_tags($string);
if(strlen($string) > $length)
return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
return $string;
}?>
<div id="news-box">
<div id="news-header"><a href="<?php echo $this->getUrl('');?>press/">view all</a></div>
<ul>
< ?php $newscount = 0; ?>
< ?php foreach ($channel as $item): ?>
< ?php $newscount ++; ?>
< ?php if ($newscount > 2) break; ?>
< ?php $image=''; ?>
< ?php $limit=150; ?>
<li>
< ?php $image= $this->getSkinUrl('')."image.php/".$item->enclosure['url']."?width=101&amp;height=67&amp;cropratio=3:2&amp;image=".$item->enclosure['url'];?>
<a href="<?php echo $item->link; ?>"><img src="<?php echo $image;?/>"  title="< ?php echo $item->title; ?>" width="101" height="67" /> </a>
<div>
<h2><a href="<?php echo $item->link; ?>">< ?php echo $item->title; ?></a></h2>
< ?php $excerpt = $item->description; ?>
< ?php if (strlen($excerpt) > $limit) :
$excerpt = substr($excerpt, 0, strrpos(substr($excerpt, 0, $limit), ' ')) . '...'; ?>
<p>< ?php echo $excerpt; ?>
<a href="<?php echo $item->link; ?>">Read more >></a>
</p>
< ?php endif;?>
</div>
</li>
< ?php endforeach; ?>
</ul>
</div>

You can change the limit of characters in the article excerpt by editing this line of code:

< ?php $limit=150; ?>

And you can change the size of your thumbnail by editing image width and height in this line of code:

< ?php $image= $this->getSkinUrl('')."image.php/".$item->enclosure['url']."?width=101&amp;height=67&amp;cropratio=3:2&amp;image=".$item->enclosure['url'];?>

Now, all you have to do is decide where you want to show it. If you want to show it , for example, in your right sidebar,  open your app/design/frontend/default/[your_theme]/layout/catalog.xml file and under “default” tag update “right” reference with this:

<reference name="right">
<block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>
<block type="core/template" name="right.latest.news" template="callouts/latest_news.phtml"/>
</reference>

And that’s it.

Hope you find this useful.

Cheers.

Our project involved developing a completely new site to replace our outdated one. Magento and WordPress were both new to us, and the learning curve was made so much easier with the help of Branko, who was one of the most professional and capable people I’ve ever worked with in web development. Thank you to the Surgeworks/Inchoo team for bringing this together for us.
Chris Edley, Owner, Edley Imagineering

Like my colleague Ivan Kalaica wrote in his post, “It’s been a while since I’ve written anything here”, but I didn’t get married, finish college or had my birthday, yet …. I’ve found CU3ER \kju:ber\. Yes, this single piece of image slider from Stefan Kovac (progressivered.com) made my day. Here’s why…

As you can see in the video I’ve made with our Kodak Zi8, this is visually a stunning piece of work.

The slider offers some great features like:
it’s FREE, very EASY to set up, ridiculously easy CUSTOMIZABLE via XML,TAILORED to provide a UNIQUE look & feel, INSPIRING,FUN-to-USE.

Seriously, the slider looks awesome the first you see it and the feeling doesn’t wear off as time passes by.
The ease of configuration via XML, provided abundant documentaiton makes the implementation of the slider a breeze and especially if you use it with an iFrame just to fit it on your web-page for a quick look makes this an instant success.

The best visual features are the 3D Image Transitions:

• real 3D Transitions
• flat & phong shading
• horizontal or vertical cubing
• transition direction – left, right, up, down
• duration & delay
• z-multiplier
• cube color
• automatic forward-backward transition direction manager
• to override global settings for each transition …

Without going on with this Cu3erfilia I invite you to see it for yourself:

Cu3er demo: http://www.progressivered.com/cu3er/

Stefan kovac’s info: http://www.progressivered.com/info.htm

Cheers and let’s use the best of the web we can

The site is developed with the Weld team who has direct contact with the actual client.  First (Magento) phase of the project is completed where the goal was to launch an online store with unique design and standard online store functionality. However, the project is not yet complete. We are working on boosting the community goals of the site, especially the interaction between visitors and artists.

So, it the next few weeks you will notice how this website grows from classic online store to the interactive web portal that connects craftsmen from West Virginia mountains with the world.

Easy Chart Builder for WordPress supports 3 different chart types: horizontal, vertical and a pie chart. You can choose any color you want to represent any group compared in the chart.

This should be extremely cool and useful tool for all of the marketers using wordpress out there as we do use lots of data that could be showed in form of a chart.

This is what you can edit in your WordPress charts:

• Chart type (horizontal, vertical or pie)
• Chart’s height and width (in pixels)
• Title of your chart
• Names of groups compared in chart
• Color of groups compared in chart (FF00FF, 482293, 444822 for example)
• Names of values assigned to comparing groups
• You can assign values to the group

This is just a first release, it is expected that in future updates we will have an editor so there will be no need for entering any code manually.

Here is a sample chart made with Easy Chart Builder for WordPress:

[easychart type="pie" height="300" width="620" title="Sample pie chart" groupnames="Group 1, Second group, Group 3" groupcolors="FF00FF, 005599, 229944" valuenames="Value 1, Value 2, Value 3, Value 4" group4values="22, 41, 15, 133"]