Meteotemplate 5.0 Kiwi

Hi guys,

happy Easter Monday and time for another template update! Before I go any further let me please ask you to read the instructions below carefully, you will save time to you and me by avoiding making potential errors.

Introducing Meteotemplate 5.0 Kiwi. This new version adds several new features and a few bug fixes. The main new thing is a brand new section for mobile devices. This is in a sense a stripped down version of your entire page, which contains the most important pages optimized specifically for smaller screens. Font sizes, table layout, graph layouts – everything was adjusted to look better on mobile phones or screens with smaller widths. It does not contain all the pages and also not the plugins, this is mostly a section for your station data, the astronomy page and a few others.

In addition this mobile site has a completely different menu (the so-called “hamburger style” menu), which works good on small screens. It is shown as horizontal, but once the screen width reaches a certain threshold, it will become vertical, to see what I mean you can then try narrowing your browser window and see what happens.

Also the header and footer were optimized for small screens.

This means there is now also a new index. The original index, your current homepage, will of course remain, but it will be renamed to indexDesktop and there is now a new homepage indexMobile. The current index.php will only serve as a redirection script, which will redirect the user to either one of the homepages. The way redirection is decided is something you can of course configure yourself in the settings. And also, both desktop and mobile version, have a link to the other one in the footer so you can always jump to the other one from any site.

Next new feature is something I called “multiple block”. This is in a sense a block, which contains more than one block. It is especially useful for the mobile homepage, where you can now have certain blocks full-width, while others shown as 2, 3 etc columns.

Last new feature is built-in support for Google Analytics for tracking your webpage traffic.

Update should be very easy and is explained below as well as a full changelog. The demo at Meteotemplate.com is now updated to 5.0 – the update took me 2 minutes J

Meteotemplate 5.0 KIWI

• NEW – brand new mobile section – includes most of the weather station pages, new menu, new header, footer and some other pages that are part of the core template files. This also includes a new index.php, which will do the necessary redirection as explained in the wiki and below.
• NEW – multiple block feature allowing even more flexibility in homepage layout
• NEW – built-in Google Analytics support
• UPDATED – the interactive banner should now work again and in addition, I have already implemented the OAuth script, so in case Yahoo again decides to make their forecast not available without API key, it will be very easy to switch to the new data retrieval process
• UPDATED – some minor design tweaks on various pages
• FIX – several minor bug fixes

Update

Update should be fairly simple, but make sure you follow the instructions carefully.

1. First step – as always! – make a backup copy somewhere on your disk so that in case something goes wrong you can revert to it.
2. Download the update package and extract it. You will again see a folder which contains the template folders with the exact same hierarchy as the template files. Before you go any further, let me once again emphasize – these folders do NOT contain all the files that are in those folders of your template, in other words, you must NOT just replace the whole folder, but rather open it and replace/add only the files that are included.
3. First, open the CSS directory, there is one new file mainMobile and also the main.php, replace your CSS/main.php with this one and also add the mainMobile.php to the same folder of your template.
4. Open the homepage folder of the update package, here again you see folder CSS and inside it three files. Go to your server, open homepage folder, css folder and replace the original files with the new ones.
5. Open the icons folder of the update package and you will see that there are just new icons for the 5.0 version, so add them to your icons/versions/ directory on your server.
6. Now there is the new “mobile” directory, this one is totally new, so just take the whole folder and copy it to your template root directory along the other ones like css, homepage, pages etc. Just like you see it in the update package.
7. Now open the pages directory of the update package and there you will see similar structure as on your server. Do the exact same thing as you did with the other folders – overwrite the files on your server with the equivalent files in the update package. Again – make sure you DO NOT overwrite the directories, the update package only contains the updated pages!
8. Open the scripts directory of the update package and use the files inside to overwrite the same files in your scripts directory on your server, there is also the new oauth.php script, which is a backup in case the banner stops working again, so make sure you add that one too.
9. Now take the new footer and replace your original footer.
10. Replace your original header.php with the new header.php (this is very important if you want the new Google Analytics feature to work and it also fixes the currently non-functional interactive banner).
11. And now it becomes slightly more complicated. First copy the indexMobile.php to your template root directory on your server, this file will be the homepage for the mobile section.
12. Now go to your server and open your current homepage – your index.php. Copy the settings for the blocks. Open the indexDesktop.php inside the update package and transfer your settings here. This is very important – do not simply rename your current index to indexDesktop – the new indexDesktop has some new code which allows you to use the new multiple block feature. Alternatively, you can simply use the default indexDesktop if you want to start from scratch designing your homepage. One thing to note – the way blocks and plugins work is not changed, so you do not need to make any changes in your blocks directory etc.
13. Now go to the wiki, where I updated the text to reflect the new changes and where it explains how to use the new mobile section. First read the section which explains how to set up the redirection page – the index.php – which basically only decides which homepage to use and redirects the user to either indexDesktop or indexMobile.php. Then there is also a new section which explains the concept of the new “multiple blocks” feature and how to use it.
    http://www.meteotemplate.com/web/wiki/wikiHomepage.php
14. OK, so assuming you have now read the wiki, you can set up your mobile homepage (indexMobile.php), your normal homepage (indexDesktop.php) and the index.php, which is responsible for the redirection. Once that is done, upload all the 3 files to your template root directory.
15. Last, you need to make a few little changes in the config.php. First, the new header uses the Yahoo WOEID for your location. This means that you need to update your bannerID in the config.php. It no longer uses the code from weather.com. So here is what you need to do. Go to Yahoo Weather (https://weather.yahoo.com/), then search for your location and find the one you want to use. Then look carefully at the URL. For my place, Brno, it looks like this:
    https://weather.yahoo.com/czech-republic/south-moravian-region/brno-786869/
    Notice the number code at the end of the URL – in this case 786869. This is the code you need to use for your bannerID in config.php! Also delete the headerCache.txt in your template root so that it refreshes the cache immediately. Also note, Yahoo is very unreliable these days, if the banner shows just the day/night image, then wait for another update, or try deleting the headerCache again and refresh, hopefully this will improve again in the future, there is nothing I can do about this.
16. Now one last thing, the Google Analytics. For those of you who do not know what it is, it is a way of tracking your user traffic, you can view the number of visitors, their OS, browser type etc etc. via extremely nice and detailed GUI from Google. I will not go any further into explaining this, if you want to find out more about it, simply search for Google Analytics and read the info from Google. If you decide to use it, you register and you will be assigned a code, which you can then insert in config and all your pages will automatically be included in the tracking – both the mobile and desktop section.
    So, for this to work, you need to add the following two lines in the config.php:

    $googleAnalytics = false; // if you have a Google Analytics profile set up and want to track your visit count etc. then set this to true and enter your GA code below
    $GAcode = "UA-xxxxxxxxx"; // your GA code

    By default this is set to false. The GAcode parameter only must be set if you set googleAnalytics to true, otherwise you can just ignore it. If however you do want to use this feature, then set googleAnalytics to true and copy your GA code in the parameter below, it is a code that starts with UA and then some numbers, it will be assigned to you once you register for it.

And that should be it… hopefully your template is now working fine and is updated to the most recent version – 5.0 Kiwi. You can play around with the new possibilities of the homepage and also the GA feature.

Enjoy

Jachym