Month: July 2016

Child themes – what are they and why you should use them

Since joining the Divi community late last year I think the one topic I’ve seen asked about or discussed the most is the concept of child themes, mostly when it comes to editing the footer credits in a Divi built website.

In this article I hope to give you a thorough understand of what a child theme is and why you should consider using one.

In the begining there was WordPress.

When WordPress was first released, it didn’t support themes as we know them today. If you wanted the front end to look a certain way you would edit the default templates with your own HTML and CSS. It also meant you had to have a pretty good grasp of PHP to ensure you integrated the correct function calls into your theme to ensure that the info from the database appeared to your user.

Later on the ability to create and install separate themes was added. At its core this was done to allow more flexibility to the WordPress user when it came to creating a front end for their WordPress powered site. It still meant that you needed some level of understand of HTML/CSS and PHP but it also brought about a shift in the adoption and usage of WordPress. Enterprising designers and developers realised that there was a market for selling premium themes to non technical end users who just wanted a good looking site. Fast forward a couple of years and themes are now not only able to render your data in a clean, well designed way, you’re even able to use page builder frameworks to design your page templates yourself, with the Divi theme being one of the most popular.

However, the big thing that a lot of people miss, don’t understand ( or don’t even know about ) is that WordPress also supports child themes. This was added a few years after the theme system was added and its important to understand what a child theme is to be able to understand its power.

In simple terms, a child theme inherits all the functionality of it’s parent theme, with the ability to override or customise how the parent theme works, without making changes to the parent theme files. To explain it a bit easier let me use a more real world analogy.

Lets say you buy a car. Two of the important aspects of a car are it’s underlying engine and drive train components, and the body. Now, if you want to change how the car looks, you can do things like repaint it. However, you can also modify it by doing things like adding a front or rear spoilers. Both options will change how the car looks but the respray is a permanent change, whereas the spoilers are temporary, they could easily be switched out with other parts.

Now I’m really extending the metaphor here, but the engine and drive train of your website are WordPress. This gets tweaked and upgraded from time to time (servicing and parts repair) but the core engine remains mostly the same for the life of the site. The installed theme (or parent theme) is the body work. Once you’ve chosen your theme you don’t really want to make changes to it (well get to why later). A child theme is like adding spoilers, making small changes to the main theme that are discardable or interchangeable (more or less).

Hopefully this makes things a little clearer for you. So lets talk about things like why you wouldn’t make changes to the installed theme and why its better to do it in a child theme.

To theme or not to theme.

If you have purchased a premium theme, either from a theme marketplace or a theme vendor (like Elegant Themes) you don’t really want to be making changes to any of the theme files. The reason for this is that if the theme every gets updated, you will have to either make copies of the changes to made to those files, update the theme manually and then make those changes again. If you choose to update the theme manually, then you’ll automatically loose any changes you’ve made and have to remake them.

So the first reason to use a child theme is if you have to make changes to theme files. Putting those changes in a child theme means that when update time happens you won’t loose any changes. It also means that if there are any structural changes to the parent theme that could break the site with any customisations you’ve made in your child theme, you can simply deactivate your child theme and activate the parent theme. Your customisations won’t be present until you fix them, but at least you’ll still be able to use the parent theme and keep most of the general look and feel of your site the same.

The second reason is speed. While themes like Divi allow you areas in your ePanel for custom CSS or JavaScript, its not ideal to use this for large chunks of either CSS or JavaScript code. The main reason for this is that these code snippets are stored in the database. So every time a page on your site loads, the script loading that page has to do extra queries to the database to fetch that code to render it on your page. If you use a custom header.php or footer.php in a child theme, WordPress will simply load your child theme template file instead of the parent theme template file, causing less overhead in the rendering of a page.

Finally child theme customisations are reusable on multiple sites. For example, lets say you are a web designer and you want the Divi footer credits (designed by) to be replaced by your own name. If you used a plugin to achieve this, every time you create a new site you would need to install that plugin and enter the relevant data for it to display as you want it. If you had a ready made child theme, with the correct data in the footer.php, all you would have to do is install the child theme to your client’s site and the footer credit would be correct. ( and by the way, this is not me bashing plugins, I’m a plugin developer after all, I just believe in using the right tool for the job ).

So hopefully that’s given you a good understanding of what a child theme is and why you should use it. In the next article in this series on child themes, I’ll explain how to create your child theme ( specifically for the Divi theme ) and some of the cool things you can do with it.

 

Filed under: Development, Divi, WordPressTagged with:

When Last Login review

I’m a huge fan of simple plugins. My first plugin was a simple one. The Divi Image Overlay plugin was meant to do one thing, overlay an image onto another image with a nifty animation. Since it’s launch I’ve had one or two bugs to fix and a few requests to extend it further (which will turn into other plugins later on) but it’s still my favourite plugin as it is and it’s doing reasonably well on Elegant Marketplace.

Simple plugins focus on one task and perform that task to the best of their ability are great. They’re quick to write, easy to maintain and you get what it says in the box. Some of the most popular WordPress plugins are simple ones.

So when my fellow South African and WordPress developer Andrew Lima released his When Last Login plugin I had to check it out.

When Last Login does what it says on the box. It adds a column to your users lists showing when last that user logged in. It also integrates with Paid Memberships Pro by adding a ‘Last Logged In’ column to the ‘Members List’, but as I don’t use PMP I’ll never know about it.

While it’s a simple plugin, its uses are plentiful. I forgotten how many times I have to prove to a client that they did in fact login to the site when they accuse me of not sending them login details or (on the other hand) showing the site owner that their product manager did in fact only login last a month ago, so there is no way he could have updated that product as he said he did and it’s not the CMS that lost that data.

Actually, now that I think about it, this plugin is more about managing people than anything else. Who knew plugins could help you do that?

 

Filed under: WordPressTagged with: ,

Using anchor links to open accordions and tabs in Divi

Once of the more useful things about web design is the ability to use anchor tags (those things that create links to other pages or websites) to link to sections within the same page. Once clicked the page will jump to (or you can animate it) the content it is linked to.  This is achieved by linking the anchor to the id of the element you want to link to, using a # and the id of the element in the anchor href.

So if I created an anchor tag like this:

<a href="#element-identifier">Link Text Here</a>

and a div like this

<div id="#element-identifier">Div Content Here</div>

if a user to my site clicked on the link, the browser would immediately jump to the that div, instead of opening a new page.

Now Divi has these great modules called Accordions and Tabs. These are useful for presenting large pieces of information in a more manageable layout and not requiring your visitor to have to scroll through pages of information to find the specific piece of data they are looking for. However, sometimes it’s useful to be able to open a specific accordion item or tab with the click of a button, using a similar method as the anchor links above.

This can be achieved by using some custom jQuery. While its not as easy as creating an anchor link, once you know how to do it, it becomes quite simple.

The demo page : you can view this demo on the Anchor links open demo page. You will see that I have created 2 links, some text, and accordion and a tabbed section.

The important thing to note is that I have set a CSS id to the parent element of both anchors as well as the accordion and tabs modules. This is done in the Custom CSS section for each module.

Now for the jQuery:

jQuery(function ($) {
    //accordion
    $('#open-accordion-dance a').on('click', function(event){
        $('#my-accordian .et_pb_accordion_item_1 .et_pb_toggle_title').click();
        $("html, body").animate({ scrollTop: $('#my-accordian').offset().top }, 1000);
    });
    //tab
    $('#open-tab-dance a').on('click', function(event){
        $('#my-tabs .et_pb_tab_1 a').click();
        $("html, body").animate({ scrollTop: $('#my-tabs').offset().top }, 1000);
    });
});

The two blocks of jQuery code do roughly the same thing, except the first is for the accordion and the second is for the tabs.

Effectively, each block binds to the click event of the selected anchor, (in this case selecting the anchor based on the id of the parent element) and then triggers the default click event handler of the relevant accordion or tab item. It then animates the page to scroll to the same position as either the accordion or tabbed element, based on that element’s id.

The actual selectors I’m using are irrelevant, you could use whatever selectors are generated by the Divi page. The important thing to note is how I specify which accordion item or tab item (by number) to trigger the click for. Divi doesn’t allow you to give the accordion or tab elements their own CSS id’s, so you have to inspect the page to determine which one you need to open.

If you want to try this out yourself, you can download the Anchor Links Demo code and install it yourself. Simply add the load the Page Layout to any new page, via the Divi Builder portability feature, and add the jQuery to either your child theme or integrate it into your Divi Theme Options under Integrations (remember to put it between script tags).

Filed under: Development, Divi, WordPress

Remembering ‘Why?’

It is said you should start with ‘Why?’ Over the past few weeks I’ve gone through some drastic changes in my life. These events have forced me to stop and evaluate why I do what I do and if it all makes sense.

Please bear with me for a moment while I explain. About 2 and a half years ago I opened up a martial arts school in my home suburb. I’d been training in the art of Gracie Jiu Jitsu for almost 7 years, but I was tired of the constant 30 to 40 minute travel to (and then again from) the academy. I was a dedicated student however and I figured that if there were people like me living where I did that wanted to train, If I opened my own school I’d have training partners I could train with closer to home. This could then grow into a business and I could turn my hobby into my job.

Fast forward 2 and a half years and last week I closed the school down and turned it into something resembling a ‘jiu jitsu study group’. The plan of turning my hobby into a business soon meant that I had lost sight of the ‘why’ I opened it in the first place, the ability to train close to home. I was so wrapped up in the administration, marketing, teaching and everything else that goes along with running a school that I had forgetting to get some training in myself. It was a hard lesson to learn.

This has given me fresh eyes with which to look at the reasons why I first became a software developer. I didn’t do this because I want to have my website listed on a top 5 list or because I wanted to sell plugins or be able to say that ‘I was the lead developer on that big website’. I didn’t even do it to work with specific markets or sectors of industry. I became a software developer for the simple reason that I like writing, be it code, a technical document or a tutorial or a blog post. I’m not what I would call a ‘creative’, I can’t draw or design something to save my life. What I can do is develop software that solves a specific problem or write an article or tutorial that helps someone achieve a specific task.

The honest truth is that I shouldn’t be working as a freelancer. I should be working for a company, where I am simply a small cog in a bigger machine. I am not cut out for the administrative tasks that come along with working for yourself. I barely even remember to bill my clients sometimes. But the reality of my unique situation means that I cannot, at the moment, go and work full time for a company. And it means that I am also currently failing as a freelancer. So where does that leave me?

Well, as I did when I restructured my jiu jitsu school into a study group, I will share the same quote that defines my current state of mind.

In the words of Jocko Willink, “Get up… Dust off… Reload… Re-calibrate… REENGAGE… and go out ON THE ATTACK…”

Today I launched my Patreon at http://patreon.com/jonathanbossenger. It is an attempt to re-calibrate myself and my development/writing services in such a way that I can continue to do what I love without the immediate need for fulfilling client requirements. In short I hope to build an audience of interested parties who are prepared to support me now for any plugins and tutorials I have already written or that I plan to release in the future. It will eventually mean that I can ditch the need to find client work and focus on what I do (pretty) well, write code and tutorials for others to use.

I trust you will consider supporting me.

UPDATE: So since launching this Patreon I’ve had some success with my plugin sales and I’ve decided to close the Patreon. The web development world isn’t yet ready for this kind of crowd funding. Since doing this I’ve noticed a few other developers are trying it out themselves, and I wish them well. I’ve just realised it’s not for me.

Filed under: ExperiencesTagged with:

Some days I hate PHP myself

Some days I get why some developers hate on PHP

Checking if a string exists in another string

$string_found = stristr($text, $original_text);
if( $string_found !== FALSE ) {
// do stuff
}

instead of just being able to do

$string_found = stristr($text, $original_text);
if( $string_found ) {
// do stuff
}

because of the fact that stristr returns either an integer, which could be zero (which evaluates as a boolean to FALSE) or a boolean FALSE;

*sigh*

Filed under: Development

A quick guide to some everyday Git commands

When I first started developing code the idea of version control was pretty much unknown, especially in the world of web development. As I progressed through my career and worked at different software companies I learned as much as I could and I’ve now settled into the daily routine of committing, branching, pushing and pulling. While this might sound vaguely naughty, if you are writing any sort of code, you should really look into version control. My current favourite is Git.

I’m not going to get into installing and setting up Git. This article is designed merely as a resource of common Git commands, mainly because I tend to forget them 😉 I’ll be adding commands to this list as I need (and discover) them.

If you are on a Mac or Unix type machine you will have a Bash style command line you can use, if you are on Windows I highly recommend using GitBash.

At the moment if you want to use version control and Git, you’re two big choices are GitHub and Bitbucket. I use both, GitHub for public projects and Bitbucket for private projects. Most of the commands listed below will be ones that I use for Bitbucket repositories, but they are also relevant to GitHub. Either or them gives you a step by step guide to creating, initialising and configuring your code folder to work with your repository.

Commands:

git add –all

This allows you to add all new files to your git repository. It’s not 100% ideal as it might add files you don’t want to necessarily add at this point, but it’s quick and easy.

git commit -a

This command will commit your current changes to the repository and prompt you to enter a message for the commit. I prefer it to using the -m (message) swtich because I can see all the files that have changed for my commit message. If you are using GitBash, you will also need to know how to use Vim style editor commands.

git push -u origin master

This command will push all changes on the current master branch to the remote repository.

git checkout <branch_name>

Switches to the branch ‘branchname’

git checkout -b <branch_name>

Creates and switches to the branch ‘branchname’.

git push -u origin<branch_name>

Push all committed changes to the branch ‘branchame’ to the remote repository.

git push –all

Pushes all branches to the remote repository.

git pull

Pulls all changes from the remote repository. Useful once you have merged a pull request.

git push origin –delete <branch_name>

Delete a remove branch

git branch -D <branch_name>

Delete a local branch, which has NOT already been fully merged

git branch -d <branch_name>

Delete a local branch, which has already been fully merged

Filed under: DevelopmentTagged with: ,