Friday, April 25, 2014

Wordpress Notes 4 - Menus

It's taken me quite a while to figure out menus. Actually... that's a lie. I needed to do something to understand css based drop down menus. This involved mucking around with Wordpress, finding myself feeling a little frustrated and then going to pure html and css to get a feel for it. It still feels a little messy to me which is why I'm glad I've refactored  everything with a programmers perspective...

So there are 4 parts to it:
  1. Register a menu.
  2. Add the menu to your theme.
  3. Make it look like a menu.
  4. Add entries to the menu.

1. Register the menu.

In functions (for me it's in functions/header_menu.php) you need the following:

 <?php  
   add_action( 'init', 'register_navigation_menu' );  
   function register_navigation_menu() {  
     register_nav_menu(  
       array(  
         'header-menu' => __( 'Header Menu' ),  
       )  
     );  
   }  
 ?>  

If you want more than one menu, you can use the function "register_navigation_menus" like the following:
 <?php  
   add_action( 'init', 'register_navigation_menu' );  
   function register_navigation_menu() {  
     register_nav_menus(  
       array(  
         'header-menu' => __( 'Header Menu' ),  
         'footer-menu' => __('Menu in footer' )  
       )  
     );  
   }  
 ?>  

Within the array, you've got the menu's name, and how it appears in Wordpress. So in the example above I have two menus. When I'm doing anything with code, I used the names "header-menu" and "footer-menu". However, when I'm interacting with Wordpress, it shows up as "Header Menu" and "Menu in footer".

2. Add the menu to your theme.

Figure out where you want to display your menu(s). This is where things start to get a little hinkey. The names for the menu changes depending on what menu you've got associated with the widget. So, for the sake of styling, we need to put a wrapper around it.

It's probably not such a bad idea to talk about classes vs. ids. If you're referring to a specific thing, use id. It's only going to be used once. It's an object. It's a set thing. If however, you're going to be using something all over the place thing, it's a class.

Okay, so I want to put a container around my header menu... The code looks something like this:

 <div id="header_menu">  
   <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>  
 </div>  

I think you can ignore the "theme_location" bit. I didn't find any information on that bit.

3. Make it look like a menu

 #header_menu>div ul {  
   list-style: none;    /*remove bullets*/  
   padding: 0px;      /*unordered lists normally have padding*/  
 }  
 #header_menu>div>ul>li {  
   padding-right: 10px;  /*Make a space between menu entries*/  
   text-transform: uppercase;  
   float: left;      /*Make the menu horizontal*/  
 }  
 #header_menu>div>ul>li a { /*Make links in menu look not so ugly*/  
   color: black;  
   text-decoration: none;  
 }  
 #header_menu>div>ul>li>ul {  
   display: none;     /*Hide sub menus*/  
   position: absolute;   /*Without this the flow of the menu can  
                affect the page layout*/  
 }  
 #header_menu>div>ul>li:hover>ul {  
   display:block;     /*Make the submenu visible when menu item  
                has been selected*/  
 }  

This is kind of an absolute minimum.. It only supports one level of sub menu. It's very specific about where the styles are being applied. I needed to refactor it for myself from the example I was working off.

The non-visible elements are ALWAYS on the screen. Which means that styles outside of making a drop down menu visible and how it becomes visible (transitions) should be OUTSIDE of any kind of hover block.

4. Add entries to the menu

Go into your Wordpress admin pages and go to Appearance > Menus.

Thursday, April 24, 2014

Wordpress Notes 3 - Extreme Refactoring

I've been having a look at menus but while I've been doing that, I've been going through this whole "that's dumb" and "how can I make that a whole lot more modular in order to make it more reusable?" buzz. It's become a really good habit of mine to make something functional and then to go over it to try and turn it into something that I could hopefully use elsewhere.

For example, the presentation of the search box in my previous box is highly reliant on css... so why not separate off the css for the searchbox? And while I'm doing imports of css files, I might as well have them in their own place. I was similarly irritated by functions.php. Why dump EVERYTHING into one file? Can't I just have it all separated out? Make the file names contextually relevant - so it's no longer just "functions.php" but the file name means something about what's contained "

Well it turns out it's not quite that simple. Wordpress does expect certain things to be present in certain locations. So while I'd love for searchform.php to be somewhere else, it needs to be in the theme's root.

There's some options here:
  • Say "sod it" to the convenience "get_xxx()" type functions.
  • Over ride those convenience functions to look in the relevant folder for 


Anyway, this is how it's all looking at the moment (directory structure):

Theme_root
├[css]
│├ header.css
│└ search.css
├[functions]
│├ admin-bar.php
│├ header_menu.php

│└ footer_menu.php
├[images]
│├ favicon.png

│├ icon_search.png
│└ logo.png
├ footer.php

├ functions.php
├ header.php
├ head.php
├ index.php
├ menu-header.php
├ searchform.php
├ sidebar.php
└ style.css

Depending on how much this annoyst me, I may move things like footer.php, header.php, searchform.php etc. into their own folder - something like "elements". This would mean that the theme root could be concerned with the absolute essentials (functions.php, style.css, index.php as well as a few files that aren't there yet like single.php and comments.php). This could make things feel a little more modular. I could take the header, both the php and css file, and use it in a completely different theme without having to rewrite all that much...
Oh - and I made a few mistakes which I've since found in my last couple of posts... but we'll visit those in subsequent posts.

Sunday, April 20, 2014

Wordpress Notes 2 - The Header (Mostly)

Given that I'm separating things out just a little more, I've got this whole "head" and "header" thing going on. The head has information about the page in general whereas the header will contain the heading (title), menu bar and search bar.



So for my header I'm going to have a white background (the body will be a light shade of grey to draw the viewer's attention to the content). In header.php I'm going to have the following:


 <section id="header_background" class="white_back">  
   <div id="header_area" class="header">  
     <h1><a href="<?php echo get_option('home'); ?>/">  
       <img src="<?php echo get_bloginfo('template_directory'); ?>/images/logo.jpg"  
         alt="<?php echo bloginfo('name'); ?>" >  
     </a></h1>  
     <?php include (TEMPLATEPATH . '/menubar.php'); ?>  
     <?php get_search_form(); ?>  
   </div>  
 </section>  



You'll notice I'm keeping things horribly simple - I've defined two more files to bring in: menubar.php and I'm using the "get_search_form()" convenience function to bring in a search bar.
.
The title is defined in the
h1 block. That's easy... I've hard coded an image in there. Given that this is a custom template for a particular entity, I'm not bothering to make it a configurable field (that's beyond me at the moment). I've also added in a alt value for accessibility more than anything - generated from Wordpress.

I'm going to leave out the navigation menu for the time being. Mainly because it requires
functions.php - which I'm going to have to look into. I don't like it all being in a single file so I'll probably make a functions directory and import files from there in order to be able to separate our functions - i.e. should stuff around menus be in the same place as code needed for putting widgets in the side bar?

The default search bar is kind of ugly...



Or rather... it's just lacks a certain something. For example, why do we need a button that says search? Wouldn't an icon do? And it just feels so.... boxy. What I really want is something that looks like this:


It's a much more minimal look with all the functionality we need. It would also re-size well - i.e. should we need it, we can make the search box a little smaller. In terms of structure, it looks like this:


So the search form gets a border and the search field doesn't which gives the feel of a the search field and submit button being all one control. The submit button is represented by a graphic - a magnifying glass.

searchform.php looks like this:

 <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">  
   <div class=search_form>  
     <input type="text" value="" name="s" id="s" class="search_field" placeholder="Search" />  
     <input type="image" id="searchsubmit" class="search_button" src="<?php echo get_template_directory_uri(); ?>/images/icon-search.png"/>  
   </div>  
 </form>  

I'm not entirely sure if this is a functional search form - I need to do some testing around it. But for the time being, I'm going to assume that it is working and instead worry about it's appearance. Inside of style.css, we need the following:
 .search_form {  
   border-style: solid;  
   border-width: 1px;  
   border-color: rgb(234, 234, 234);  
   border-radius: 5px;  
   line-height: 30px;  
   height: 30px;  
   float: right;  
   margin-top: 30px;  
 }  
 .search_field {  
   border-width: 0px;  
   font-size: 14px;  
   padding: 5px 30px 5px 10px;  
   float: left;  
 }  
 .search_field:focus, input:focus{  
   outline: 0;  
 }  
 .search_button {  
   width: 18px;  
   line-height: 30px;  
   padding-top: 6px;  
   padding-right: 5px;  
 }  

So the border is on the form. I then remove the border on the search field and make sure the outline isn't visible when you click inside of it (making it feel like a single widget rather than 2). And the search button bits just make it kind of pretty...

I was going to talk about css and possibly moving it all into a php file so that we could use variables (meaning that the different parts where width are defined can be set as a variable). Of course, we could do something with the structure to make this completely unnecessary... Which would require some refactoring but nothing too major.

Saturday, April 19, 2014

Wordpress Notes 1 - Basic Structure

I've been tackling Wordpress for a couple of weeks now. More specifically, the themes. It's basically a php framework with a blog built into it. It seems to have become a CMS (Content Management System) which is cool.... But the themes... The themes have had me frustrated. It just hasn't quite made sense to me. And of course, I've had to learn a little php and html..... something I've never really done before. So I thought I'd write up a few notes.

I've decided to start from scratch and factor the code as I think it should be factored rather than how other themes have done it. Here's the problem as I see it. Within the "header.php" file, tags are opened and not closed - like html, body and sometimes even a div with an id of "page".

Those tags aren't closed until "footer.php"... Having tags open in one file and closed in another just feels wrong to me. So... Within index.php, I want to define that structure. This presents a problem. You see, index.php isn't the only file that's accessed and so it's important to identify any information that could conceivably change and have that be imported into the relevant places. I don't think the html, or body tags are likely to ever change BUT information within the head tag could.

So index.php looks like this thus far:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>  
   <?php include (TEMPLATEPATH . '/head.php'); ?>  
   <body>  
     <?php get_header(); ?>  
     <div class="new_section">  
     <!-- Put content in here -->  
     <!-- I'm purposely not doing this bit as I think I should be able to   
        use this same file as a template for page.php and single.php -->  
     <?php get_sidebar(); ?>  
     <?php get_footer(); ?>  
   </body>  
 </html>  

Wordpress has a bunch of convenience functions - things like "get_sidebar" which look for a sidebar.php file - and even fills in a default one if it can't find a file. Given that I'm separating things out a little more, I'm having to use the slightly less convenient include line above as there just isn't a convenience function that'll cover it.

The reason I'm separating out the head is because there's a chance (a slight chance I know) that at some stage, I'm going to want to change something in there. Perhaps it'll be a favicon (the icon that shows up on the browser's tab for that page)...

My head.php file looks like this currently:

 <head profile="http://gmpg.org/xfn/11">  
   <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />  
   <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>  
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />  
   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />  
   <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.png" />  
   <?php wp_head(); ?>  
 </head>  

I've already put in favicon... There's always the chance that I might, at some stage, want to change favicon... in which case, having it defined here means I only have to change it the once AND it contains ONLY information on the head.

In my next lot of notes I'll have a look at the header (title, menu bar and search field).

Friday, April 4, 2014

Life After Windows XP

The final nail in the coffin of Windows XP is fast approaching. The end of all and any support. I know I'm going to get slammed for this post but sod it... it kind of needs to be done.

In light of this, for my gaming system, I decided to try out Windows 7. I keep coming back to the same thought... Vista must have been REALLY bad. Released in 2009, the computer I built up last year (4 years after it's release) gets a performance score of 5.9 out of 10...

Performance wise I'm finding myself incredibly underwhelmed. For all of it's animations and eye candy, I find myself thinking "I don't care. I need a half decent platform whose resources aren't taken up mainly on the operating system".

And as a usability thing? Awful. Just plain rotten. It takes forever to start up, it does updates when it shuts down, it starts up, tells me about updates, and then restarts again finally starting up. It's not an operating system for people.

Yes, I know... there are going to be a whole lot of comments telling me that obviously I just don't know how to use it right or obviously it's my fault for not getting a top of the line computer or perhaps it'll be that I was wrong not to go out and buy a copy of Windows 8. Nope. I don't see it as my fault. I don't see it as a fault with the hardware (which runs other OSes without the same performance drain). I can only imagine how horrendously painful Windows 8.

As far as I'm concerned, it has some real major problems which I don't think should be defended. I think people should be up in arms asking for change. The first and most obvious one:

Admit that coupling in the web browser with the OS was a giant mistake!

Why is this such an issue? You lose nothing by making the file browser and web browser two completely different things - except that the browser gets judged on its merits rather than being the default that everyone kind of gets. It was a dumb move on MS's fault. It never should have happened. When it did happen, it should have been abandoned. Fine... still include a web browser in the default install. Make it so that people can remove it if they so wish. Get a proper update system that doesn't rely on a web browser.

What it gains though... The security issues of the browser becomes the brower's alone. It's no longer an OS issue. This is huge in terms of the way you think of fixes. No other OS, with the exception of Chrome/Chromium OS couple the browser so closely with the OS (and Chrome/Chromium OS make it so that data is stored remotely).

I think if Windows were to be awesome, they would uncouple the Interface from the kernel. Why? Imagine an OS where the UI could fit the person and their needs. Instead of insisting that everyone have a full desktop, the UI could suit their task. If I'm a gamer, I want a very different interface from an accountant. If I just browse the Internet, ChromeOSes interface is fine. If I'm a "power user" there's a very good chance I'm going to want to see a whole lot more. etc.

Hell - give people a choice about their exposure. For example, for a gaming box, I'm not going to want a browser or email client because they all expose me to things I don't want to bother with on a gaming box. I would like to give up the browser, the email client (the calculator, wordpad etc.) and be able to safely not run with a virus scanner.

This would mean that interfaces could be optimized in very different ways. A gamer is going to value performance over eye candy in the OS (a pretty OS is nice but a properly functioning game is even better). This would mean that MS could focus more on getting the underlying system (like updates) right. It would also mean that other people could develop front ends. Businesses with an UI that suits their business, their business processes etc.

And yet's face it. Windows has been broken for a very long time. A new install is a nightmare. There's the frantic looking around for drivers. I often get told it's not nearly that bad.... but then, Windows didn't identify an ATI video card, consult a website (ati.com redirects to amd.com so it's not too hard to figure out a way to do this) and grab the driver. Instead I had to go to the site myself, and download a 200MB file... for a driver. It's just a driver... Of course, the size of the file for a driver isn't MS's fault. BUT if they wanted their OSes being celebrated rather than excuses being made for it, they would have fixed this... a very long time ago. Think like they did when the created the Windows 98 boot disk (it was the first dos system that didn't require careful setting up of the cdrom drive).

This in the face of people still occasionally telling me that hardware is a problem in Linux. While that is true, Linux works, straight out of the box with more hardware than Windows could ever manage (the big difference there being in the licensing).

Of course, what's going to happen is that I'll get all sorts of comments... Defending just how bad an OS could possibly be...