Jengineer - Ponderings & Discoveries

Category Archives: howto

Github: Why and how?

So you’ve heard about Github and are curious what it’s all about. Why should you use it? What is it good for? (hint: not absolutely nothing!)

femalecodertocat

If you’re a developer, you’ll come across the Github name over and over. You may be signing up for a new social media account and you’ll be asked for your Github username. Or you’ll start a new job and your team lead will ask you for your Github credentials so you can be added to the team’s page. But what if you don’t even have an account? Or better yet, not familiar with what it is used for?

So, here’s the short summary: Github is awesome because you can share your code with developers around the world. For free. Yep, you can create a repository (just another name for project/codebase) and add your code there for the world to see. If you don’t feel like showing your work off just yet, you can create a private repo (short for repository. All the cool kids use that instead.)

So when would you use this infamous Github account of yours? You can link people to your projects, share code snippets, get contributors for a project you’ve been working on and need some help with, and code versioning – it comes in so handy. In case you’re wondering what versioning is all about, Github (and any revision control system) will create different versions of your file with each change that you make to it. This prevents situations where you end up with files called “test_final.html” and “test_final2021.html” and “test_final_FINAL2.html”. As you can see, this is very useful when working on a project and you want to remember which changes you made last week compared to this week’s. This is also incredibly helpful when working in a large team with several developers.

One of my favorite things about Github is the Explore page. This section is incredibly helpful in learning about and exploring(!) other people’s projects so you can see how they work. You can be inspired to create your own work based off of theirs, add to their repo, or just see how other developers write and structure their code.

Okay, are you sold on Github yet? I hope so. Now to setup your very own Github account! Since there’s plenty of documentation already available on these next steps, I’ll just link to them here.

  1. Create a new account here.
  2. Create a new repo here.
  3. Connect to repo on your computer here.
  4. …And finally push up some sample code here!

Happy coding 🙂

Integrating WordPress Into An Existing Design

(photo from Wallflower Wonderland)

So, you have an existing website and decided to add a blog section.  You’ve installed WordPress and now there’s a default themed blog at yoursite.com/blog.  How to go about integrating your blog into the existing site’s template?

Despite all the Youtube videos and long winded posts, it’s surprisingly easy and quick to start customizing it. 

All you need to know is that you cannot edit existing themes directly.  You’re creating a duplicate theme that inherits and then overrides the settings as you see fit.  This is due to the fact that you’ll update the parent theme eventually and all changes will be overwritten.

In /wp-content/themes, create a new folder with the name of your preferred theme and append “-child” to it (I used the “twentytwelve” theme as my base so my child theme is “twentytwelve-child”).  All you need to create a child theme is to create this folder and add a style.css file.  That’s it!  The rest of the customization is primarily in the header and footer – found in header.php and footer.php, respectively.  Duplicate these files in the child folder from the parent theme and edit them to include your site’s markup.  The same goes for just about all other template files – index.php (homepage), page.php (individual post), etc.  For more details, read the Child Themes section in the WordPress docs.

To override CSS styles, include the following in your style.css file:

/*
Theme Name: TwentyTwelve Child Theme
Template: twentytwelve
Version: 0.1.0
*/

@import url(“../twentytwelve/style.css”);
@import url(“/css/yoursite.css”);

Hope this helps 🙂