writing a wordpress theme

Spent the last few days working on making a WordPress theme. Progress could be better if I am not interrupted periodically… but I am quite pleased with where I’ve gotten so far. The screenshots don’t really show much, but I am getting better at understanding how a theme comes together. Also, doing this is a real refresher course on working with PHP again.

I used the WordPress Codex for help on theme development. Having imported a good percentage of my blog posts for my Facts & Fiction project (the january project) gives me a good base to work with, in terms of theme development. It is definitely useful to have some posts there rather than working on an empty blog. This December, I’ll be working a couple of things: developing the dataset for my blog, create a skeleton theme for the final, and think of a meaningful way to make the data visualisation. The dataset is created by tagging and categorising all my blog entries and forming the database narrative. More on this part on my next entry — I am also excited to show the progress of that part of my project as well as my outcome for Facts & Fictions. All of this will come in the next few days. So many things to do, and I’m eager to share along the way.

In this screenshot, you can see the very basic skeleton of a theme. At this point, I felt a sense of achievement. Getting the posts and categories to show up. I also added the tag cloud (didn’t have a screenshot), and I could see something developing there, with just January’s worth of entries. I’ve mentioned before that it’s not my intention to share the blog posts, but to use meta data to tell the story. By developing my own theme, I can get down to the specifics, and decide what part of the blog I want to show on the front page. I am able to hide the posts, and work with just the tag and categories.

Screen Shot 2015-12-08 at 6.23.51 pm Screen Shot 2015-12-08 at 6.23.57 pm

Here are a couple of screenshots from my Google Sheets, which I’ve used for my final project in my data vis course. More on that for the next post. These are the information that I get from important my entries into WordPress. Using WordPress and Google Sheets in tandem is really useful for my process. With this in mind, I am also considering how I would like my physical outcome to look like as well. I’ll think about it as I go along.

Screen Shot 2015-12-08 at 6.05.42 pm

Having built a skeleton theme, I made a copy and installed another blog on my server. As I am also working to revamp my own personal website, I am taking the opportunity to learn more about what I can do with WordPress themes. All of this is good practice for my virtual outcome, and I am trying my best to do as much as I can over this break, while not letting anything I do go to waste. This screenshot shows a WordPress blog with no posts, just pages. What I am doing with this WordPress theme is to put all my content in WordPress pages, which would be a breeze for updating. The php function allows the pages to be displayed as they are on the wp-admin, which is a fantastic option – you can see the various things nested under the parent page of ‘works’ It’s been useful to work on these two sites for now as I explore what I can do with both posts and pages and consider how I can best incorporate their key functions together in my final theme development.

week one reflections

It’s been a really packed and intensive week! I have so much to share, and it’s amazing how much I’ve learned about data visualisation in just these few days alone. Here’s a quick recap of what I’ve learned over the week.

First, we have Stefanie Posavec, who was with us Monday to Thursday. On Monday, we gathered a dataset that represents the spirit of Berlin. I went to a local supermarket to collect some information on the products sold there. We learned how to make a physical visualisation out of the data we collected.

Photo 4-11-15, 8 02 32 PM

I made this pie chart out of salami, to represent the different kinds of wursts that can be found in a typical German supermarket.

Photo 5-11-15, 7 54 43 AM

visual

I also collected another data set on the number of times I checked in with my family and friends over the week. I was having a cold this week, and the tissues were used as a form of visualisation.

Stefanie’s approach to data visualisation is very hands on: she does not do programming. Instead, she draws everything by hand. Her process is very well documented, and her slides contain many photos of her sketches from her notebook. She encourages us to try this approach on our last day with her, where she gave us a set of data on the weather patterns in a month.

11219106_10153760738479553_4754221288298612195_n

This is my outcome.

Key things we learned with Stefanie: find a pattern in your data, select your focus, and always remember than form follows function. Set up rules. Create hierarchy within your focus helps to make your visualisation even clearer. Always create a scaffolding before inputting your graphical elements.  Think sequentially, incrementally.

blogosphereViz_MP

(this-is-maral.com)

On Thursday evening, we had an artist talk by Maral Pourkazemi. Maral is a very passionate designer. She has Iranian roots, which shapes most of her design work. She calls herself a design activist, where she uses her data vis skills to create powerful works to highlight the issues faced by Iran. This is one of the most interesting talks I’ve ever heard, as she shares the potential threats that surround her as a designer, because her work involves politics. Like Stefanie, her master thesis was the work that propel her to the world of data vis, and offered her many opportunities and led her to where she is today. For her masters, she made a work about censorship of Iranian internet.

We ended the week with Nicholas Felton, who shared with us the programming side of data visualisation. I was very interested to hear how he made all his Annual Reports, and everyone was curious about this whole effort of collecting data actively, consciously, for ten years and putting them together in his report. Each year, he challenges himself to make a better report than the last. His last few reports were made with the help of applications, a few that he developed by himself.

This weekend, Nicholas walked us through the program Processing. I’ve gone through a beginner’s tutorial the week before I came, so thankfully I was no stranger to this. Having just a bit of introduction and some background in coding helped me a lot in picking up Processing as I go along.

Screen Shot 2015-11-07 at 4.16.57 pmScreen Shot 2015-11-08 at 1.38.33 pm

The possibilities of what you can do with Processing is limitless. Learning the programming script is akin to learning another foreign language. One of the key things I’ve learn with Nicholas Felton on Processing is actually how to input data into the program. We made spreadsheets on Google Sheets, converted them into a .csv (comma separated values) file, which is readable on Processing, and then using coding, we are able to create visualisations out of it. The above screenshot with the lines is an exercise I am working on right now. The number of lines is generated by the values from my spreadsheet. This is all very sketchy at the moment, and I’m working on adding the graphical elements later on. This is another really important thing I’ve learned this week, and something I probably will not be able to figure out on my own.

So, week one in summary is learning how to create visualisations with the help of coding, or by hand, and I am really glad to be able to learn from Stefanie and Nicholas, who are very, very good at their work.

Something else I’ve picked up this week from them is actually how to present your work. Watching these designers speak about their work is so, so inspiring. They are very confident and clear about what they are trying to say, and this helps a lot particular at this point, when I am simultaneously working on my FYP prep. Everyday I have something new to add to my presentation.

This week is particularly intense, but I hope I will polish up my presentation and be good to go by Tuesday.

 

virtual playground

To help provide a more comprehensive overview on what I am interested to explore as an artist, I’ve put together a webpage with links and details to the various small-scale projects I’ve made related to my theme on how the Internet is used to shape our growth as individuals. I call my website a virtual playground. Still in the works, but I think I can put this together quite quickly and be finished by tonight.

Screen Shot 2015-10-26 at 3.17.12 pm

beverley.tv is my final project for Internet Art & Culture where I will share my art-making process via self-broadcasting tools like Periscope and Quicktime screen recording.

Screen Shot 2015-10-26 at 3.15.25 pmScreen Shot 2015-10-26 at 3.15.22 pm

Some projects that I made last semester that led me to explore my concept in finer detail for FYP.

Screen Shot 2015-10-26 at 3.09.46 pm

Lastly, I have a page for my FYP, which is a web version of my presentation.

I hope to make use of my website to convey what I am doing in a more interesting and self-explanatory way. Through this website, I hope to showcase a combination of my skills as well as my interest in long-form storytelling. Each project page is made in a continuous scroll format, which I find very useful in explaining something in detail while maintaining some kind of linear form. The seamless nature of this web layout enhances the viewing experience by omitting any clicking or external functions which I feel is disruptive to the experience.

You can see the work in progress as I update it here.

 

Processing

I just got my book Design for Information by Isabel Mereilles and some of the data visuals featured in the book makes use of the program Processing. Yesterday I also came across this while looking through Nicholas Felton’s work.

Processing is an open source program that allows one to experiment with coding. It’s like a coding sketchbook, with a particular emphasis on how coding can be used in visual arts. In the next two months, I hope to educate myself with some programming, and really just doing some crash course with online tutorials.

I followed an introduction tutorial on Processing.org, and here’s what I’ve got!

Screen Shot 2015-10-25 at 9.02.35 pm

What I’ve made was a looping circle that follows the mouse’s movement, so by dragging the cursor around, this interesting pattern is made. This is all very exciting, and I hope to pick up on more scripts that will help teach me to creating exciting and interactive visuals.

data visualising references + progress

datavis01 datavis02 datavis03

Here’s a good link that I am going to bookmark for when I get a hang of javascript. This gallery on Github displays a great variety of data visualising scripts. I have not figured out how they work, specifically, but they all come with some very handy tutorials.

I find this to be a wonderful alternative to building a WordPress theme from sketch. I mentioned in my previous entry that I have trouble importing all of my blog posts to my own server, so I cannot make use of the WordPress plugins anyway, as a large percentage of my entries will not be accounted for.

I spent the day drawing out some general statistics from January 2005 – May 2005. Here’s a sample:

word01

I did this for each month.

 

My main purpose for doing this is to sieve out the metadata so that I can tell a story with these figures and tags. I don’t intend to show any of my blog entries, as I feel that they don’t necessarily describe my relationship with blogging. Also, working with metadata helps to build my work around the bildungsroman theme by offering a bird’s eye view of the topics that I write about, taking into account the frequency of details like exclamation points (which I later renamed to “emotional punctuation”) after I notice that I used to end my sentences with lots of !!!!! and !?!!?!??!? whenever I feel frustrated. Words can also be associated with certain kind of lingo which will define some of my hobbies, like ‘skin’ and ‘layout’, for example. These words were used to describe the my blog themes then.

I find some of the examples of data visualising techniques on the Github gallery are pretty engaging. They also look really amazing. I think that I can definitely work the script to my advantage and incorporate my illustrative style to make my work more engaging.

WordPress Theme Sketch

Theme URL: http://bever-gif.com/theme/

This theme aims to present data in a single-page, long form manner. The data is my blog entries from 2005-2015, which I’m currently breaking down and building the tags by hand. (literally!) I would call this an experimental theme, that does not aim to function as a working theme, where new entries can be added and viewed. The theme uses existing WordPress widgets and the structure of the blog as an interactive way of presenting information. This is what I hope to achieve in the virtual part of my work. 

Here’s the outline of the theme:

(Note: this sketch is meant to be as simple as possible. My aim is to try and work out the function, before I add in the visuals.)

calendar

calendar

At the top of the theme is a calendar. Think of this as the big cloud that holds all the entries together, from various years. The entries are grouped in months rather than years, for example: January 2005, January 2006, January 2007, etc. The months are links: upon clicking them, more specific entries will show up.

month

month

Let’s take October for example. When October is selected, a tag cloud will show up.

tagcloud

tagcloud

The cloud describes the topics that are written in this month, over the years. This is the key feature of this theme as the tag cloud is an overview of how the content in my blog have progressed in the span of the time I’ve been writing it. A click on the tag will bring up even more specific entries.

tag

Let’s select the word ‘computer’. The theme will then list all the entries written about ‘computer’ in October, over the years.

years

years

When a specific tag is highlighted, it will list the years with this topic. *I forgot to add, but next to the year, there should be a number that displays the amount of posts.

entries

entries

Upon clicking the year, the entries will finally show up.