Edit GitHub Pages

Here’s a quick guide to editing GitHub Pages. Not familiar with GitHub Pages? It’s a totally free service provided by GitHub where you can freely host HTML pages. Read more about it here: https://pages.github.com/

The Details

GitHub uses a separate branch for those pages so you can access the gh-pages branch like so:

In your GitHub repo, click to open the Branches drop-down.

GitHub branch dropdown

Select gh-pages.

GitHub gh-pages branch

You’ll be switched over to the gh-pages branch, where you should see the files served publicly such as the index.html file.

GitHub gh-pages index.html

Click on the index.html file to open it, then click Edit (pencil) icon to make changes.

GitHub gh-pages edit index.html

Once you’re done with editing, scroll to the bottom of the page and you’ll see a Commit changes button. To save the changes, press that button and optionally leave a comment about the changes.

GitHub gh-pages edit commit

That’s it!

You should see the change(s) reflected when viewing the page in your browser, through the page’s github.io url (or via a custom domain if you’ve set configured that).

The command-line method

Of course, if you’re more comfortable editing through your command-line or linux terminal, it’s very simple. If you haven’t already, clone your repo locally. For example, you can clone my Nibble project like so:

git clone https://github.com/Ugotsta/nibble.git

Once that’s cloned, go to the project folder:

cd nibble

Then access the gh-pages branch using the git-checkout command like so:

git checkout gh-pages

You’ll then be able to see and edit the files from the gh-pages branch. You can make your changes to the index.html file, like so (using Vim) for example:

vim index.html

You can make the changes to the file, then add those files as part of a commit using git add:

git add .

Commit those changes with git-commit:

git commit

The commit process will request a comment, to be added to the changelog. On linux systems, usually Nano is used for the comments.

When using Nano:

  1. Type any comments you’d like to add.
  2. Press CTRL-O to save.
  3. To select and overwrite the file you’re viewing, press ENTER.
  4. Then CTRL-X to return to your terminal prompt.

Now you can push those changes back to the repository with git-push:

git push

that’s it for the command-line!

Here’s a quick syntax-colored summary of those commands:

git clone https://github.com/Ugotsta/nibble.git
cd nibble
git checkout gh-pages
vim index.html
git add .
git commit
git push

I hope that helps, feel free to ask if anything’s unclear. 🙂

Edit GitHub Pages

Fun-themed music visualization with P5.js

I posted about this eerie-themed music visualizer I created using P5.js a fair moment back, and as I noted there, I planned to create more visualizers. Here’s the next in that series, a fun, orange-blue theme to fit my re-launched site at daskitz.ugotsta.com.

Check out the visualizer here: ugotsta.github.io/projects/p5-daskitz.html?url=https://soundcloud.com/ugotsta/grampa-howie

As with my previous one, you can change the ?url= parameter to any SoundCloud track and it’ll play it.

And here’s an example from my recent post for DasKitz:

Still more to come

I do still have plans for more. However, I’m also working on a way to encapsulate the code to make it more extensible. Meanwhile, feel free to alter the code yourself.

Code here: https://github.com/Ugotsta/Ugotsta.github.io/blob/master/projects/p5-daskitz.html


Fun-themed music visualization with P5.js

Get a self-hosted WordPress site for free at OpenShift

WordPress.com is great but sometimes you need to be able to install third-party plugins and themes. That’s where services like OpenShift come in really handy.

Here’s how to use OpenShift’s free tier to setup WordPress for free.


So, through OpenShift’s free offering, you get 3 “gears” that you can use to add up to 3 applications, WordPress being an application. Thus you can add up to 3 separate WordPress sites with that free tier.

I mentioned in the video that you can use a custom domain name too. I’ll try and cover that in more detail in a future video.

Any other questions for now though, feel free to ask. 🙂

Get a self-hosted WordPress site for free at OpenShift

Displaying fields with a shortcode for CFS

I wrote a bit previously about the Custom Field Suite plugin here: https://ugotsta.wordpress.com/2015/07/18/displaying-all-fields-with-custom-field-suite/

To reiterate, Custom Field Suite is a powerful, free plugin for easily creating custom fields in WordPress using an elegant graphic interface.

One problem

As amazing as this plugin (and it’s elegant interface) is, non-developers will likely struggle to display their custom fields. It requires custom PHP code.

While the plugin makes it dead simple for developers to code their custom solution, it’s not quite so easy for non-developers. So I’ve been working to simplify that.

Here’s the result so far:

With that downloaded and installed as a plugin, you’ll have a simple shortcode at your disposal:


That little shortcode will render all the fields for the currently viewed post in a list. It works with no parameters by default, but there are a bunch of options if needed:

  • exclude: a comma-delimited list of field names to exclude
  • exclude_titles: a comma-delimited list of field names for which to “not” render titles.
  • container_class: a CSS class for the container, if needed, to easily target items.
  • field_class: a CSS class for each field.
  • list_type: an option to render the fields as lists or divs; ordered, unordered or div.
  • render_post_title: true to render the title, false otherwise.
  • render_empty: true to render empty fields (fields with no value specified), false to not display them.

As an example, if you had a bunch of fields to display but wanted to hide the fields with the names, ‘id’ and ‘release_year’, you could use the shortcode like so:

[cfs-fields exclude=”id, release_year”]

Again, those options are not necessary. The shortcode will just fine on its own.

There’s a lot more I should say about it, but I hope this much info helps for those looking to easily display their fields with CFS. As I get this one more refined, I’ll get some more extensive info and a video to walk through it.

Any questions, just let me know. 🙂

Displaying fields with a shortcode for CFS

Eery-themed music visualization using P5.js

So I’ve been laboring with some music visualizations relying on the fantastic P5.js library, which is an advanced extension to the popular processing language.

Here are the latest results: http://ugotsta.github.io/projects/p5-hid-template.html

More Details

Basically, that’s just a single, self-contained HTML file with no CSS, images or other assets needed and it can provide visualization for any SoundCloud url. It currently supports two url parameters as follows:

  • url= enter any SoundCloud track url.
  • text= enter the text you’d like to appear in the visualization.

So for example, a metal track from a friend of mine:

ugotsta.github.io/projects/p5-hid-template.html?url=https://soundcloud.com/jacob-kauble/mechanized-supremecy&text=Sanctus Audio

You’ll see the ?url= references the track’s url at SoundCloud, then the &text= provides text to show in the center of the visualization.

The raw source file is part of my main GitHub repo here, accessible here: https://github.com/Ugotsta/Ugotsta.github.io/blob/master/projects/p5-hid-template.html

Of course, I’ve already put the visualization to use in some videos for my “Hidden in Darkness” project. Here’s one of them:

More to come

This is still a work in progress so there’s more to be done yet. I’m also working on a more basic template to somewhat emulate Monstercat videos.

Let me know if there’s anything in particular you’d like to see done as well, I’ll see if I can get to it.

UPDATE: 2015-07-28

The file at GitHub’s undergoing some major cleanup and revision but I’ve updated details above to reflect that.

Eery-themed music visualization using P5.js

Displaying all fields with Custom Field Suite in WordPress

Custom Field Suite is a forked alternative to Advanced Custom Fields. The two work very similar so while looking for a way to render a series of fields for a post, I looked up ACF’s method and found it works great with CFS!

Here’s the ACF method: http://www.advancedcustomfields.com/resources/get_fields/

And here’s an adjusted gist version:

As you’ll see, ACF has a get() method so you use CFS()->get() with no parameters to get all custom fields for the current post. It’ll give you an array. And you just iterate over the array and get() each field by name, then render it.

Displaying all fields with Custom Field Suite in WordPress

Finding hooks in WordPress plugins with Atom editor

I mentioned in my post, “Safely adding code to WordPress” that you can add code to WordPress plugins, themes and even the core, without altering core functionality. That’s done using action and filter hooks, as explained in that post.

Sometimes it’s not easy to find those hooks. So here’s a guide on how to find them quickly using the free and cross-platform Atom editor.

THE details

To search for hooks in a plugin, download the plugin .zip file that you’d like to search through. I mentioned MarketPress in the walkthrough video, you can use any plugin though.

MarketPress download

Extract the plugin’s .zip file on your hard drive, then go into the extracted folder and open one of the files in Atom.

Then press Ctrl Shift F to open the Find/Replace panel.

Atom find/replace

Enter “do_action” if you’d like to find action hooks, or “apply_filters” if you’d like to find filter hooks. Then press ENTER to commence the search. You’ll see a new panel full of search results.

Atom search results

Simply click any of the items in the search results panel and Atom will open the file and take you to the respective line of code.

Simplifying the search

The Minimap package (I often call them plugins) for Atom makes searches much easier. Just install it through the built-in installer in Atom. Press CTRL , to open the settings panel, then click on Install. Type ‘minimap‘ in the search bar and click the Install button for the respective packages.

Install minimap package in Atom

By installing all the minimap packages, you should be able to select a portion of code and see all occurrences of that selected code highlighted in the minimap.Atom Minimap Highlight

Please feel free to ask if you have any questions about all this.


Finding hooks in WordPress plugins with Atom editor