Skrollr for Beginners Tutorial

Skrollr is a scroller library that allows you to perform animations or changes to your web page’s content based on screen position. For example, you can make a div slowly appear, or slide in, as you scroll down the page. You can see it in action here.

This tutorial will cover the bare minimum you need to get Skrollr working. There are plenty of tutorials out there that show you how to do more advanced things, but this one will help you get your first Skrollr powered page.Continue Reading…

Advanced Custom Fields Google Maps Tutorial

Update (Oct. 31, 2016): Google Maps now requires that you have an API Key in order to add maps via ACF. The tutorial reflects this new requirement.

One of my go-to plugins is Advanced Custom Fields. It is versatile, and makes adding custom fields to posts, pages, custom post types, and even user profiles a breeze. Unfortunately, their documentation is sometimes not very beginner friendly (I’ve written about this in the past), so today I’ll try to help out those trying to use the Google Map custom field.

Unlike some of their other custom fields, which allow you to simply use <?php the_field('field_name'); ?> to output the content of the field for that particular post or page, this particular field, requires quite a bit of extra code. It’s all listed in their code example; I will simply explain step by step where to put in that code.Continue Reading…

Move WordPress from MAMP to a Server

There are many ways in which you can migrate your WordPress site from MAMP into its final home, to make it “live”. The way I’m going to show, has worked well for beginners.

What you will need:

  • Access to the cPanel (or similar) on your server
  • Migrate DB plugin (or similar) in your local installation
  • FTP access to the server, or a way to upload files to your server (in cPanel>Files>File Manager)

Continue Reading…

HTML5 is for Slackers

I can’t deny it, I’m an old curmudgeon when it comes to HTML validation. I remember with fondness the good old days of XHML and a draconian W3C validator that wouldn’t let you get away with anything. I miss the unquestioned pride of a green “This Page is Valid HTML 1.0 Strict”.

Why this old lady rant? Last week, while doing some validation tests, I noticed that the validator no longer gives you an error if you don’t encode HTML entities, such as ®, ©, ™, or even & (when followed by a space), and >.  Every year I notice something else. Last year, I noticed that the validator no longer complains of unclosed tags (under certain circumstances). I know that is part of the spec, but I still don’t like it. It rubbed the wrong way so much, I made my own Closing Tag Checker.

I know these changes are meant to make things easier, more efficient, and all around better for everyone, but they make me uncomfortable. I’m a pretty uptight person who finds it hard to relax, and go with the flow. God knows it took me years not to cringe at the sight of a <br>  (notice the missing / at the end? Just madness!)

Eventually I’ll overcome this fastidiousness, but today I feel like kvetching! It’s Monday, and I don’t like that either!


Integrate Isotope with WordPress, Part 2 (Categories)

A few months ago I wrote a post on how to integrate Isotope with WordPress. Since then, I’ve received some requests on showing how to limit it to one category. In this tutorial I will show how to add the Isotope code and scripts to a  template, filtering the posts that belong to one category by it’s sub-categories.

You will notice that most steps are the same as with the original tutorial, but I have left them here, so people won’t have to go back and forth between articles. I’ll highlight the lines of code that differ from the first article.

Continue Reading…

How to Make a Kindle eBook from Scratch

Update (Sept. 11, 2015): The character set for Kindle eBooks is now UTF-8. And recommends using the UTF-8 character over entities (© over &copy;).

There are many ways to create a Kindle eBook, but creating your own source files, and then using KindleGen to convert it into Kindle Format 8 will give you more control over the end result, than relying on a plugin.

If you are a web designer, like me, you already know the technologies you need to make Kindle eBooks from scratch: HTML, XML and CSS. All you need to know is how to put those technologies together, and you’ll be in business.Continue Reading…

Integrating Isotope with WordPress

Isotope is a very powerful jQuery plugin that allows you to create sortable, filterable (I’m sure that’s a word) masonry layouts (although you can have other layouts as well). Isotope is free for personal use (a commercial license costs $25, and an organizational license $90).

In this tutorial I will show how to add the Isotope code and scripts to a  template. In my example, I will use the categories to filter a list of posts.

Update: I wrote a part 2 for this tutorial that shows how to use one category’s subcategories to filter posts.

Continue Reading…

My new best friend: ajax_query_attachments_args

I’m working on a site were users will have extra fields in their profiles, among them, a user picture. To achieve this, I used Advanced Custom Fields. Easy peasy lemon squeezy!

The problem was that when a user went to upload or chose a file for their picture profile, it showed all media files, from every user. Not ideal for this particular site (we are using some custom roles that let people upload pictures, but not create entries).Continue Reading…