Download, installation and customization

Whatif is a WordPress theme, that is, it works over an existing WordPress installation and turns it into the participatory application we are presenting here.

This makes it possible for everyone to install their own version and customize it, although some resources and some knowledge are required in order to succeed. In this guide we are assuming that you already meet some minimal requirements:

• You have a basic knowledge of WordPress and some complementary skills like using an FTP server, editing HTML and CSS code, etc. If you don’t even know those terms, this guide may not be the right one for you. We strongly recommend you to ask someone for help or to contact us directly.
• You have access to a web host with FTP service enabled. If you don’t, you may want to have a look at the various offers you can find around the net, making sure that the hosting plan you get meets the basic requirements for running WordPress (any basic plan should work fine).
• You have an up-to-date version of WordPress installed. If it’s not your case, you can download it here and install it following this guide. Most web hosts allow you to do this directly from a control panel (like CPanel); if you have any questions contact your hosting services provider.

A step-by-step installation and setup procedure follows.

a. Installation and activation

The first step is to install the Whatif Theme on a clean WordPress installation. We do not recommend you to apply this theme on a blog that has already some content, as it won’t probably work as expected. Let’s see how to do it:

1. Download the zipped file which contains the Whatif theme by clicking the following image:
   
2. Install Whatif via FTP like any other WordPress theme. Step by step:
   • Extract the whatif.2.1.zip file to your hard disk.
   • Inside the whatif 2.1 folder you’ll find another one called whatif which contains the theme itself, a file called import.xml which contains the pages and categories you’ll have to import, and the typical readme.txt file.
   • Upload via FTP the whole unzipped whatif folder to your remote …/wp-content/themes/ directory, creating this way a …/wp-content/themes/whatif folder.
3. Activate the Whatif theme from your WordPress panel. To do this:
   • Using your internet browser, enter your admin panel at http://yourdomain/wp-admin and then click on the Appearance menu. On the page that loads next you’ll find all the installed themes.
   • Look for the Whatif theme on the list and click on Activate. Ready!
4. At this point you’ll already have the basics working, but if you access your website you’ll get an error message or see things that aren’t working as expected. Don’t panic, this is totally normal: for the theme to work you need to activate certain plugins and configure some settings. Let’s go for it!

b. Configuration

The next step is to change some settings that will allow the theme to work with all its features. To achieve this, you’ll need to install some plugins and do some easy changes to the theme itself, as we describe next:

1. We’re going to create some pages, categories and menus that are necessary for the theme to work properly. We’ll do it by importing the import.xml file included in the download.
   • From the WordPress control panel, select the Tools menu and inside it the Import option.
   • In the list that appears, click on WordPress.
   • On the pop-up window that will appear, click on Install. This will install the importing application.
   • Next, click on “Activate plugin & run importer”
   • On the next page, upload the import.xml file from your hard disk and click on “Upload file and import”.
   • Now you only have to set which user will show up as author of the imported pages. You can create a new user from here or choose an existing one, as you like.
2. We have now the required pages. You can see and edit them from the WP panel. As a general rule, the ones which have text can be customized by changing it, and the empty ones should stay untouched. Some of them include a message telling that they can be deleted without affecting the whole website. If you still have doubts, look at the theme structure to see what each page is for, or just ask here.
3. The next step is to configure permalinks: from the WP panel, go to the Settings menu and click on the Permalinks option. You can choose the type of permalink you prefer, although we do recommend you to create a shorter one, for example:
   • Permalinks like yourdomain.com/nombre-post. To do that, select the Custom structure field and write /%postname%/ on it. The theme has the capability of automatically creating a title for every message, selecting keywords from the content.
   • Permalinks like yourdomain.com/123. Select the Custom structure field and write /%post_id% on it. This format is less descriptive but much shorter and clean.
4. The next step is to set up the menus in order to get them working properly and to choose what pages we want them to link to.
   • From the WP control panel, select the Appearance menu and inside it, the Menus option.
   • On the Theme location box, you’ll see two drop-down lists. Select the proper options to set them like this:
     Home footer = f-home
     Views footer = f-vistas
     When you’re done, click on Save.
   • Now you only have to add the pages you like (contact, license, credits, etc.) to both menus: the one that will appear under the home page (f-home) and the one that will show under the map and messages views (f-vistas).
5. For the geolocation function to work, you’ll need to get your own Google Maps API key. Don’t worry, it’s fast and easy:
   • Visit http://code.google.com/apis/maps/signup.html
   • In the required field, write your full domain name (including www.)
   • Copy the API key you’ll get (a very long alphanumeric code).
   • From the WP control panel, go to Appearance and then to Editor.
   • Inside the list on the right side, look for the general-vars.php file and click on it in order to edit it in the main window.
   • Look for this code: $apigooglemaps =”APIkey”; and replace the word “APIkey” with the code you just got.
   • Click on Update file to save changes, and you’re done.
6. Next we’ll install the plugin that allows users to vote every entry.
   • At the WP control panel, select the Plugins menu and inside it, the Add new option.
   • Use the integrated search field to look for the I Like This plugin, install it and activate it.
   • Upload using FTP the i-like-this.css file you’ll find in the Whatif installation folder, to the wp-content/plugins/i-like-this/css directory, overwriting the existing file.
   • If you want to customize the images used by this plugin, you can upload via FTP the files add.png and heart.png contained in the sub-folder /images from the theme (or another ones with your own design) to the wp-content/plugins/i-like-this/css folder on your server, overwriting the existing ones.
7. Now we’ll install another required plugin:
   • From the WP control panel, select the option Add new under the Plugins menu.
   • Use the integrated search field to look for the Query multiple taxonomies plugin, install it and activate it. There you have it!
8. The next step is to enable the custom icons for each category. We can do this with the help of another plugin and some configuration:
   • From the WP control panel, select the option Add new under the Plugins menu.
   • Use the integrated search field to look for the Category Icons plugin, install it and activate it.
   • Now, under the Posts menu, you’ll see a new Category icons option. Enter it, and change these settings in the Options tab:
     Icons local path: wp-content/themes/whatif/images
     Icons URL: http://tudominio.com/wp-content/themes/whatif/images
     The rest can stay as default.
   • Now click on Icons on the upper menu, and in the page that loads select the normal and reduced version of the icon for each category. Use file names as a guide.
     e.g. Category “Arquitectura y urbanismo”
     Icon = arquitectura-urbanismo.png()
     Small icon = arquitectura-urbanismo-mini.png()
     Proceed that way for each category, looking at the previsualization of the selected icons to see if they are correct.
   • Of course you can use your own icons. You only need to upload them (in both sizes: 96×96 and 30×30 px) to the /wp-content/themes/whatif/images directory of your server before the previous step, and then select them as described. You can also change the names of the categories to match the new ones.

c. Other customization settings

1. Add/remove links from the menu at the home page footer
   Edit the footer.php file and look at line 16 for the code:if ( is_home() ) { // home
   $lf_out .= “<li><a href=”http://tuenlace1” target=”_blank”><img src=”URLdetuimagen1.png” alt=”Tu enlace1” /></a>
   <div>Tu enlace1</div><br></li>”;
   } 

   Replace the bold code to customize each link. As default, there is only one additional link.
   To delete additional links and leave only the “home” one, completely delete the previous code, being careful not to delete anything else.
   To add new links, just duplicate the central lines and adapt them to the new links, until you get something like this:

   if ( is_home() ) { // home
   $lf_out .= “<li><a href=”http://tuenlace1″ target=”_blank”><img src=”URLtuimagen1.png” alt=”Tu enlace1″ /></a>
   <div>Tu enlace1</div><br></li>”;
   $lf_out .= “<li><a href=”http://tuenlace2″ target=”_blank”><img src=”URLtuimagen2.png” alt=”Tu enlace2″ /></a>
   <div>Tu enlace2</div><br></li>”;
   }

2. Choose default location:
   If you take a look at the general-vars.php file, you’ll see the following code:$city=”Name“;
   $citymin=”name“;
   $wic = “http://yourdomain.com“;
   $examplelocation =”Estanislao Figueras, 6, Madrid“;
   $coordenadasmapa =”40.419606,-3.72046“; 

   Your page will have to be published at http://yourdomain.com/name/ and you’ll have to change the bold text according to that.

   E.g., if you want to create http://variouscities.com/somecity/, you’ll have to write:

   $city=”Somecity”;
   $citymin=”somecity”;
   $wic = “http://variouscities.com”;
   $examplelocation =”Some nice street, 35, Somecity”;
   $coordenadasmapa =”39.4761789,-6.3707604″;

   The geographic coordinates of the place you want the map to center at as default, can be obtained using Google Maps.

3. To change the home page image you have two options:
   • Overwrite via FTP the /wp-content/themes/whatif/images/home.png image with the one you like, giving it the same file name.
   • Edit the index.php file and change the line
     <img src=’$template_url/images/home.png’ alt=’Inicio’ width=’300px’/>
     with the (relative or absolute) URL of a new image previously uploaded to your server or to a image hosting service.

d. Preparing to connect with Android APP

Here you’ll find the steps needed to enable the connection between the web application (this WP theme) and the Whatif.m APP for Android. This will allow any user with an Android phone to download the app and connect it with your own Whatif installation to participate.

1. First you have to install the Whatif Android plugin .
   • Locate the whatif-android.php file in the folder extracted from the installation package .
   • Upload that file via FTP to the …/wp-content/plugins/ directory in your server.
   • From the WordPress control panel enter the Plugins menu, look for  WhatIf Android at the list that appears and activate it.
2. Now you only have to activate the XML-RPC publishing protocols. It’s easy:
   • From the WordPress control panel select the Writing option inside the  Settings menu, and under the  Remote publishing section, activate the checkbox displaying “Enable the WordPress, Movable Type, MetaWeblog and Blogger XML-RPC publishing protocols”.
   • Save changes.

You’re done! Now you should have the Whatif theme perfectly installed and working with a basic level of personalization. If you are used to WordPress coding and you take a closer look at the file structure of the theme, you’ll notice that you can change almost everything like colors, icons or any other aspect. We encourage you to do so, and to come back with the improvements you made in order to keep this open source application getting better and better.