This weekend, I implemented a dark theme for my site.
Continue reading post "Dark theme for my site"theme posts
The Happs
These happs blogs don’t always allow me to go into as much depth as I would like, but they are definitely a lot easier to write. I have been writing much more frequently now that I’ve started them. “Remember, a writer writes, always.”
WordPress Starter Theme
After much time and effort, I’ve finally released my WordPress base theme, TJMBase. It is the very bare parent theme for what my website has been running on for several months now. These days, I don’t use WordPress for very much, but I have done several projects with it, especially earlier in my web development life, and to some extent still like it.
Years ago, I had made a theme starter that was basically bare of any styles and extra fluff, the kind of thing you might want to start with if you wanted a good starting point for doing a theme basically from scratch. I never released it (didn’t release anything open source at that point), though I did use it for some projects and let at least one interested party use it. I had stopped doing much with WordPress once I got my current job, but I did want my theme starter to be useful to the community. WordPress 3 came out and brought some important changes that made my old theme behind the times, missing some important features.
Continue reading post "The Happs"WPThemeHelper, my helper for WordPress themes
In remaking my website using WordPress, I’ve been working on a base theme that I can use for other sites. I decided to take some of my experience from the Symfony world, such as organizing functionality into namespaced classes, grouped into “bundles” of functionality that can be (somewhat) independently installed as needed depending on the project. I already mentioned the PHP-BufferManager I’m using in a previous post. I’ve also created a more specific to WordPress project with more varied functionality, a theme helper called WPThemeHelper.
The theme helper has several classes to help make theme development cleaner and perhaps a bit easier. The readme on github has more details, but some of the more important ones are:
- SettingHelper: Allows setting of WordPress settings with a map (associative array). It calls the appropriate WordPress function at the appropriate time in WordPress’s initialization cycle. Helps clean up the ‘functions.php’ file and makes remembering what functions to call for various theme settings easier.
Working on a new WordPress bare theme
I haven’t been doing much with WordPress, since at Cogneato we have our own CMS. But a customer request for a WordPress site a while back and the upcoming GiveCamp which I will be participating in this weekend have rejuvenated my interest in working with it. Back when I was using WordPress more often, I had built a bare theme I used as a starting point, including for the Stearns Homestead site I was working on when I first started this blog. That was the WordPress 2.x era though, and the theme is now outdated. I decided to begin work on a new theme, making use of the new 3.x features.
I have learned a lot since building that theme, and wanted to bring in some of my new knowledge and coding practices to the new theme. I also wanted to put this one on GitHub, since I now have an account and others might find it useful. I still haven’t decided for sure what I’ll call it (for now it is TJMBare) and have more work to do, so it isn’t on there yet, but hopefully will be by this weekend. Anyway, I wanted to mention some of the things I have done or will be doing with it.
Class helpers
I am putting all of my functionality and data into classes that in most themes is put into the global namespace. The classes will help group functionality and data together, making it easier to develop and to avoid collisions. Since WordPress doesn’t yet require PHP 5.3+, I am avoiding using PHP namespaces, but am compensating by putting the equivalent on the front of the class names. Functions.php will just include the class files and instantiate what is needed. Child themes will be able to extend parent theme classes to change functionality.
Continue reading post "Working on a new WordPress bare theme"New Theme Again
It wasn’t long with that last theme. It had some undesirable issues, such as the cut off code blocks, no page tabs, and a few general appearance things. I had looked at this Monochrome theme before and skipped over it because it lacked differentiation for “code” blocks. However, I’ve discovered that it does put any “pre” blocks into boxes, and they have overflow set so that any cut off width can be scrolled to. So now I’ll just have to go back and put everything in “pre” blocks, and it should be much more readable.
The theme is very clean and simple and almost monochromatic, fitting better with the current theme on my own site. I like how post meta information is set to the side in such a way that makes it more readable as well as the post. I don’t like the dates on pages, but I’ll live with that. There is a fair amount of “white” space, making things more readable, comfortable, airy.
I would like it to have a flexible width, so that my code blocks don’t have to be so scrunched if they don’t need to be. It lacks header differentiation, but it doesn’t seem to matter as much since the headers stand out less in general and the break in meta information differentiates posts. It uses a fair amount of medium-gray on semi-dark gray, which does not pass WCAG luminosity ratio requirements and thus can be hard to read: I’ll live with that for the other benefits I’m getting.
New WordPress.com Theme
I searched through every 2-column theme with widget support in WordPress.com’s repository (there were 58) in an attempt to improve the appearance of my blog. The main problems with the old one were that levels of headers weren’t differentiated well enough (the second level ones looked like first level) and the code blocks weren’t separated from other content well enough. I couldn’t find one template that I was fully happy with. Every one had something I didn’t like, and very few even had both good code block separation and good header differentiation.
This theme (Neat!) is one of the few that did well enough with those issues and overall for me to choose. It has nice distinct code blocks and I can easily tell the difference between headers. I’m not big on the colors or the header (though that’s configurable). It removed my tabs for pages, but that was no biggie. A few other minor issues. I may stick with it for my tenure at WordPress.com.
Continue reading post "New WordPress.com Theme"WordPress: Multiple Dynamic Sidebars
I’m making a “blank” type template for WordPress that I’ll be able to modify for sites as I develop them. I wanted to make sure my template was compliant with the dynamic sidebars feature of WordPress and have multiple sidebars already there for quick creation with new sites. I wanted the first to have some default content, while the others would not be displayed unless they have dynamic content. I suppose that might not end up being useful for the fixedness of the one-off designs I’ve been doing, but we’ll see…
The tutorials I found didn’t discuss how to make the container for each of multiple sidebars display only if the sidebar had dynamic widgets. The is_dynamic_sidebar() function is what was needed. So I register my sidebars like normal, in “functions.php”:
if(function_exists('register_sidebar')){
register_sidebars(2, array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}Stearns Design Mockup Chosen
On Monday we met with Debbie to show off our design mockups. Wednesday Debbie came back, bringing in three board members who would need to be involved in the decision. They discussed various things about the site, including what it will be including and what they have for it.
They also were ready to make a decision on the mockup they wanted. They had done some user testing of the mockups. Rocki’s was chosen. It has a picture of the front of the farm in the header, which they liked because it would be the first thing you’d see if you went there. But they did want some changes to it. They wanted a lighter brown for the wood grain that makes up the other part of the header. They wanted a more solid navigation menu rather than the hanging signs currently in use. And they wanted a less cluttered appearance for the home page.
They gave Jason’s second place. His was very clean, also using a wood grain and a horizontal drop-down menu. His drop-down seemed to be more along the lines of what they wanted, so something like that may be placed into Rocki’s. Many of us were thinking that Jason’s would be chosen. But you can never be sure.
So finally we will get to start building the actual site. This should be the fun part, certainly the part that I have more experience with. The site will be built using WordPress, so there won’t be a lot of actual programming most likely. We may need to figure out how to interface other data with WordPress and add admin pages for it. We will certainly need to figure out how to use “feeds” to get the information we want where we want it. We’ll need to figure out how to set everything up so that it is easy for them to update. Most of this should be doable within WordPress or using plugins, no hardcore programming. We’ll see though.
A lot of time will certainly be spent turning Rocki’s Photoshop theme into a real WordPress theme. Then of course there is the insertion of the pages and filling them with content. It will need to be organized in a way that will be easy to update for the Stearns people. This may be hard.
I’m looking forward to some fun and some learning.
Stearns Site Design Mockups
Over the past couple weeks we’ve been working on our mockups for the site design for Stearns. We each picked one or two of our wireframe concepts and have used Adobe Photoshop or Fireworks to create the fleshed out, full color and image versions of them.
I used Photoshop, since I’m familiar with it and have never dealt with Fireworks before (hadn’t even heard of it till this class). As a non-designer, it took me a long time to do. I tried to keep every piece separate and organized to make it fully modifiable. This can be painful in Photoshop though, especially since you can’t modify some aspects of multiple layers at once. And with all those little bits, they really bogged down even the powerful computers at school at times.
My version of Photoshop at home is old (7), so I couldn’t really work on them there. Some of the stuff from CS4 didn’t fully translate, I don’t have all the fonts, and Photoshop 7 didn’t have the nested layer groups and other benefits that I was heavily using to keep organized and work on this thing. I had to spend extra time at school and at my parents (my Mom has CS4).
Next time, I think I’ll be faster at this, as I know more what I’m doing, how to deal with all those pieces and what not. Hopefully also I’ll be better at making a good design. I’d like to learn that Fireworks, as it looks much better for this purpose. I think it even makes it very easy to convert the mockup into actual HTML and CSS for the live site, which could save a lot of time with that.
So finally, my mockups. I did two of my ideas, plus a modification of the one. There are two pages for each. They all have very similar (copied and then slightly modified) content sections. They were all designed to be about 975 pixels wide and with 600 pixels as the above the fold height. They have an additional 200 pixels of width to show the sides and as much as 600 pixels below the fold of height for content.
Stearns: Thematic Wireframes
After making our layout wireframes, we brainstormed some various thematic ideas. We mostly thought of items that’d be on a farm. Some of the ideas that were popular were: wood grain, hanging signs, the historical sign, barn, sun, etchings, grass, farm animals, silo, straw hat, pitch fork, seasonal changes, red, brown, and trees. It was a brainstorm, so there were many other ideas, although some were less applicable.
In class, we each drew up one or a few quick thematic wireframes. We didn’t have much time, so many weren’t fleshed out. I drew three:
These two were based mainly on the historic mark sign that the farm has. The first had many little signs for top buttons and logo, two big signs for a sidebar and main content area, and then a grassy ground below that serves as a footer. The page background would be a blue sky. I felt this might be a little overboard with the signs, but liked the grassy footer and blue sky a lot, using them in most of my designs. The next drawing kept the footer and had one sign as a sidebar with the logo and accordion navigation. I included the wagon wheel that is at the base of the Stearn’s sign. I felt a light red barn side or white slatted house side would work for the main content area.
My other drawing used faded wood signs for everything. I wanted an etching on the top banner for the logo and a burn in look for the banner text. The main content and side bar would be place on parchment nailed to a giant sign. All of the signs are hanging and hang from each other.
We were then given a couple days to create some more.
This one would have barn red as the body background with an open barn door holding the main content. I wasn’t sure how to handle the content, so I figured a fairly normal div box set would work if I couldn’t think of anything else. The top banner would be a wood sign over the door with an etching of the farm, burn in title, and silhouettes of animals with white lettering for the main navigation. I continued with the grass footer.
](https://www.tobymackenzie.com/_/wp-content/uploads/2009/10/scan0002_2.jpg)
Next up I made the back of a red barn. The roof would hold the title (probably no room for a logo) and the main navigation in white paint-like lettering. The sub navigation would be in a side bar with the same lettering. The main content would be on a big off white type cloth nailed to the barn. The footer would again be the grass. A sun was featured over the roof to add a little brightness.
Finally, I came up with a variant of the barn door idea with something inside. A farmer would be standing with a pitch fork forking a large, squarish pile of hay. The hay would hold the main content and the farmer would have the accordion side navigation on his back/side. This version of the door had a cloth banner nailed across the inside top of the door with just the logo and title. This one seemed very kiddy to me though, would probably only appeal to kids.