What’s the Purpose of inc and lib Folders within WordPress Themes and Plugins?

What’s the Purpose of inc and lib Folders within WordPress Themes and Plugins?

WordPress Directories

WordPress inc and lib folders (directories) aren’t something that I would say belong solely in themes or only in plugins. Instead, I’ve used the inc directory and lib directory in both themes and plugins.

The inc Directory

As my general rule, I use the inc directory primarily to place collections of functions that are related to core functionality but aren’t necessarily meant to clutter up the primary core of the theme or plugin.

For Themes

For example, if I’m working on a theme and I have a collection of functions for said theme that I use as helper functions, I’d much rather create inc/helpers.php than to drop them in functions.php. Over time, more helpers can be added.

In more specific cases, I also use the inc directory as a way to store core theme files such as theme-customizer.php or custom-header.php. This way, these files are focused solely on a single purpose and are easier to maintain over time. Plus, they are self-descriptive.

This keeps functions.php lean, and it keeps procedural programming files slightly more organized than having one giant “god-file” by the time of delivery.

For Plugins

In the case of plugins, I generally use object-oriented programming so the inc directory is normally used to hold additional classes that I write that are used as part of the core plugin file, but are dependencies.

This means that if I have the core plugin that depends on, say, a custom CSV parser or a serialization / de-serialization class, then these files would reside in inc.

The lib Directory

In short, the lib directory is used for third-party libraries. That is, these are used to make sure that I place code written by another author or team of developers in a place that I can easily retrieve (and attribute – don’t forget! :)) in my project.

The thing about third-party libraries is that they aren’t always PHP-based. Instead, they may be JavaScript based, CSS based, or a combination of all three. In that case, I have to take it case-by-case.

If it’s a third-party JavaScript library such as say, FitVids, then I’ll have a directory js/lib/jquery.fitvid.js. Similarly, if there’s a CSS libraries that I’m using, like Foundation, then I’ll drop those files in css/lib/foundation.css.

Finally, if there is a library that is composed of JavaScript and CSS and/or PHP, then I normally drop them in the lib directory in the root of the theme or plugin because most of those files will have dependencies on one another and it’s significantly more painful to try to go through and update all of the relative path references especially when you have to repeat the process when there’s an update.

Also, I know that an alternative to this is using a vendors directory. Though I’ve seen the convention and think it’s just as good, I’ve personally just stuck with lib.

Please feel free to share to this information to anyone who would like to learn more about the use of WordPress inc and lib folders. Of course also feel free to submit a comment.

If you want a recommendation of some high quality WordPress themes, plugins, and other digital assets, you should check out what envato.com is currently offering below.

Unlimited Digital Assets

GO TO ENVATO.COM

If you’re looking for all things WordPress, check out all of our latest WordPress guides.

references: developer.wordpress.org, tommcfarlin.com, largo.readthedocs.io

Advertisements
Optimize Google Fonts Loading Time: How to Guide

Optimize Google Fonts Loading Time: How to Guide

Using web fonts can be a great way to improve the look and feel of your website. I love tinkering with different font combinations on websites and seeing the changes they make. Unfortunately, adding web fonts to your site adds extra overhead to your site and can often slow your page load times. If you’ve worked hard to ensure that your application has a fast load time, the last thing you want to do is slow it down with extra HTTP requests that carry unnecessary weight.

SPECIFY TEXT

There might be a time when you know in advance which particular letters of a web font that you’ll need. This often occurs when you’re using a web font in a logo or heading. Fortunately, Google Fonts allows you to specify the exact text that you might be using in the text= value in your font request URL.

For example, you would call the font resource like so:

http://fonts.googleapis.com/css?family=Yellowtail&text=Hello

By specifying the exact text you require, Google Fonts will provide you with a font file that is up to 90% smaller than the original file size! Whoa! In order to add more letters, simply add more characters to the text value in the font request URL.

To give you an example of the file size improvement, look at the Yellowtail font on the Web Typography site.

Web Typography

On this page, only text was needed for the H1 tags in the header and footer. By specifying just the text you need, you manage to reduce the original file size from 18 KB to 3 KB.

CHOOSE A SUBSET

The average webpage often doesn’t require the entire unicode character set of a font file, which means it is best to restrict the character subset to the characters that your page requires. There is no need to support a language set that your site may never use!

In order to use this functionality, you simply need to use the subset=value in your font request URL.

http://fonts.googleapis.com/css?family=Inconsolata&subset=latin

Open Sans, which is one of the most popular Google web fonts, provides support for 20+ languages, and comes in at 217 KB total, but only 36 KB when restricted to a latin subset.

COMBINE MULTIPLE FONTS

Depending on your application, you might want to use font combinations to enhance the design. Instead of making a separate request for each font file, rather consider chaining the request together. To request multiple font families, separate the names with a pipe character (|).

http://fonts.googleapis.com/css?family=Yellowtail|Roboto+Condensed

In the request URL above, I am asking for the Yellowtail font and the Roboto Condensed font in one request. This simple trick will improve the load times of your font families.

PUTTING IT ALL TOGETHER

Because we want to keep our website pages as lean and fast as possible, this functionality allows us to combine all of these parameters together to produce a minimal font set. There is no reason why you can’t add web fonts to your site and still achieve fast load times!

reference: web typography

CSS Transitions and Animations: Intro Guide

CSS Transitions and Animations: Intro Guide

I’ve noticed in the comments of other posts recently that some readers would like more “tips and tricks” articles, particularly about CSS. So in today’s post, I’ll be providing what I hope is a useful introduction to a bit of CSS “trickery” that can be used to create compelling microinteractions across your website. Specifically, we’ll be learning how to create CSS transitions and animations. We’ll also be talking about when and where you might want to use them.

What Are CSS Transitions and Animations?

The evolution of CSS over the years has lead to some really amazing innovations within the language. In the case of transitions and animations, what previously required a program like Adobe Flash or another coding language altogether (such as Javascript) is now possible with nothing but HTML and CSS.

This kind of language maturity, enabled by better browsers and higher web standards (among other things), has been a huge boon to web designers who double as front end developers. They can now do more with less and the whole process of web design/development has become a bit easier.

Nevertheless, CSS transitions and animations are still considered advanced uses of CSS. A spectrum of coding I try to stay away from in most of my articles since I do not consider myself an “advanced developer”–even in language as accessible as HTML or CSS.

That said though, after reading up on W3Schools and elsewhere I think a sufficiently simple introduction to these concepts is within the grasp of not only myself but a good deal of the WTG readership as well.

To begin, I think we need to have a really good idea of what, exactly, CSS transitions and animations are before jumping into examples and code.

CSS Transitions

A CSS transition allows you to change the property values of an element over a given duration that you set. To create a transition you must first identify which CSS property you want to add an effect to and then specify the duration of the effect. If no duration is set, the transition will not occur.

There are four transition properties:

transition-delay – specifies the delay, in seconds (s), you would like to assign your transition effect.

transition-duration – specifies the duration, in seconds (s) or milliseconds (ms), you would like to assign your transition effect.

transition-property – specifies the name of the CSS property your transition effect is meant for.

transition-timing-function – Specifies the speed curve of the transition effect. Meaning, the type of speed variation you want to select for your transition effect. There is no “fast” or “slow” options. Instead there are speed curve options that go from one speed to another. Such as “ease” which tells your effect to start slow, then go fast, then end slowly.

To create a transition you only need to change one of these properties over the duration you choose. However, it is possible to change more than one property at the same time; resulting in more dramatic transitions.

CSS Animations

Where CSS transitions are all about altering element properties as they move from state to state, CSS animations are dependent on keyframes and animation properties.

keyframes – keyframes are used to define the styles an element will have at various times.

animation properties – animation properties are used to assign @keyframes to a specific element and determine how it is animated.

There are eight animation properties:

animation-delay – specifies a delay for the start of an animation.

animation-direction – specifies whether an animation should play in reverse direction or alternate cycles.

animation-duration – specifies how many seconds or milliseconds an animation takes to complete one cycle.

animation-fill-mode – specifies a style for the element when the animation is not playing. Such as when it is finished or when it has a delay.

animation-iteration-count – specifies the number of times an animation should be played.

animation-name – specifies the name of the @keyframes animation.

animation-play-state – specifies whether the animation is running or paused.

animation-timing-function – specifies the speed curve of the animation.

The examples below will show you how these things are used together in various ways. Once you understand the relationships between them you’ll be able to figure out all kinds of interesting ways to use them.

A Quick Note on Vendor Prefixes

In your personal usage of CSS transitions and animations you will most likely need to use vendor prefixes. In some of the code below you will no doubt notice some vendor prefixes. Many of the source examples do not contain vendor prefixes, so if you want to see what the code looks like without them you can check there; I thought it might be helpful to provide a fuller picture.

For the uninitiated, when I say “vendor prefix” I’m referring to a prefix that needs to be added to your CSS based on the range of browsers you want to support your transitions and animations.

A good resource for identifying the necessary prefixes for each browser is caniuse.com. You can also check out the respective pages for transitions and animations on W3Schools. Or, if you’d like to avoid the mess of prefixes altogether, you can use a tool like Bourbon.io.

CSS Transition Examples

The CSS transition examples below are all transitions I’ve found from various sources that show what’s possible with these relatively new CSS capabilities. I’ve chosen to recreate the examples I found using CodePen so you can easily take a peak at the HTML and CSS required for each example while also seeing it in action
1. Linear

Example via.

2. Spin

Example via.

3. Color

Example via.

4. Square to Circle

Example via.

5. Card

Example via.

CSS Animation Examples

Again, the CSS animation examples below are from various sources around the web. Just as above, the CodePen allows you to see the animation and the required code in one place. You can also follow my source links to get more information (in some cases) on each example.
1. Pulse

Example via.

2. Shake

Example via.

3. Bouncing

Example via.

4. Bounce In

Example via.

5. Linear Bar

Example via.

Potential Use Cases for CSS Transitions & Animations

As I mentioned above, CSS transitions and animations are ideal for creating compelling and delightful microinteractions across your website. A lot of great WordPress themes and plugins come with some of these behaviors in place. A good example being the Divi Builder, which allows you to control transitions and animations within its module controls.

You may however wish to take the basics above and apply them other areas of your site in which a theme or plugin author has not given you easy control over. The following ideas might help you get started.

  • An email opt-in form that makes a delightful entrance and exist; such as bouncing in and folding closed to disappear.
  • A form that shakes when the essential information is not and someone attempt to submit it as finished.
  • Buttons that fold open, bounce, shake, or in some other way respond to hovering and clicking.
  • Preview images that turn over to reveal more information.
  • Subtle background graphics that move, creating depth.
  • Beautiful charts that spring into action as they load.
  • Google Doodle style experiments, logos, and more.
  • Games (for the really ambitious).
  • Ads that you can interact with or that subtly change shape to draw attention.
  • Beautiful product displays that rotate and respond to the mouse.
  • Beautiful stat counters.
  • And whatever else your imagination can think up.

Inspiring Showcases of CSS Transitions and Animations

If you need more visual stimulus than a list of ideas, I’ve take the liberty of compiling a small but impressive showcase of inspiring CSS transitions and animations that I hope will show off the potential illustrated in the rather basic examples I created above.

Logos in Pure CSS

Logos-In-Pure-CSS

Logos in Pure CSS is a great showcase of world famous logos re-created with nothing but CSS. In their current form they use animations and transitions to show how they are made and how they stack up against their traditional counterparts. However, I think it’s important to note that just creating your logo in HTML/CSS opens up a lot of interesting possibilities.

Go to Logos in Pure CSS

CSS A/Z

CSS-A-Z

CSS A/Z is a showcase of HTML/CSS animated sketches; one for each letter of the alphabet. Great stuff and a lot of ideas for sprucing up seemingly insignificant elements on your website.

Go to CSS A/Z

Double Ring

Double-ring

I think Double Ring is a great example of something you could do with a logo to make it more eye catching and interesting.

Go to Double Ring

Navigation Bar

nav-bar

Navigation Bar is an example of just how dynamic and beautiful something as standard as navigation can become when given some advanced CSS love.

Go to Navigation Bar

In Pieces

In-Pieces

In Pieces is a magnificent (and highly complex) use case of CSS animation. It’s an interactive exhibition of the evolution of 30 species of animals. Truly breathtaking and a great indicator of just how powerful a tool CSS can be.

Go to In Pieces

Additional Resources & Tutorials

In your quest to master CSS transitions and animations, there is a good chance that you’ll need or want more detail than I am able to provide in this post. Additionally, someone else’s writing style may be a bette fit for the way you think. That’s why I’ve compiled a short list of other useful resources and tutorials below for you to take advantage of.

In Conclusion

CSS transitions and animations are an extremely useful and versatile set of capabilities. You can do small subtle things or big in-your-face impressive things. But either way, it all starts with mastering the basics and moving on from there.

I hope this post is a welcome change of pace for those who have been requesting more CSS related content. If you have any more thoughts or requests on this post or future posts then please feel free to drop us a line in the comments section below.

references: elegant themes, w3schools, shayhowe, caniuse, bourbon

Data Table with CSS – How to Tame

Data Table with CSS – How to Tame

A data table can be a pain to work with, perhaps comparable to herding cats or taming a lion.  Tons of similar-looking, heavily-nested markup can be viewed as completely inflexible. One of the biggest problems I ever encountered was working on a particular company, whose content was almost exclusively data tables, it involved making tables’ cells line up nicely not only with each other, but also with those cells in other tables on the page.

Example of a data table with css:

The problems

There are a lot of headaches we encounter when building tables, and I imagine most of you reading this article will nod along to every point I make; it will be something that will have annoyed us all at some point or another. What this particular (and very specific) problem boils down to is trying to consistently format, size and align complex data layouts across multiple tables. Imagine a financial report; loads of tables of data with differing numbers of cells and columns that—from a purely aesthetic perspective—need to line up in some neat, coherent fashion. Achieving this is made very difficult by a number of different factors…

Cell widths

Tables lay out their cells—by default—in a rather unusual, almost haphazard way. There seems to be no rhyme or reason behind how and why they are rendered at the widths they are, which leads to columns and cells of differing sizes.

Spanning cells

In order to have cells span several columns (and rows, but that doesn’t pose the same problems), we have to use the colspan attribute. To have a cell spanning two columns we would write <t[h|d] colspan="2">. These are often unmanageable, and it can be confusing to remember what all your colspans should add up to.

Knock-on effects

Resizing one cell in one row can, and usually will, affect the layout of the entire table. This is is because all cells’ boundaries have to line up with the boundaries of the rest of the row and column in which it sits. You can’t just change the width of one cell, you have to change them all. This means that, for example, spanning one cell across xcolumns might mean having to update a whole load more colspans elsewhere in thetable.

Tables next to tables

The above problems are further compounded when you begin laying out multiple different tables on any given page. In Sky Bet world, this was pretty much every page. One table’s rendered layout might be vastly different to the tables above and/or below it, creating an unsightly mess of misaligned columns. You might have a tablewith no colspans above a table with some colspans, above a table with lots of awkward colspans. You might have a table with lots of cells above a table with very few. You might have any combination of amounts of cells and amounts of colspans. It all gets very hairy, very quickly.

Solution

I’ve come up with what I feel is a solid, very pragmatic solution.

There are two parts to solving this problem. Firstly we need to standardize the number of cells in every table, and then we need to force these cells to all be the same width. Think of this as a grid system for tables.

24 cells

Think about page layouts that adhere to a grid system; you might have a 24 column grid, but your page might only have two main columns which span, say, 16 and eight columns respectively. You can’t see the 24 columns, but they’re there. You might then have a large footer broken into three columns of eight (again, adding up to 24).

We need to apply this model to tables; we shall give all tables 24 columns, and then use a generous amount of colspans to knock our cells through into each other, into more useful layouts. Now every table we build will be based on a 24 column grid which will, firstly, make everything more consistent, and, secondly, it will make our maths much simpler. We just need to make sure every row’s colspan values add up to 24 every time.

This does mean that every cell in the table now has to carry a colspan, but as I said, this solution is a pragmatic one.

The reason we pick 24 is because it can take halves, thirds, quarters, sixths, eighths and twelfths; we can make a lot of layouts if we have 24 columns to play with.

Now, we would write this snippet:

...
    <th>Column one</th>
    <th>Column two</th>
    <th>Column three</th>
...

as:

...
    <th colspan="8">Column one</th>
    <th colspan="8">Column two</th>
    <th colspan="8">Column three</th>
...

For all this is more markup, it does mean we can begin to standardise our tables’ layouts so that multiple tables on the same page can share a lowest common multiple and are now able to be aligned to one another.

The short version of this section is basically: we are setting up a grid system for ourtables.

Equal width columns

It’s all well and good that all our tables have the same number of columns, but that doesn’t escape the fact that browsers will still render every table differently, and that the size of these cells will always vary. There’s no point having a 24 column table-grid-system if each column is a different width. Thankfully, this is the easiest part of the puzzle to solve and, probably, the most interesting part of this article: table-layout: fixed;.

Now it’s time to tame a data table with css.

There is a little known, and even less used, CSS property called table-layout. table-layout basically tells a browser how to render the columns in a table, and is, by default, set to auto. auto means that the browser will automatically render the cells in a table based on their width, which leads to the differently and inconsistently sized columns.

Interestingly, table-layout: fixed; is the backbone of my pure CSS, equal-width tabs.

Setting table-layout to fixed however, tells the browser to render every cell the same width as each other. Equally-sized table cells right out of the box!

Combining the two

By giving our tables a common grid system of 24 columns, and ensuring these columns are all of equal width, we can begin throwing together all manner of layouts.

I would propose that you opt into the table-grid-system via a simple helper class, perhaps .table-grid:

.table-grid {
    table-layout: fixed;
}

Every time we want to build a table to a fixed and consistent layout, we simply invoke the grid and lay it out to that.

Hopefully now you’ve gained an edge and can control a data table with css on your project(s).

How to Add a Back to Top Button to Your WordPress Site

How to Add a Back to Top Button to Your WordPress Site

User experience is often an overlooked aspect of website design, which is unfortunate, really, because it plays an important and essential role in ensuring visitors can easily use and navigate your site.

It’s in your best interests to make your visitors’ experience seamless and as effortless as possible. After all, you want them to spend time on your site, read your content and even buy your products or services if you offer any.

A small feature that many sites offer is a “back to the top” button, which allows users who have scrolled through pages of content to quickly return to the top of the page. This feature is especially useful for sites that contain a lot of information or have infinite scroll.

In today’s WTG project we’ll show you how to add a dynamic “back to the top” button to your site in a few quick and easy steps.

Before You Begin

An example of a back to top button
An example of the back to top button we’ll be creating.

The button we’re going to create will sit in the bottom-right of the page, will be fully responsive, fade into visibility when you scroll down and smoothly scroll up to the top of the page when the button is clicked. Neat, right?

First, there is one incredibly important action you should take before you start.

The steps to set up the button are simple, but it will require editing theme files. For this reason, it’s important that you backup your style.css and functions.php files in the theme where you want the button to appear. While you’re at it, back up your whole site just to be safe and because it’s a good habit.

If you want to add a back to top button to an existing theme, it’s a WordPress best practice to create a child theme so that any changes you make will not be erased by future updates of the original theme.

All set? Let’s go!

Copy and Upload the Script

Access your site’s files via FTP or cPanel and navigate to your theme’s JavaScript folder, which will be in wp-content > themes > your-theme > js.

The location of this file may differ from theme to theme, but usually, you’ll find it here. If your theme doesn’t contain a js folder, then go ahead and create one.

In this folder, create a new file called topbutton.js. You can name this file whatever you’d like, but if you do change the name, keep in mind that you will also need to change every reference to it in the code you add. Either way, add the following code In the new file:vtopbutton.js hosted with ❤ by GitHub

You can adjust how fast the button scrolls to the top by editing the number beside var speed = toward the top. The higher the number, the slower the automatic scroll will be.

Similarly, you can adjust the speed of the fade animation by editing the number beside var duration = and how many pixels are scrolled on a page when the button appears by by editing the value for var offset =.

This script is set up to display the button after you’ve scrolled 100 pixels on a page. It’s set low so it’s easier for you to test out even if you have a fresh install with very little to no content.

Realistically, you may very well want to change these values to whatever suits your specific needs. Once you have successfully created this new file, you’re ready to move on to the next step.

Make a Button

Make a note of your button image's URL in your media library
Click on your uploaded button’s image in your media library to find the URL you need to complete this step.

Use your favorite image editing software to create a button, purchase a button image or find one with a GPL licence that you can use for free. Upload it to your site and make a note of the image’s direct link. We’ll need it for the next step.

Once you’ve uploaded the image file, you can find the URL you need by viewing your media library and clicking on the thumbnail of your button. An in-line popup will appear and on the right-hand side you’ll find the link.

If you don’t like the idea of adding an image and you’d rather add text, this is also possible.

Keep in mind that the text will likely inherit the color, size and font of your theme so styling the button through CSS will take a bit of skill. The results will be very specific to your theme so using an image for the button as we are doing here is a much simpler solution.

Keep this page open and head on over to the next step.

Edit the style.css File

Open your theme’s CSS stylesheet add the following code anywhere you see fit as long as it’s not in between already existing tags and code. At the very bottom is a great place for it.

Alternatively, if you’ve previously installed a plugin such as Simple Custom CSS, you can add the code right into the area provided. Don’t forget to hit the save button!vstyle.css hosted with ❤ by GitHub

Don’t forget to replace the image link in this snippet of code with your button’s URL you noted in the previous step. If you don’t change the link, no button will appear so don’t forget this step.

4. Edit functions.php

In order for the JavaScript file you created to have any effect, you need to tell WordPress you want to use the file. You can do this by creating what’s called an enqueue script in your theme’s functions.php file.

The best place to add the following code is at the very end of the file, that way it will be less likely that it will interfere with other code. functions.php hosted with ❤ by GitHub

Once you’ve either edited and saved the file directly through your control panel or you’ve used FTP to upload the edited file – and replace the old one – you’re all set to start the next step.

Add the Button Link

The last step is to add the actual link to the pages of your site so the back-to-top button will appear.

You could put this link in every page template you have or in the header.php file, but since the button will appear at the bottom of the page, let’s put it in your footer. It will keep things nice and simple in case you decide to make future changes.

You can place your link virtually anywhere in the footer.php file.
I placed the link above the footer tag in the footer.php file when testing out this button in the Twenty Fifteen default theme.

Open your footer.php file which will most likely be found in thewp-content > themes > your-theme folder.

The button is set to hover separately over all content of the page at the very bottom, right-hand corner so it doesn’t matter where you put the button link as long as it’s not smack dab in the middle of other code. Placing it between the footer or a div tag is usually a good spot.

If you decide to change the position of the button in the CSS stylesheet, keep in mind that where you put the button link may actually matter. It may appear exactly where you placed the link in the footer.

The CSS is currently set to a fixed position of 5 pixels from the bottom and right-hand side of the window so it shouldn’t currently be a problem. Here’s the link you will need to add to your footer.php file:footer.php hosted with ❤ by GitHub

You may notice the the link doesn’t actually have any text or button associated with it. This is because we’ve already established the button image with CSS so it’s not necessary to add it.

It’s also made clear that we are using a class instead of an id to define the link and its properties. This is simply so you can be free to add more similar buttons to your page, rather than being confined to one button per page. Changing this is not necessary.

The moment you’ve been waiting at the edge of your seat for has arrived! Go ahead, visit a page in your site that requires a lot of scrolling and check out your new “back-to-top” button.

Final Thoughts

Now your site’s visitors will be able to view your content with a bit more ease. If you’re not too keen on editing your theme’s files yourself, not to worry, there’s an easier alternative.

The easier alternative (plugin):

Scroll Top plugin will enable a custom and flexible Back To Top button to your WordPress website. It allows your visitor to easily scroll back to the top of your page. You will get features such as unlimited color choices, icon font & retina ready.

Now you’re ready to make your visitors’ experience a better one with each and every click.

references: wpmudev

What do you think of back to top buttons? What would you add to a site to increase UX? Let us know by submitting a comment below.