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 – 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.

Keeping WordPress on my mind

I keep posting on this about how code is becoming a part of my life and yet I have yet to actually post any of it; It is really depressing to see and read. So, here goes: With the project I have been working on (my site) I have been working with how WordPress handles its files and queries. It has been good seeing and interacting with it all. A good, and quick, example of how it works is here.

With that in mind I have thought about how I want certain things to look on the front page of the site. So, this would entail that WordPress will look for one of many pages. The first one it will look for is

home.php

and then it will look for

index.php

if it doesn’t find the first file. That is, of course, if I am using WordPress as a blogging tool otherwise it will look for the

front-page.php

if I have it set as a CMS (Content Management System ).

The files I have created so far are the basic ones that WordPress needs to be read/seen in the Appearance panel. They are comprised of

style.css

and

index.php

which are the two minimum required files. The front/home page so far will of course have a featured/sticky support but will be able to use the excerpt if the post has it filled out otherwise it will just post the entire content. That little snippet looks like:

<div class="entry-content"></div>
<pre>
    <!--?php if( has_excerpt() ) : the_excerpt(); else : the_content(); theme_linked_pages(); <span class="hiddenSpellError" pre=""-->endif;?>
</div><!-- .entry-content -->

The next stage will be creating the look of how an individual post will look like. That file is called:

single.php

. It will look fairly close to the¬†homepage¬†layout but of course there are going to be subtle differences. I’m debating if I really want a sidebar on the entire site but I know it will be useful for simple navigation.

Now, WordPress uses functions as template tags. Case in point:

the_content()

. It displays the content of the post when used inside of a WordPress loop. I have created a simple

functions.php

file that will house all my custom functions for the theme. In that file I inserted:

function theme_setup () {
        // Add post format support
        add_theme_support( 'post-formats', array('aside', 'image', 'link', 'quote', 'status') );
        // Add theme support for custom background
        add_theme_support( 'custom-background', array('default-color' => 'fff' ) );
        // Add theme support for Post Thumbnails
        add_theme_support ( 'post-thumbnails' );
        // Register the menu
        register_nav_menu ( 'primary', 'Main Menu');
    };

What that little snippet does is create support for post formats, custom background support, thumbnail support and creates a menu holder for my theme. I’ll explain those things down the road ‚Äď hopefully.

Now, up until recently I have only really posted photos of what my site will look like. This has been a great experience on how my site will look like when I actually start posting more and more code since I am using a plugin to create the syntax highlighting. Taking a turn into the code side of web development will be a great thing for me. Now to explore more about theme development and WordPress.