One more week

Earlier today when I got home from work I did my usual routine of updating to the most current development version of WordPress, made sure all other applications were up to date and opened up my code editor (Notepad++) to view and edit my theme files. Since I was wide awake I tried my hand at experimenting with Git and TortoiseGit on my main computer. One thing leads to another and I managed to delete my theme. I hadn’t made the last commit of adding my modified gallery shortcode.

Needless to say I am kicking myself pretty hard. What this means now is that I am starting over with a new repo but still with SVN and not Git. Git will be for my next project theme. The reason I am starting over is because I deleted the working copy and didn’t realize that I hadn’t added all the files and hadn’t made all the commits I needed to be in sync.

In about one week WordPress 3.5 will be launching and I am pretty stoked about it. The reason is because the way media is uploaded has improved. I feel this is a huge step in the right direction for WordPress development and adoption. People want to be able to share not only their stories but some want to share photos, videos and sometimes audio. The uploader is fairly easy to use and the user interface is elegantly designed.

But enough drooling about what is to come more about what I was trying to get across: patience. I have plenty of it and sometimes I feel I have too much of it. In one week I will make an attempt to rebuild all the code I lost and have it all finished by the time 3.5 launches. This should be manageable since I know what files I need this time after having tested file hierarchy with my previously deleted theme.

Today I created all the empty files and committed that to the repository so I can code away and make the final commits when I am satisfied with the code; that way I won’t have so many commits and a lot versions to go through down the line if I ever have to see why I did what I did.

My new addiction

No, not a drug; although some people may consider it a drug. Over the last few weeks I have been more driven to learn about web development. One of the things that I have learned is to document everything. I pretty much have tried to document every little detail of my learning process and I love every minute of it.

So far, one of the greatest things that I have learned was from viewing a WordPress video about theme development. The lesson was to use a version control system and commit wisely. I have since started to learn how to work with SVN and am in the midst of learning how Git works. Both are phenomenal tools that are great to know.

But really, what I was really trying to say is that I recently have spent – what seems to be for some – an unhealthy amount of time online. I have frequented the WordPress.org support forums and been looking at random WordPress themes from the repository to get a glimpse of how other developer code for their themes. It has been insightful and good.

Truly the best lesson out of it all is documenting everything. I think that is why I have been more and more compelled to blog about it all. It’s not really about sharing but learning by doing it so it sticks better.

In a way my digital addiction just may very well lead me in the right direction of what I really love to do. I say this because I really have learned a lot communication and development. Socialization and communication is a powerful medium not to be taken for granted. The way we interact with one another has drastically changed and will continue to change. Social media and sites have played a huge role in my life and I feel that it will be a great fit for me down the road.

Don’t get me wrong, I still would love to get a degree in computer science one day but for the time being I am beyond happy with how my life is going. I am learning new things in PHP, HTML, CSS, and just the web in general everyday and I am slowly getting the confidence to apply for a job I know will better suit me and the lifestyle I want to lead.

Me, WordPress and Template tags

Recently I have been working more diligently on putting some finishing touches on my personal blog’s theme. Working on a local machine is so much easier now that I understand how it works. I remember when I started out with PHP it was painful.

I got frustrated because I didn’t know where the files had to go at first, the changes I had made to the configuration weren’t taking effect and random little things that almost discouraged me from continuing.

The other day I was reading on the WordPress forums seeing if there was somebody I could help. One thing leads to another and I wind up looking at frameworks, plugins and template tags. Now, I have posted something pretty similar to this before because it was a bit of a rant when I saw somebody posting code I felt was not good practice but that is besides the point at the moment.

What I really want to get to is why I’m writing about template tags. They are an extremely useful thing to know – to some. WordPress has several template tags at your disposal and I love it. There are however some that I have seen in some themes that I would love to use in some of my themes down the road.

A perfect example is using a template tag for navigational links. WordPress has a really good template tag:

< ?php posts_nav_link(); ?>

Simple. It does the job: create navigational links for more posts. I feel the downside to that is that it is all in one container. Yes, there are ways around it by creating your own template tag (which a lot of people seem to do) and use that instead. But what to use? I like the Kubrick method of navigational links where rather than using the one

post_nav_links()

you use two in one. Creating a previous and next link is easy. A better way of doing this is if you are using just the bare minimum amount of files in a WordPress theme is using conditionals to create the navigational links for certain looks.

< ?php
/* Create page navigation and post navigation
 * depending on what is being viewed.
 */
if ( is_single() ) { ?>
  
< ?php } else { ?>

< ?php } // end else statement

The little snippet works fairly decent but it is a little cluttered. It can be simplified a little more so that the only things that change are the

<

div>s containing the actual links. So we can modify it to:

< ?php
/* Create page navigation and post navigation
 * depending on what is being viewed.
 */

Now we don't repeat code and saves some processing power for other things. Amazing what cutting down two lines of code will do! Now we can wrap all that into a function and use it as a template tag to make things easier in an

index.php

file. So the final code would look something like:

/* Create page navigation and post navigation
 * depending on what is being viewed.
 */

function my_theme_nav_links() { ?>
  
< ?php }; // end my_theme_nav_links() 

Now we can use the function anywhere in our theme for post navigation.

Theme progress – good

Slowly but surely my blog’s is coming together. The one thing I am now attempting to do is work out a gallery system. While I do like the Twenty Twelve’s way of presenting the image gallery I want something a little different. The way the Twenty Twelve handles the images is by linking to a page. I don’t want that on mine. Part of that reason is because I won’t be having very many images that are bigger than 800 pixels wide.

What that really entails is that a person with a computer screen of about 13 inches will be seeing more photo than they bargained for. I don’t want to do that. Especially if a person is using a mobile device. That means that image would be the only thing that they see. That is a big no bueno for accessibility. Having to scroll side to side to view an entire image on a mobile device decreases the user experience in my book.

What I have so far is the single, comments, index, search form, sidebar, content, header, and footer pages completed. I still have to work on the functions, tweaks, custom template tags, page and post formats code pages. The one that I know will give my some issues will be the gallery.

I am slowly learning how to code that because the built-in gallery shortcode is not HTML valid. It outputs a element even when there is no caption for the image. What I have to do is one of two options: filter the gallery or remove the gallery shortcode and use my own. For the time being I think I will just have to settle for filtering the gallery output to get the desired result. Not that big of a deal; at least I’ll learn on the way.

The one thing I still have to finish, oddly enough, is the images that I will be using. I’m not sure if I will use individual files or just one since I do want to be able to support HiDPI down the road but that is another subject for another time. Right now I still have a few functions to declare and a few more things to code.

TortoiseSVN – version control status

More and more I have coded the theme for my site and more and more I beginning to understand how TortoiseSVN works. Version control has been good to me so far. Every bit of testing I do helps to program my brain to register and understand better. A good example is a quick little snippet I am implementing in my personal blog.

$p_tags = get_the_tags();
if (!empty($p_tags)):
?>
< ?php
endif;

That little snippet - I think - is pretty neat. The reason I think so is because I feel that you shouldn't put elements into the DOM that you don't need. Enough about code let me get to what I was really typing about: version control.

TortoiseSVN sample icons

Working with TortoiseSVN is great. Making commits is easy. Adding files and folders is even better. I have two different folders setup of course; one is the actual repository and the other is the working copy where I can tinker and play. After I have made my final decision of what to use as the final code I make that little commit and a new version is made. That I love seeing those little icons in the files and folders.

If I find an error or something doesn't quite work out I can just as quickly revert back to the earlier version. It is that easy and I love taking advantage of that. One great thing that I learned from watching a WordPress WordCamp video many months ago. Version control is, by far, one of the greatest thing I have come across - so far.

TortoiseSVN revision history sample

TortoiseSVN version control has made coding for me much more enjoyable. I am beginning to see the light at the end of this tunnel that is my final blog theme. Since I have most the ground work set for how the theme will be displayed I can start to focus on styling. It will be a fun task with SCSS; although in the near future I will start to use git more and more for future projects.

TortoiseSVN sample

Git is one more version control tool that I am looking forward to using. I have basic knowledge of how it works, I just need to actually work with it to really know and see it in action. Branching, tagging and merging will be a lot easier for me to comprehend once I use both version control tools more and more.

Code – Functions

Recently I was perusing the WordPress support forums in hopes to use some of my newly gained knowledge to help others that are learning just like me. I came across a thread that made me laugh a little bit. It was a practice I’ve never really seen and I think should be avoided; at least in my eyes.

The question was how to display the full content and not just an excerpt of the post. I thought to myself: This sounds pretty easy, let’s give this a whirl, shall we? Read the post and what the person is asking to do in show the full content when a person is viewing a specific category.

Simple. An

if

statement to check what the person is viewing and if it is true then show the full content otherwise don’t.

( is_category( 'videos' ) ? the_content() : the_excerpt();

That simple little line does so much with as few lines of code as possible. It is the ternary form of writing an if else statement. What is pretty much says is: If the category is videos the show the content otherwise show the excerpt. The snippet would be shown within a

category-video.php

file since that is the way the template hierarchy works within WordPress.

Now rather than posting code I gave the person the advice since they seemed to know a fair amount when it comes to programming. I am one of those people who if you give me some guidance I can then find my way. But I guess what he wanted was for somebody to do the work for him.

I think what really made me more compelled to not post the snippet was the way coded the functions. A way I’ve seen before but seems rather redundant and kind of pointless in my opinion. Wrapping a function within a function to test if that function exists is pointless when you know that function does not already exist. That was painful to say/type.

From all my books and random sites I’ve come to read about functions they have made more and more sense the more I use them. Functions are pretty much a simple tool. A way to make programming a little easier. The way I have seen functions being used is much like objects and I see those as multidimensional arrays. Yes, somewhat complex way of looking at it but it makes sense to me.

The thing that really threw me off was how this person was using functions to create HTML markup by escaping from PHP. While I have seen this, it was used in a manner that didn’t really call for it; you’re more likely to bloat a file that way and it’s very possible to get lost in all that escaping.

Writing code should not be complicated. You don’t need to change the wheel in order to get it right. HTML should rarely ever make its way inside of PHP. I believe HTML, from all that I have read, is more for static content and PHP dynamic. A good example would be the following snippet.

As you can see from the example the only things that are supposed to change are the title, content, meta information and of course the comments so why would you wrap that all within one function? I can see why to a certain extent but it just becomes redundant and just may hurt performance in the long run. Not only that it will be painful to resolve any errors if you have several functions doing that every single time.

/rant

Emmet – Zen Coding

Okay, I just recently found out about this amazing Notepad++ plugin and I am beyond in love with it! I had tried using Zen Coding but for some strange reason it didn’t work. It could have been me, to be honest.

The plugin works very simply by creating shortcuts to cut the development time. These shortcuts are simple snippets of code which come very handy when creating sample layouts.  When it comes to creating my theme I have found that it has helped me in thinking about how to think semantically for the web.

The way Zen Coding works is pretty straight forward and I love it for that. You input a string of text that you want, expand it and all the markup is done for you.

Sample of the before expansion
Before expansion.

It works a little like math, at least it looks like it to me. Still trying to understand the syntax but it looks fairly simple and I love a small challenge. When you go to expand you have to make sure that you are on the last character or it will expand everything up to where the cursor is at.

After expansion
The markup after expansion

I’m going to have plenty of fun with this one. 🙂

Code – Theme status: structure

So far I have been experimenting with adding theme options to my theme for when I get ready to actually share the theme with the WordPress community. I have the basic file structure that I want to be using for themes down the road. It is of course HTML5 and I’ll try and mess around with CSS3 and transitions eventually.

The basic markup is:

< !doctype html>


  


This should be a rough guideline for the future themes and pages I create. The next stage will be using PHP to display all the dynamic content.

The reason I think this is a good structure is because it almost replicates a book. The <header> tags act like the index for the site while the <footer>  acts as information and the <div> with the class of content is, of course, the content of the site.

Next step: files to be used and the folder structure.

Code – some random javascript conditionals

Warning: what you are about to read deals with code.

Working with PHP is fun for me. At times it can be a pain but I still love it. One thing that I have been trying to find is an AJAX media query for loading certain stylesheets when the viewport is at certain widths. I know that it can be achieved but what I’m wondering is how I would pull this off with WordPress.

jQuery makes it easier to achieve since it is a library to help the development process. I know I will begin with that and PHP but the next step will be creating the necessary files.

Of course I want to think mobile first but my dilemma is that would require http requests – to the best of my knowledge. The good side about that is that yes it would load the needed stylesheet and won’t do any browser sniffing so it relies on the viewport and resolution of the device.

On the plus side I can pretty much start it fairly quickly with a simple jQuery call.

$( window ).resize( function(){
  var width = $( window ).width();

    if ( width < 640 ){
      // Load this stylesheet
      } else if ( 641 < width < 800 ) {
      // Load this stylesheet
      } else {
      // Load this one
      };
});

Now what this really does is check when the screen is resized and not really for the initial width which is what I need to check for. So, what I really need is to first check the width and load the stylesheet accordingly and if the window gets resized run that same check. So I can create a new self invoking function and see how that would work.

var w_check = (function(){
  if ( width < 640 ){
      // Load this stylesheet
      } else if ( 641 < width < 800 ) {
      // Load this stylesheet
      } else {
      // Load this one
      };
})();
$( window ).resize( w_check() );

But then I run into the issue of having more than one stylesheet opened at once and risking the theme getting all warbled. 😐 Yes, they would still have media queries but can I safely use all at once without hurting the layout? I think I may just have to test this out before I deploy. Notepad++, here we come!!

My WordPress theme

I finally, finally got the ball rolling on what will be my theme and theme structure for this site! I am so excited about this. After having read so many posts about templates, CSS, OOCSS, SaSS, PHP and just about any random acronym you can possibly think of I finally have a name for the theme and the look.

The name is actually inspired, of course, by Flamenco. I am calling the theme: Soleá. The name is a the type of compás, or time signature that is in one of two forms. 3/4 and 6/8 time is a simple way of putting it but there is more to it. It doesn’t really follow the basic musical pattern but I’ll let you research that on your own if you want to really learn more about Flamenco music.

I am slowly learning how to work with TortoiseSVN as my local version control and will try to gain more knowledge with github with this theme as time progresses. I know that my second theme will be a lot easier to work with once I get the hang of my workflow and work area.

Photoshop is a great tool and I love using it. Notepad++ and I have been getting along more and more and Chrome has been very dear to me in this learning process. Forums and web articles I have read are great and taught me not only new techniques but also helped improve my way of thinking about programming.

The theme is a simple theme with very few images to cut load times. The colors I have chosen are black, a dark blue, a grey tone, and blue tone as an accent and for emphasis for certain elements like links and some headers.

The only images I chose to use are for the header and maybe a divider for the bottom of the article when being viewed as a list of and not a single view. The one view that will be a little tricky to finagle will be getting the gallery the way I want.

There are so many ideas that I want to use for the gallery format postings but I think I may just go ahead and implement a simple one. Click on an image and it takes you to the single image page and not having a modal window with the gallery of images; that version I’ll try to implement for the next theme or maybe as an update.

The reason I am wanting to release said theme is because I want to learn more about web development and I hope to share my learnings with the community as well as others. So in the next three, or four weeks, please don’t be alarmed if I start posting three things in one day about code. It will serve as a way for me to organize my thoughts and ideas as well as sharing my pains with the world and hopefully some people gain some insight how to code for their own projects down the road.