It’s 2013 and time for me to make some life changes. I wanted to work for myself, on my terms, with my own hours, in my own house.

In January of this year while on a 7-day cruise in the Bahamas I decided that I didn’t want to work the template 9-5 job anymore. I was tired of always having to be at an office at the same time every day for eight hours. I worked as a graphic designer and website developer at an online marketing firm in downtown Albuquerque. We had project managers who played the middle man, so I didn’t really talk to clients or have face to face interaction on a consistent basis. I didn’t feel the need to be there all the time.

I grew to hate what I was doing all because of having to go to an office everyday of my life. I was miserable. I wanted to work from Satellite Coffee and Starbucks, I wanted to work in my pajamas with my new puppy on my lap looking cute. I wanted to work when I wanted on my own terms.

So during the next few months, I re-branded my company Anything Graphic which was my part-time freelance gig at the time. The goal with my new website design was to focus more on WordPress website design and theme development for small and medium sized businesses. I then learned some new tricks and came out with some new services which include search engine optimization and Active Management that streamlines website maintenance and security as well as a few other bells and whistles.  I made business relationships with some amazing people and in March 2013 I gave my two weeks notice.

In order for a smooth transition for the both of us, we agreed that I would work part-time for my employer for an undetermined amount of time. This helps me because I at least have a guaranteed amount of money to pay my bills every month while I work out the business aspects of gaining more clients and different methods of income. I also have a number of business projects I want to pursue in the near future.

This is an exciting (and scary) time for Anything Graphic. However, if I didn’t do it now I would always be asking myself “What if?” It’s time to do things my way :-) With that, I invite you to take a look at my portfolio. If you are in need of a WordPress website developer or need a web design for your project, feel from to get in touch.

A while back I had a lady named Andrea from New Mexico Pie Company called me about needing some graphic and web design work. At the time, I was booked with development projects and I couldn’t fit her work into my schedule. So I did what I usually do and passed the client onto a designer friend of mine named Lori over at Design564. During the last couple of years, Design564 and I have developed a designer / developer relationship. She designs, I develop. We love it.

Over the course of the next few months, Lori designed an identity along with business cards and a nice looking website showcasing Andrea’s beautiful (and delicious) pies. It was time to rock and roll with some eCommerce website development and Jigoshop was my solution. Soon after the website launched, Jigoshop showcased our work on their website. Then Karen, the head of the Albuquerque WordPress Meetup Group got a hold of us and thought it would be a good idea to have a presentation about the whole project.

The Presentation

Lori and I tag teamed the presentation on Thursday, March 14 and it was nerve wracking, but really fun! It was only my second speaking engagement, but I did pretty good overall and am looking forward at presenting more and more at both the ABQ WordPress Meetup Group and HTTQ.

The presentation was an introduction to Jigoshop, covering the free plugin’s settings, from the look of the front-end to the taxes, shipping, and payment gateways. It’s a really great product and recommend it over any of the other WordPress eCommerce plugins out there.

You had to be there to experience the setup and settings configurations because I did a live demo, but the presentation link below gives a brief overview of both New Mexico Pie Company and Jigoshop. The presentation was built using the awesome jQuery powered reveal.js by @hakimel.

View The Presentation

So the client could get a better idea of what I was imagining, I decided to build a demo for it. I knew how to accomplish the scrolling animation, however I didn’t know the best way to do it with jQuery. I wanted something more than the normal CSS solution for a fixed element.

Sticky Navigation

I stumbled upon a script from Andrew Henderson that was small and to the point. The rest I came across were huge. You can click the link above for a more detailed description of what he has done, as I don’t want to steal his thunder. But the code is:

$(function(){ // document ready

  var stickyTop = $('.sticky').offset().top; // returns number

  $(window).scroll(function(){ // scroll event

    var windowTop = $(window).scrollTop(); // returns number

    if (stickyTop < windowTop) {
      $('.sticky').css({ position: 'fixed', top: 0 });
    }
    else {
      $('.sticky').css('position','static');
    }

  });

});

Just make sure to change your selector ‘.sticky’ to the element you want to be sticky!

Scrolling Navigation Links (Anchor Tags)

Great, we have a fixed navigation in place. Now we want to make sure our links within our sticky navigation scroll to the correct destination on the same page with a nice, slick animation. Yay jQuery.

$(document).ready(function(){

	$('a').click(function(){

		var el = $(this).attr('href');
		var elWrapped = $(el);

		scrollToDiv(elWrapped,40);

		return false;

	});

	function scrollToDiv(element,navheight){

		var offset = element.offset();
		var offsetTop = offset.top;
		var totalScroll = offsetTop-navheight;

		$('body,html').animate({
			scrollTop: totalScroll
		}, 500);

	}

});

First, give your anchor tag the correct link. This will be the name of the section your link will scroll to:

<a href="#section_2">Your Title or Text Here</a>

Second, we need to put the name of the section above somewhere on the page. Put the below right above the section you want to scroll to:

<div id="section_2" class="dark_bg">

That’s all you have to do. Just include the jQuery, make sure you have correctly labeled your ‘sections’ and have given your links the same href. This makes for a nice, simple solution for long pages that contain a lot of content broken into sections. Another idea for scrolling navigation links is for one pages websites like the one I developed for 10 Five Process Service.

View The Demo

I started to use the Genesis Framework for all of my websites a while back because it is pretty much the coolest thing ever. Just place this small chunk of code in your functions.php file and change the text for your site.

/* Custom text for "No posts found" (Genesis Framework) */
add_filter('genesis_noposts_text', 'no_posts_found');
function no_posts_found($text) {
     $text = '<span class="if_you_want_one"' . __('Your custom no posts found text goes here.') . '</span>';
     return $text;
}

If you are just using a basic WordPress theme, you’re covered. Just place this into your template file.

/* Custom text for "No posts found" (Basic WordPress) */
/* Start the Loop. */
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

/*  Stop The Loop and give 'else' statement (when there are no posts) */
    <?php endwhile; else: ?>
    <p>Your custom no posts found text goes here.</p>

<?php endif; ?>

Did this code snippet help you? Have a better way of changing the default “Sorry, no posts found…” text string? Let us know!

I started this freelance design and development company on January 16, 2010 as a part-time gig. I designed my website and it was pretty decent. A year later, I redesigned it while learning WordPress. Here I am two years later, making an actual brand for Anything Graphic. It’s an exciting time for me in more ways than one.

My Focus

I needed to change the way I took on business and the actual projects I was taking on. Before, I was taking on projects I didn’t want to do and not taking on things I actually wanted to do. No, I am focusing on WordPress website development, search engine optimization, and custom website design.

The way I handle business, my services, the clients I deal with, and the types of jobs I am taking on are focused.

My Logo

First, I made some slight adjustments to my original logo. The first one was a little boring in my opinion and I needed a change. I adjusted kerning, colors, and the pencil tip.

My Portfolio Website & Blog

My last website was awesome because clients loved it. However, I hated it after the first few months. It had some eyecandy and jQuery animations to make it ‘pop’ (yeah, I said it), but it wasn’t really what I wanted. I was too busy with client projects and didn’t schedule time for myself to work on my own tasks. It sat there with a blog I didn’t upkeep.

In January 2013, I went on a 7-day cruise with my partner, family, and friends who met up with us from NY. I had all the time in the world and while I was sipping on cape cods poolside, I had my laptop out in the most relaxing environment working on my redesign in between partying.

I started out by brainstorming what I wanted, needed, and how it would revolve around my focused services. Two months later, in between my long list of client work, I was able to develop it. And unlike my previous website, it’s responsive and my blog will be updated frequently. I’ve found a new love for writing, even though I’m not that good at it yet.

My Other Piece of Exciting News

I can’t quite announce that yet. You’ll have to wait until Friday afternoon.
Sorry…

What Do You Think of The New Site?

As most creatives are when releasing new things into the world, I am excited about this project. I’d love to know your thoughts, however, don’t be a troll or a dick about it. Constructive criticism and happy thoughts welcome.

The easiest way I knew how to implement such a design element was to use the HTML markup known as the Horizontal Rule. It works great for breaking up content on a visual level when you style it right with CSS. The code simply looks like this:

<hr>

It will create a line break (styled of course) like this:

However, asking the client to update their posts and pages in the Text/HTML editor (instead of the Visual Editor) is not always fun, nor do they want to mess with code. Instead, why don’t we just add a Horizontal Rule button to the MCE Editor in WordPress?

Just stick the code below in your functions.php file. Huzzah, you now have a new button added to the end of the top row in the WordPress editor.

function additional_buttons($buttons) {
     $buttons[] = 'hr';
     return $buttons;
}
add_filter("mce_buttons", "additional_buttons");

My Horizontal Rule is styled like this:

hr {
     border-top: 1px solid #ccd8db;
     border-bottom: 1px solid white;
     clear: both;
     margin: 3rem 0;
     width: 100%;
}

What do you think? Have another, easier way to accomplish this button? Do you use it on client sites? Let us know!