IKA Theme 1.2 Download

IKA Theme

IKA screenshot of customizer
IKA Theme’s cutomizer options.

I finally feel confident releasing a version of my current WordPress theme for download. It may be downloaded here but I’ll likely have more up-to-date releases on Github as I continue the process of working through any bugs and fine tuning things.

IKA Theme is built off of bootstrap, HTML5 and CSS3. A responsive and fully customizable theme for WordPress, altered via WordPress’ customizer screen, IKA has the following custom options:

Page Display

Choose between 3 page layouts including single column with top navigation, double column with sidebar hover-over navigation and double column with sidebar slide-down navigation. Page may be aligned to the left, right or center of the browser window. Page width may be fixed or full-width.

Theme Options

Custom header image or text. Backgrounds settings including background image, position, repeat and attachment. Options for image slider including choice of navigation images, slide animation, auto-scroll and slider speed. Most all color options on IKA may be changed including text, text shadow, secondary colors for link hovers and highlights, container colors etc. Customization of the footer including background gradient color and background image accent.

Widgets

IKA includes 6 custom widgets for 6 widgetized areas. These areas include the main/index page content, sidebar (when applicable) and 4 different footer areas. Widgets included are a main blog feed widget, a featured category blog feed, featured portfolio feed, image slider and copyright display. Some widgets are meant for very specific areas on the theme and will be indicated in the widget title.

Post Types

IKA has 2 custom post types. A portfolio post type with custom category taxonomy and an image slider to be used in combination with the image slider widget.

Responsive

IKA theme was built with bootstrap and will automatically respond to changes in browser window size. Note that some aspects of the theme, though responsive, may not cooperate well with mobile browser sizes if user content extends beyond the designated area, mainly concerning the image slider and portfolio image-hover displays.

IKA Theme Screenshot
IKA Theme screen shot in the customizer.

Deadeyes-star.com Behind the Design

Deadeyes-star.com Behind the Design

History

I’ve been doing web design for a number of years now, since I was in high school in fact. I can’t say I was creating anything extravagant at the time. I fell into the usual category of bright, shiny backgrounds and way too many gifs that hurt the eyes on a page hosted by Yahoo Geocities (yes, I’m that old). But, I was 16 at the time. It’s all that could be expected from a 16 year old. However horrible those first few pages were they did inspire me to continue learning and growing until I could create pages that didn’t suck so bad (or even gain the ability to recognize how badly they sucked).

My journey into learning PHP began when I wished to host an art and graphics site and didn’t want to keep editing static html pages in order to update or add new content. Unfortunately, Geocities just wasn’t cutting it anymore. I could have used some sort of free CMS like joomla but no… I was pretty stubborn and insisted on doing my own thing. So I bought my first really cheap and crappy hosting plan along with my very first domain: Deadeyes-star.com. Since that time, DS has been a host for a number of many things I’ve experimented with throughout the past decade. It’s been a fantastic, though unstable play ground for learning. It was never meant to be any one thing, always as sort of an experiment for myself and others to learn from. Almost 10 years since I bought DS it’s been decided to give the site more direction, though also allow it to consistently remain an experiment. What do I mean by experiment?

DS was the first site I ever built a login page for, with encrypted passwords and everything! The first site that needed a MySQL database, allowed user sign-up, allowed staffing and forums. Anything I wished to learn I implemented on DS, fit it in somehow even if it wasn’t altogether relevant. Today DS has been settled into place as a music database for Japanese visual kei and indies music, much more of a direction than it’s ever had before. It’s still far from perfect. It needs more love, more updating and the backend still doesn’t allow for all the features that were initially planned. I now manage it with Kai who handles back-end development while I’ve taken over front-end development only. It’s still and experiment for both of us and our primary learning platform. I don’t think that aspect will ever change.

Deadeyes-star.com Home Screen Shot
Deadeyes-star.com Main Page

Design

When I designed DS I really had no idea where to start. It seems much more difficult to design when you’re given free range of everything. I started with color scheme since that’s usually a good foundation towards establishing a feel to everything. Oddly enough I started with a deep turquoise color though it didn’t fit quite right. To keep with the Visual Kei aspect of things I knew I wanted something dark without going full on flat black. Cool grays felt very fitting; not too dark, not too much contrast but still deep and easier on the eyes for browsing content. Because this is a music site I allowed the music to be my inspiration. This design is titled “Negai” (meaning “wish”) after the 9GOATS BLACK OUT song of the same name. This also gave me the idea of doing the animated header, something that felt ethereal.

I’ve fallen in love with the idea of simple and clean web layouts so that’s more of what I was going for, I didn’t want to bog things up too much with a lot of content on the front page or make navigation difficult/confusing. I generally like to avoid sidebars unless a site has a vast amount of content to display, I feel they only add clutter and really impact the idea of clean negative space. This has been carried throughout the whole design of the page where even profile pages are kept without sidebar information. I imagine this may change in the future as we add individual band member profiles, discographies, events calendars and subscription options. In that case it admittedly may be more difficult to navigation profiles with too vast an amount of content in a single column.

Deadeyes-star.com Band Profile Screen Shot
Deadeyes-star.com band profile page.

Functions

The animated header was my first experiment with CSS3 animation. User settings allow for the header animation to be turned on or off, though I think I’ll end up adding a Java script button in at some point to any visitor can control this feature. This was also my first time doing lazy load images since this promised to be a rather image heavy site, loading times are always a concern. There is some discussion on doing a pre-loader since this is, even with the lazy load images, a rather heavy site to load. That would likely not happen until we have a more stable mobile/responsive version sorted first. Social media sharing is not something pre-built into Pyro, nor a free add-on, so I developed a PHP function to handle necessary aspects of making social media sharing possible.

DS is no longer a read-only site with static information. User login only served the purpose of allowing access to hidden band profile information or use the forum. Now user accounts have much more function behind them, including interacting with other users and site content. We’re being a bit ambitious in pushing DS towards being not just a database but also a social community. Lots of other user functions will be underway but it really all depends on our CMS.

DS has almost always worked off it’s own custom CMS. I believe Kai is on his 4th one at the moment, we end up occasionally starting over for something better. Our current version is built off of Pyro CMS which still has a few issues we’re not too pleased about. More importantly for me as a front-end developer, PyroCMS severely lacks thorough and accurate documentation. They have their own system of calling partials for site information instead of using straight php that simply does not have detailed enough documentation to make it easy to learn or implement. I like complete control of the content that displays, including how forms and user information is printed as well as collected, Pyro really makes it difficult to control certain fine details. PyroCMS is based off of CodeIgniter as well which seems to be on it’s way out as a stable and well supported PHP framework. Pyro’s 3.0 development is in it’s alpha stages. Supposedly this will be taking the CMS in a new direction and sounds fairly hopeful. Until they release version 3.0 we’re reluctant to completely dump it and start over again with a new CMS. Until that time we’ve put building other modules and features on hold until we know if there’s a possible re-build in the future or not.

Future

DS has become a very community oriented site. With this latest version it’s the first time we’ve allowed staff members to directly access the admin panel to add and edit database information. We’d like to open it up to the public and allow any user to sign in and edit/add profiles and other information about bands. It’s a bit of a quality control issue though. The CMS must be very stable first and we will need more staff to monitor what information is being submitted to the database to avoid double posts, plagiarism, and completely unrelated content or spam.

As far as future design, I had an idea to do more of a parallax scrolling page though I felt I’d hold off on that for this time around. This was also my first time fully implementing bootstrap on a live site. The only unfortunate thing is once I was done coding the layout a new version of bootstrap came out! Just my luck. So I expect I’ll be doing a new version of this Negai theme in the future with the newer version of Bootstrap and likely some sort of parallax scrolling effect in place.

Deadeyes-star.com article and user profile screen shot
Deadeyes-star.com article and user profile page.