One of the key perks of using an icon font is its scalability. They can be resized without losing quality, making them perfect for responsive web design, as they can be scaled – with CSS media queries – up for desktop or down for mobile. On top of that, icon fonts are fully customizable, allowing you to easily adjust the size and edit the color to fit the layout and color scheme of a particular UI design.

Icon fonts are incredibly easy to add to any web design or mobile app project using CSS. You load the font file using @font-face, and using standard CSS rules, you can set the font-size, color, padding, margin, or other properties.

Although very popular, icon fonts do also have their pitfalls. Ian Feather has discussed his reasons for switching from an icon font to SVG, and CSS Tricks have outlined some considerations when choosing between icon fonts or SVG icons. Both favor SVG.

As a counter-argument, Pictonic has said that icon fonts are 10% faster than SVG. These are just things you should consider before you use icon fonts.

To ensure that your icons always load correctly and have reliable fallbacks for browsers that don’t support @fontface, you should take a look at the guidelines set out by the Filament Group, Bulletproof Accessible Icon Fonts.

The post 30+ Best Free Icon Fonts for UI Design in 2024 appeared first on Speckyboy Design Magazine.

The result is an inconsistent design. Things like colors, animation speed, and element spacing can vary – simply because a designer didn’t catch every instance. Thus, the user experience is thrown out of whack.

CSS variables (a.k.a. Custom Properties) are a great way to combat these issues. Yet, not all designers know about this simple technique. Today, we’ll take you on a quick tour of what they are and what they do. Let’s dig in!

Set a Value Once, Use It All Over

Those familiar with programming languages such as PHP and JavaScript may recognize the term “variable.” A variable sets a value (static or dynamic) that can be retrieved later in a script. For instance, a PHP variable called $user_first_name might be utilized to fetch a logged-in user’s first name to display on a page.

Similarly, CSS variables are there to repeat a value throughout a stylesheet. At the bare minimum, this saves us from typing in a font family or hex color code multiple times.

You may also recognize variables from CSS preprocessors like Sass. There, variables serve essentially the same purpose (although the syntax is indeed different). However, they are not native to CSS. That means the preprocessor has to convert a variable into valid CSS.

CSS variables are a native solution. They’ll save you from having to use a preprocessor unless you really want to. Now, any stylesheet can take advantage of this handy feature.

And you shouldn’t have to worry about browser support – with a caveat. Every modern browser has supported CSS variables for quite some time. But if you’re still targeting Internet Explorer users, a fallback will be required. That is a consideration, but everyone else is good to go.

A Basic Example of a CSS Variable

Color is one of the properties that often gets repeated throughout a stylesheet. For instance, you might use the same color for specific headings, container backgrounds, buttons, and more. Using a CSS variable here makes the task of assigning and changing a value much more efficient.

Let’s use the iconic blue color of Speckyboy as an example. First, we’ll set up a variable in our stylesheet:

:root {
--speckyboy-blue: #4F78A4;
}

The variable name, --speckyboy-blue, is set to a hex color code. From there, it’s a matter of calling the variable for every instance where we want to use this pretty shade of blue.

If we wanted to use this as a text color on an element in our stylesheet, the syntax would look like this:

color: var(--speckyboy-blue);

The following example shows how the variable can be used in multiple places. We also threw in another variable for our top and bottom margin value to keep spacing consistent throughout our design for good measure.

See the Pen Basic CSS Variable by Eric Karkovack.

Future changes will now be much easier as well. Because of the CSS variables in the above snippet, we now only have to change the hex color of --speckyboy-blue or the pixel value of --vmargin. Those values will cascade down to every instance in our stylesheet.

CSS Variable Resources

Our example only scratches the surface of what is possible with CSS variables. It’s worth digging a little deeper to see how it can be used in more advanced scenarios. The resources below are a great place to learn more:

• A Practical Guide to CSS Variables (Custom Properties) by SitePoint
• Everything you need to know about CSS Variables by freeCodeCamp
• Global and Component Style Settings with CSS Variables by Sara Soueidan
• It’s Time To Start Using CSS Custom Properties by Smashing Magazine
• Logical Operations with CSS Variables by CSS-Tricks
• MDN: Using CSS custom properties (variables) by MDN
• What is the difference between CSS variables and preprocessor variables? by CSS-Tricks

The post How CSS Variables Can Improve Efficiency & Consistency appeared first on Speckyboy Design Magazine.

If you’re looking to learn more about what CSS Grid is and what it does, you’ve come to the right place. We’ll provide a rundown of what you need to know, along with some helpful resources to get you started.

First Thing’s First

One thing we need to note is that, as of this writing, CSS Grid is still a work in progress according to the W3C. That means that the final version of this specification hasn’t been fully released just yet. Overall, browser support is a bit spotty. But that will certainly change as the final spec rolls out.

That being said, it’s never a bad idea to get ahead of the curve when it comes to learning new techniques. Just keep in mind that some things may change between now and the official release. With that fair warning out of the way, let’s dig in and learn more about this important development in web design.

Layout in 2-D

CSS Grid is a system that allows for building 2-D grid layouts. While the term “2-D” doesn’t sound so groundbreaking, it absolutely is in this particular case. You see, CSS Grid will allow you to manage layout according to both columns and rows.

Flexbox, by comparison, is really just meant for columns (1-D, if you will). Using CSS Grid, designers will be able to achieve layouts that were downright difficult before. In fact, some of these things were on our wish lists since the days of table-based layouts.

With tables, it was easy enough to have a column take up multiple rows using the rowspan attribute. CSS didn’t really have a direct equivalent. That led to using multiple nested containers, floats, clearfixes, etc., to achieve the desired effect. This is exactly what CSS Grid aims to fix.

The good thing is that if you are at all familiar with Flexbox, then you’ll be off to a great start with CSS Grid. With both Flexbox and CSS Grid, things are set up via a parent container and subsequent items (children). And, like Flexbox, content order can be set via CSS. This is particularly nice when adjusting the content for mobile devices. What shows up first on a desktop grid may be pushed down lower in the display order on smaller screens.

A Simple CSS Grid Example

Let’s look at a very basic CSS Grid layout. There are three columns and two rows. The third column is unique in that it spans both rows and will display on the right side of the layout.

It actually takes very little code to make this happen. Take a look:

The CSS:

.container {
display: grid;
grid-template-columns: [col1] 33% [col2] 33% [col3] 33%;
grid-gap: 10px;
grid-template-rows: [row1] 47% [row2] 47%;
text-align: center;
color: #FFF;
}

.grid-cell-1 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-2 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-3 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-4 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-5 {
background-color: #898989;
grid-column: 3 ;
grid-row: 1 / 3;
padding: 25px;
border-radius: 6px;
}

A few notes on the CSS:

• In .container, notice that we have the ability to define the width of columns and height of rows. We can also individually name columns and rows with the use of brackets: [name]
• .grid-cell-5 has a couple of interesting attributes. grid-column: 3; tells the browser to start this item as the third column. Meanwhile, grid-row: 1/3; says that the cell will span from the first row until the start of the (non-existent) third row.

The HTML:

Doing this type of layout without CSS Grid would be significantly more challenging. There are, of course, several more complicated layouts that can be achieved. But hopefully, this will illustrate the ease with which something basic can be set up.

The Demo:

See the Pen Simple CSS Grid by Eric Karkovack

CSS Grid Resources

There are a number of outstanding guides and tutorials out there to help you make the most out of CSS Grid. Here are just a few to get you started:

• 10 Creative Examples of CSS Grid in Action
• A Complete Guide to Grid By Chris House
• CSS Grid Layout By Mozilla Developer Network
• Grid by Example By Rachel Andrew
• A Complete Guide to CSS Grid By Codrops CSS Reference
• An Introduction to the CSS Grid Layout Module By Ahmad Ajmi

The post An Introduction to CSS Grid appeared first on Speckyboy Design Magazine.

In addition to being helpful to the user, these icons are just another level of polish designers and developers can apply to help a website stand out.

Our web design team has created an efficient toolkit to design and apply these useful icons in our client’s projects so that they appear consistently across platforms. We’d like to share with you our favicon production process, the development of our Icon Suite Photoshop template, and some of the trials and tribulations we’ve navigated so that you can create a beautiful, reliable favicon in your own web design projects.

Changes in the Favicon World

As favicons gained popularity, the number of cuts required to provide a great experience quickly grew. In order to streamline our process, we took a closer look at how modern mobile and desktop browsers and operating systems are using favicon assets.

These platforms drove our design team to reevaluate our approach, resulting in the creation of our Icon Suite. We found that all of the icons needed for a website can be created with only five cuts. (Note that the output created for iOS, Android Chrome, and Windows are doubled to ensure proper retina display).

Cuts 1 and 2: Favicon (16×16, 32×32) – This is the “classic” favicon shown in Bookmark menus and next to the current page’s address in many browsers.

Cut 3: iOS (180×180, the retina display is 96×96) – Beginning with iOS 3, Apple stopped looking for a hard-coded image filename and instead started using the largest image defined and scaling it down, which is why we’ve included the 180X180 and allow Apple devices to scale as needed. This narrows the assets needed for iOS in our Icon Suite down to a single image instead of 11.

Cut 4: Android Chrome (192×192, the retina display is 96×96) – As with Apple, Android recently began scaling the largest image down, minimizing the previous six images down to a single one.

Cut 5: Windows 8.1/10 (270×270, the retina display is 150×150) – Windows 8.1 – 10 utilize a handful of different tiles for their “metro” interface tiles, but we chose to optimize the medium square size as the highest-use scenario with acceptable performance when larger or smaller tiles were chosen.

In general, it is ideal to reduce the number of images whenever possible because some older browsers incorrectly grab all icons instead of the one most suited for the job. For a more comprehensive listing of favicon file types, take a look here.

Icon Suite Template Code

We’d like to share with you the implementation code we use. It allows each device to locate the correct favicon types needed on a given website. The following code is used in the <head> tag to identify all the needed components:

<meta name="apple-mobile-web-app-title" content="JTech Communications" />
<meta name="application-name" content="JTech Communications" />
<meta name="msapplication-config" content=“/assets/icons/browserconfig.xml” />
<meta name="theme-color" content="#ffffff" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon-180.png" />
<link rel="manifest" href=“/assets/icons/manifest.json” />
<link rel="icon" type="image/png" href="/assets/icons/favicon-32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/assets/icons/favicon-16.png" sizes="16x16" />

The manifest.json file is a way to describe a web application that is used by Android Chrome. We are using the basic information (Reference site: https://developer.mozilla.org/en-US/docs/Web/Manifest):

{
"name":"JTech Communications”,
"icons": [
{
"src": "/assets/icons/android-chrome-192.png", "sizes": "192x192", "type": "image/png"
}
],
“theme_color":"#ffffff",
"display": "standalone"
}

The browserconfig.xml file is used by IE11 through Edge for the Windows 8.1/10 tiles.

<?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
        <msapplication>
            <tile>
                <square150x150logo src="/assets/icons/ms-tile-270.png" />
                <TileColor>#04283d</TileColor>
            </tile>
        </msapplication>
    </browserconfig>

Our Design and Production Process

To speed up our process, we’ve created a Photoshop template. The template utilizes smart objects to create a mock-up of the icons in the sizes we outlined above.

This way, we only have to create an icon once for each type: Favicon, Android, iOS, and Windows 8.1/10. Photoshop renders all of the various image cuts necessary for the home screen, browser window, etc.

There are a couple of things to keep in mind:

For iOS applications – because Apple rounds the corners for you, it is best to use a square image for the icon. If you want to do rounding yourself, you can use the recomposed image cut to tell Apple not to initiate rounding, but we suggest not bothering with this step.

For Windows – The Windows 10 tiles text poses a few problems. Windows icons include a medium and small tile sizes. The small tile is medium-sized halved and will not display a text title. It is important that an icon can adequately scale to the smaller tile dimension.

At first, we would offset the image to make room for the title placement but found that when the favicon was reproduced on smaller tiles without a label, it appeared misaligned. To avoid this behavior and minimize work, our current practice is to center it, so it doesn’t appear offset when there is no title and sizing it small enough, so it looks balanced with its title.

Here’s how our logo appears in a Windows tile with a title.

Windows 10 and 8/8.1 automatically assign the text color of the title based on the color of the background. To ensure the best results, we specify the background color, even if the favicon is a full-sized image with no transparency.

After modifying objects in our Photoshop template, our script outputs all of the specific cuts our developers need. I’ve provided the script below for your own use.

Download the jTech Photoshop Favicon Script

When it comes to their value, the favicon is another example of attention to detail. Not only are they a subtle way to enhance a company’s branding and improve the user experience, but they are a way to make a website visually distinct.

Although we sometimes battle browser configurations and OS upgrades, it is a small price to pay in order to perfect our customer’s projects, adding to the custom design and overall polish.

The post Modern Favicon Development Techniques & Best Practices appeared first on Speckyboy Design Magazine.

If we use the call-to-action example, you could add something like this to your blog post to show the button and then edit the output in your templates functions.php file, which we’ll get to in a minute.

[button]

To customize the button, we could add something like the following:

[button type="twitter"]

Or, to make it even better, we could use an enclosing shortcode:

[button type="twitter"]Follow me on Twitter![/button]

With some imagination, you soon realize the potential of shortcodes and what can be done with them. In this article, I’ll show you how to create and use these three different types of shortcodes, and then I’ll show off some ready-to-use shortcodes to use on your own WordPress site.

Creating a Self-Closing Shortcode

The simplest shortcode is the self-closing one. We will create a simple link to a Twitter account and then add it to a blog post.

All the code goes in functions.php, which is located in /wp-content/themes/your-theme/. If you don’t have one, create it and put the code in it.

<?php 
function button_shortcode() {
    return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"';
}
add_shortcode('button', 'button_shortcode'); 
?>

Usage:

[button]

Simply using the add_shortcode() function, we can link any PHP function to our shortcode. In this simple example, all we do is return a link to the Twitter account, but let’s take this a step further and add some parameters.

Creating a Self-Closing Shortcode with Parameters

Shortcode has support for parameters, which lets us customize the output. In this example, we have two different buttons, so we have to define what button we want to show.

<?php
function button_shortcode($type) {
    extract(shortcode_atts(array(
        'type' => 'type'
    ), $type));
    
    // check what type the user entered
    switch ($type) {
        case 'twitter':
            return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>';
            break;
        case 'rss':
            return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>'
            break;
    }
}
add_shortcode('button', 'button_shortcode');
?>

Now you can choose what button to display by defining type in your shortcode.

[button type="twitter"]
[button type="rss"]

This is great. But what if we wanted to change the text? We could keep on adding shortcode types like [button type="twitter-2"] and so on, but that’s not very dynamic. Let’s see how to do this the right way.

Creating an Enclosing Shortcode

The enclosing shortcode allows you to embed content within your shortcode, just like BBCode if you’ve ever used that.

<?php
function button_shortcode( $attr, $content = null ) {
    return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>';
}
add_shortcode('button', 'button_shortcode');
?>

To use this shortcode, you embed the text you want to use like this:

[button]Follow me on Twitter![/button]

To make this button even better, we could add parameters as we did in the previous example. Let’s add two parameters this time, one for the Twitter username and one for the button style.

Then we can have different types of buttons and choose what Twitter account we want to link the button to.

<?php
function button_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'account' => 'account',
      'style' => 'style'
      ), $atts ) );

   return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>';
}
add_shortcode('button', 'button_shortcode');
?>

Usage:

[button account="filipstefansson" style="simple"]Follow me on Twitter![/button]
// Result: <a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!</a>

Now we have a customizable button that we can link to any Twitter account. As I’m sure you understand, you can create much more advanced shortcodes than this, but this is a good start.

Shortcodes in Widgets & Template Files

Now that you have seen the power of shortcodes, you may be wondering why you can’t use them in your widgets and your template files. Well, it turns out you can.

To activate shortcodes in your widgets, just put the following code in functions.php:

add_filter('widget_text', 'do_shortcode')

And to use a shortcode in your template files, you can access them by using the following:

do_shortcode("[button]");

Ready-to-Use Shortodes

Here are some cool shortcodes you can implement right away.

Code in Posts

If you run a blog that focuses on programming, you probably want to display code in your posts.

function code_shortcode( $attr, $content = null ) {
        $content = clean_pre($content); // Clean pre-tags
        return '<pre"><code>' .
               str_replace('<', '<', $content) . // Escape < chars
               '</code></pre>';
}
add_shortcode('code', 'code_shortcode');

Usage:

[code]<?php echo 'Hello World!'; ?>

Embed Adsense Anywhere on Your Posts

With this shortcode, you can add a Google ad anywhere on your posts simply by using [adsense].

function showads() {
    return '<script type="text/javascript"><!--
    google_ad_client = "pub-XXXXXXXXXXXXXXXX";
    google_ad_slot = "XXXXXXXXXX";
    google_ad_width = XXX;
    google_ad_height = XX;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
';
}
add_shortcode('adsense', 'showads');

Embed YouTube Videos

This shortcode will let you embed YouTube videos into your blog posts.

function youtube($atts) {
   extract(shortcode_atts(array(
      "value" => 'http://',
      "width" => '475',
      "height" => '350',
      "name"=> 'movie',
      "allowFullScreen" => 'true',
      "allowScriptAccess"=>'always',
      "controls"=> '1',
   ), $atts));
   return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>';
}
add_shortcode("youtube", "youtube");

Usage:

// Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls  
[youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]

Paypal Donation Shortcode

This shortcode helps you create donation links to your Paypal account.

function donate_shortcode( $atts, $content = null) {
    global $post;extract(shortcode_atts(array(
        'account' => 'your-paypal-email-address',
        'for' => $post->post_title,
        'onHover' => '',
    ), $atts));
    
    if(empty($content)) {
        $content='Make A Donation';
    }
    
    return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>';
}
add_shortcode('donate', 'donate_shortcode');

Usage:

[donate]
[donate]Donate Now[/donate]
[donate account="you@yoursite.com" onHover="Thanks" for="Title"]
[donate account="you@yoursite.com" onHover="Thanks" for="Title"]Donate Now[/donate]

Private Note to Authors

This last one is clever. With this shortcode, you can create notes in your posts that only the authors can see.

function sc_note( $atts, $content = null ) {
    if ( current_user_can( 'publish_posts' ) )
      return '<div class="note">'.$content.'</div>';
   return '';
}
add_shortcode( 'note', 'sc_note' );

After reading this article, I hope you love WordPress shortcodes as much as I do, and I hope you’ll start implementing them in your own blog.

The post Getting Started with WordPress Shortcodes & Sample Snippets appeared first on Speckyboy Design Magazine.

While that represents progress relative to the old Classic Editor, you’ll still need a bit of help if you want to do anything more than edit colors or font sizes. As of version 6.0, advanced styling for individual blocks isn’t readily available in a default installation of WordPress.

There are some fairly simple workarounds, however. Today, we’ll introduce you to three ways to enhance your custom layouts with the WordPress block editor. They’ll help you turn something basic into a highly-customized setup.

Option #1: Write Custom CSS

If you’re comfortable writing code, you can customize pretty much every aspect of your block editor layout via CSS. It’s perfect for those who are already building custom WordPress themes and want to client-proof their work.

How you go about the process depends on how widespread you want the styles to be implemented. In this example, we’re looking for a one-off solution. Therefore, the easiest method is to add a custom CSS class to a block.

The block editor’s settings panel has an area just for this purpose:

1. Click on the block you want to style;
2. Click the Advanced panel in the settings area to the right;
3. Add your custom CSS class name to the Additional CSS class(es) field;
4. Save your work;

Here, we’ve added the custom class rounded-corners to an image block.

Next, we’ll add that class to our theme’s CSS and define some styles. If your theme uses the WordPress Customizer, code can also be placed into its Additional CSS panel.

.rounded-corners {
     border-radius: 10px;
}

Note that you’ll also want to add this code to your theme’s editor-style.css file (if it exists) to see your custom styles reflected within the block editor.

Looking at the front end, our image now sports some beautifully rounded corners!

Option #2: Set Default Styles via Theme.json

Among the early drawbacks of the block editor was the difficulty in applying consistent styling. You had to target several CSS classes that were defined in the core software.

The advent of the theme.json file greatly simplifies the process. Instead of searching around for all of the relevant CSS, you can define block styles directly within a single file. And you have the flexibility to target blocks as broadly or narrowly as you’d like.

Layout and design aspects such as custom color palettes, typography, and spacing can be defined via theme.json. Best of all, this feature is compatible with all WordPress themes.

If you’re already using a newfangled block theme on your website, you can edit the theme.json file within the theme’s root folder (keep a backup of the original – just in case). WordPress provides some documentation with examples to guide you.

For those using classic themes or building from scratch, tools such as ThemeGen allow you to visually build a theme.json file. Select your styles, export the theme.json file and drop it into your theme’s root folder. WordPress will recognize the file and apply the styles. It even writes the CSS for you!

Option #3: Use the Editor Plus Plugin

Looking for a no-code solution and don’t want to deal with theme.json? The Editor Plus plugin has you covered. It allows for advanced styling of block layouts directly from within the editor.

Activate the plugin, and the default block editor settings area will gain a variety of new panels. From there, you can set custom padding, margins, borders, sizing, and a whole lot more. If you want visual control over every aspect of your site’s layout, Editor Plus offers a straightforward solution.

The plugin also adds a handy selection of custom blocks as well. Features such as accordion UIs, icons, and progress bars offer a bit more style and content flexibility.

Going this route does require a long-term commitment, however. Disabling the plugin will result in a loss of any custom styles you’ve created. Therefore, it’s worth considering the benefits and drawbacks before making a decision.

Take Your WordPress Page Layouts to the Next Level

In some ways, it makes sense to think of the block editor as a starting point. With it, we can create all manner of custom layouts. But until there are more configuration options added to WordPress core, it requires some extra effort to fully customize styling.

The three options above provide a path to leveling up your block layout styles. Whether you’re looking to enhance a single element or site-wide features, there’s a method for doing so.

All things considered, theme.json may be the best long-term solution. It’s baked into WordPress core, and everything’s contained within a single file. From a maintenance perspective, this is preferable to the other options.

However, there are plenty of reasons to choose custom CSS or even a plugin. In the end, it’s about finding the best fit for your needs and workflow.

The good news is that you don’t have to settle for the default block editor styles. Use your favorite tool and start building!

The post 3 Ways to Enhance Custom Layouts with the WordPress Block Editor appeared first on Speckyboy Design Magazine.

So, in this tutorial, I will show you how to use the built-in WordPress functions to create those links.

There is a function for both the previous link and the next link. Both of these functions should be used on a single post within the loop. Both functions will echo the links on the screen and allow you to change the format of the links on the page.

The Previous Post Link

WordPress has the function previous_post_link which should be used in the loop of the single posts. This function will create a link to the previous post by date. If there are no posts, then a link will not be displayed.

To use the previous post link just use the below snippet:

<?php previous_post_link($format, $link, $in_same_cat = false, $excluded_categories = ''); ?>

This function accepts four parameters:

• $format – This will allow you to change the format of the outputted link. To define just the link, use the token %link.
• $link – This defines the text that is used on the link. The default is %title of the post.
• $in_same_cat – This is a boolean which defines if the linked post is in the same category or not. The default is false.
• $excluded_categories – This allows you to define which categories are excluded from being linked to.

Examples of Using Previous Post Link

All of the parameters in the previous_post_link are optional, so the simplest use of this function is to use no parameters:

<?php previous_post_link(); ?>

Change Link Format

To change the format of the link, you can wrap it in an h1 tag by using the first parameter:

<?php previous_post_link('<h1>%link</h1>'); ?>

Change Link Text

To change the text of the link, you need to change the second parameter:

<?php previous_post_link('%link', 'Link To Previous Post'); ?>

Link to Posts in the Same Category

To only link to previous posts in the same category, use the following snippet:

<?php previous_post_link('&laquo; %link', '%title', TRUE); ?>

Exclude Links in Category

To exclude any categories from being linked to from this link, you need to use the 4th parameter. To exclude all posts with a category ID of 17, use the following snippet:

<?php previous_post_link('&laquo; %link', '%title', FALSE, '17'); ?>

Next Post Link

The next_post_link function works the same way as the previous link but will return the next post. This takes the same parameters as the previous post link function and will work the same way.

If there is no next post, then the link will not be displayed.

<?php next_post_link('format', 'link', 'in_same_cat', 'excluded_categories'); ?>

Examples of Using Previous Post Link

All of the parameters in the next_post_link are optional, so the simplest use of this function is to use no parameters.

<?php next_post_link(); ?>

This adds a link on the page to the next post using the default values.

Change Link Format

To change the format of the link, you can wrap it in an h1 tag by using the first parameter:

<?php next_post_link('<h1>%link</h1>'); ?>

Change Link Text

To change the text of the link, you need to change the second parameter:

<?php next_post_link('%link', 'Link To Next Post'); ?>

Link to Posts in Same Category

To only link to the next posts in the same category, use the following snippet:

<?php next_post_link('&laquo; %link', '%title', TRUE); ?>

Exclude Links In Category

To exclude any categories from being linked to from this link, you need to use the 4th parameter. To exclude all posts with a category ID of 17, use the following snippet:

<?php next_post_link('&laquo; %link', '%title', FALSE, '17'); ?>

Use in a Theme

When you use these in your WordPress theme, you would want the previous link to float to the left and the next post link to float to the right.

Here is a real-world example of using these functions.

<?php
    previous_post_link('<span class="left">&laquo; %link</span>');
    next_post_link('<span class="right">%link &raquo;</span>');
?>                           
<div class="clearfix"></div>

This adds a span around both of the links adding a CSS class of left or right, so you can float the link. We then use the clearfix example to clear the floats on the page.

The post How to Create Next & Previous Links in WordPress Posts appeared first on Speckyboy Design Magazine.

That being said, not all web designers and developers follow best practices. If you want to be a good web designer/developer, writing clean, manageable CSS is a healthy habit to make your code easier to maintain as your project development progresses.

Even if you’ve been building web pages for a quite a while, you may still have a few bad CSS writing habits that you’re better off forgetting. This post will also introduce you to some techniques that will help you get the most out of CSS and write beautiful, manageable stylesheets.

Let’s begin:

Bad CSS Practices

Using the Same Rule Repetitively

A lot of beginners use repetitive rules for each element. If you want to create a rule for multiple elements, use a class attribute instead.

For instance, instead of repeating color: blue rule for every tags and ID:

#intro1 {color: #3498db; font-size: 10px; font-weight: bold;}

header {color: #3498db; font-size: 20px; background-color: green;}

#banner {color: #3498db; font-size: 30px; background-image: url(images/static.jpg);}

Use a class instead:

.blue {color: #3498db;}

Using an ID Selector for Multiple Elements

When writing CSS, there should only be one ID in the HTML. Always use the class attribute for multiple elements.

For instance, instead of:

<p id="big">This is a great heading.

<p id="big">This is absolutely a greater heading.

You should use:

<p class="big">This is a great heading.

<p class="big">This is absolutely a greater heading.

Over Using the !important Rule

The !important rule was conscripted in the mid-to-late 90’s to help web designers and developers override the rules of their style sheet. The !important rule prevails over all the previous styles and says, “I’m more important, forget about all of that other CSS and use me!“. Using this out of laziness will give you a headache later on as your style sheet will be harder to maintain.

For instance:

header { 
    color: #e74c3c; 
}
header.intro {
    color: #3498db !important;
    font-size: 20px;
}
header#capture { 
    color: #2ecc71; 
    font-size: 20px;
}

In the above example, the header color is red. Except the header with the class intro and the one with the ID capture. The importance of the entire rule (both the color and font-size in this case) is accomplished by the specificity of the selector.

If you use !important, it is added at a property level, not a selector level. This means that the color property has a higher importance than the font-size. The color is more important than the color in the header#capture selector too.

Recommendation: You should only use the !important rule when overriding styles in a user style sheet, overriding 3rd party code and inline styles as well as utility classes.

Using the !important rule is often considered a bad practice due to the clutter it can bring with one of CSS’s core mechanisms which is specificity.

Using Inefficient CSS Selectors

When you are using selectors, the longer it is, the higher specificity it will comprise. This can break the CSS cascade and mess up the styles of your site.

This can be avoided by not using IDs within the selectors as they are directly specific.

For instance, we have these long selectors:

#header #intro h1.big a {... }

#header #intro h1.big a.normal {... }

We can compress it up to two or three levels deep:

.big a {... }

.big .normal {... }

Using Tons of Webfonts

It is understood that typography is a fundamental element of good web design, branding and readability.

However, regardless of the viewport size and resolution, web fonts are crucial to good web design, UX, and performance. Each font is an additional resource and not all web fonts render text well.

Depending on how you optimize the font and how they are loaded, it may affect the page size and the rendering time.

It is recommended to use one or two (probably a maximum of three) web fonts for your site and fall back to the browser defaults to keep your site optimized.

Using Inline Styles

Using Inline Styles is probably one of the worst CSS practices that many web designers and developers are still doing to this day. It transgresses the main goal of why we use CSS – which is to separate style from the HTML structure. This breaks the specificity of web pages.

It’s considered a good habit to keep your CSS and HTML separate. When you add inline styles, it makes it difficult revising the design of your site and makes your code harder to manage.

However, you can use inline CSS for HTML emails as many rules are not supported by email clients. This is an important thing if you are creating newsletter designs.

Overall, inline styles are at the lowest level of the cascade as they’ll override all other styles, so you need to be careful when using it.

CSS Good Practices

Now that we’re done talking about bad practices in writing CSS, let’s now take a look at some of the good ones.

Use a CSS Table of Contents

It is recommended to use a CSS table of contents when starting your style sheets. This will help you track down your code easily as you move along. Keep things organized and you will write styles more efficiently.

Consider this example below:

/* Project Meta */

/* reset  */

/* general */

/* typography */

/* grid */

/* header */

/* footer */

/* Page template A */

/* Page template B */

/* Media Queries */

Make Your CSS Readable

Writing clean sets of rules involves making the code readable. Having a readable CSS makes it much easier to maintain in the future, as you’ll be able to find each rule more quickly.

There are two ways you can make your CSS readable.

1. One line Form

.box {background: #3498db; border: 1px solid black;}

2. Standard Form

.box {
background: #2ecc71;
border: 1px solid black;
}

Separate jQuery Plugin Stylesheets

If you are using jQuery plugins, you need to put their styles into another style sheet and name it an easily remembered name such as JS-plugin.css. This will help you organize all of your CSS, in particular when you need to add or modify styles of your jQuery plugin.

Use a CSS Reset

A CSS Reset (or “Reset CSS”) is a compressed or minified set of CSS rules that resets all the styles of your HTML. Adding a reset reduces browser inconsistencies by providing general styles that can be modified and extended.

The MeyerWeb is the most popular and widely use CSS reset, although there is another option which is normalize.css by Nicolas Gallagher. It’s a modern HTML5 kind of CSS reset. You can use a CSS reset by either placing the source file link in your HTML file or copying the whole CSS reset into your style sheet.

Add CSS3 Animations Last

It is recommended to add CSS3 animations last in your style sheets to avoid any discrepancy when editing rules higher in the sheet. This will make the web browser load the important and basic CSS first before executing the animations.

Combine Elements

If elements within your style sheet share the same rules, you can simply combine all of them in one line or in a standard form instead of rewriting code over and over again.

For instance, your h1, h2, and h3 elements might all share the same font-family and color.

h1, h2, h3 {font-family: 'Lato', sans-serif; color: #dadada;}

Use Shorthand Properties

Shorthand properties allow you to set the rules of numerous CSS properties simultaneously. Using a shorthand property will shrink your CSS and increase readability.

For instance, instead of using margin-top, margin-right, margin-bottom, margin-left separately you can simply use just one line.

#div {

margin-top: 10px;

margin-right: 10px;

margin-bottom: 3px;

margint-left: 4px;

}

#div {margin: 10px 10px 3px 4px; // top, right, bottom left}

Always Use Comments

One of the best practices for writing CSS is placing a comment on each group of elements. This will give you an ease of accessibility when you are looking for a specific groups.

/* GENERAL RULE */

html,

body {

font-family: 'Lato', sans-serif;

height: 100%;

background: #ecf0f1;

overflow: hidden;

}

h1 {

color: #3498db;

text-align: center;

font-size: 35px;

margin: 100px 0px;

font-weight: 700;

}

Use CSS Preprocessors

This is is a hot topic lately. A CSS preprocessor is a scripting language that extends CSS and then compiles it into regular CSS files.

There are three primary CSS preprocessors available today, Sass, LESS, and Stylus. Using a preprocessor can help speed up your development process as it minimize the repetitive tasks such as placing hex color values, closing your tags and so on that every web designers and developers often encounters.

Compress Your CSS

Another way to write efficient CSS is to shrink the file size by using tools like CSS compressor or Minify CSS to help the browser speed up the loading time. This will remove white spaces, line breaks as well as repetitive CSS styles.

Use Hex Color Often

There are several opinions and arguments on the web when it comes to choosing between Hex color and color name values. Different browsers may be unable to define what some color names mean. Hex color values are assured of matching across a palette of 16,777,216 colors while HTML and CSS are limited to 140 colors. There are not names for all 16 million 24-bit colors, so Hex is a good choice when it comes to choosing and deciding which color variation you should use.

You can check the CSS Color Module Level 3 here for more information.

Validate

Validating CSS with the W3C free CSS Validator will help you check your code and see if there are any errors. Things like aforgotten closed bracket or missed semi-colon will be easily found by this handy tool.

Try it out!

What’s Next?

After discussing the good and bad CSS practices, it’s now time for you to apply what you’ve learned here.

A sign of maintainable HTML, CSS, and JavaScript is when web designers and developers can easily and quickly modify parts of the code without affecting other, unrelated parts.

What are your thoughts? What good and bad CSS practice can drive you off the wall? Please leave a comment below.

The post The Good & Bad CSS Practices for Beginners appeared first on Speckyboy Design Magazine.

Typically, these fonts are implemented via the Google Fonts API. Add a few code snippets to your website, call the fonts in your CSS, and call it a day. Easy, right? And the process can be even easier if you’re using a plugin or theme that lets you select fonts as you go.

But there are also compelling reasons to host Google Fonts locally on your web server. Privacy is one, as some jurisdictions have ruled that remote font hosting violates European GDPR laws.

Performance is another potential consideration. While there is some debate about local hosting vs. the Google Fonts API, the difference seems to be relatively small. The option of utilizing a content delivery network (CDN) is also a possibility.

If you’re looking to host Google Fonts locally, we’ll introduce you to an easy way to implement them. Seriously – you could be up and running within a few minutes!

First, Identify the Google Fonts You Want to Use

The first step in the process is to identify which Google Fonts you want to use in your project. Browse the official site and take note of the following:

• The font name;
• The style(s) you want to use;
• The language(s) you need;

Now, you could download your selections directly from Google Fonts. And while there’s nothing wrong with this method, it can be a bit cumbersome.

To use the fonts on your website, you’d have to also call the locally-hosted files via @font-face in your CSS. That involves looking at Google’s source code for each font, then choosing the correct character set and changing the src attribute to match where your fonts are stored.

For example, if we want to use Roboto’s “light” style, the CSS looks like this (comments added/edited for clarity):

/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}

Perhaps it’s not the worst thing in the world. But if you have several fonts, each with multiple styles, this can become very tedious.

Add Fonts Using Google Webfonts Helper

Hosting your Google Fonts locally doesn’t have to be so complex. The google-webfonts-helper is a tool that makes the process incredibly smooth. It does all of the heavy lifting for you.

Before we start, take note: there may be version differences between google-webfonts-helper and Google Fonts itself. Google Fonts are improved over time. Not using the API means not always having the latest versions.

To get started, search for the font(s) you want to use. Note that you can only work with one font at a time. The steps below will need to be repeated for each additional font.

In our case, we’ll find one of Google’s most popular fonts, Roboto, from the list.

Next, it’s time to select the character set (charset) and styles we need.

Based on our character and style selections, google-webfonts-helper generates the necessary CSS. By default, the code aims to support as many browsers as possible. However, we can also choose to focus on modern browsers as well.

It even allows us to edit the base directory where we want to store the font files. This will be instantly reflected in the CSS.

With all of our settings now applied, a .ZIP archive is available to download. We’ll unzip the archive to the chosen destination and upload it to our web server.

Finally, we’ll paste the provided @font-face code into our CSS. Making note of the font-family attribute, we can add these fonts to whichever CSS selectors we’d like.

Serving Google Fonts Locally

With a few simple steps (and an assist from google-webfonts-helper), you can forego the Google Fonts API and host fonts locally. It not only improves user privacy but also helps to avoid potential complications from API downtime or performance bottlenecks.

That being said, locally hosted fonts do mean more work for your web server. Thus, it’s still important to utilize caching and other optimizations. These factors should be considered before you take the plunge.

Regardless of how you use Google Fonts, it’s nice to know that there are multiple ways of doing so. This allows you to choose the best method for your needs. And hosting them locally may be the right way to go.

The post The Easy Way to Host Google Fonts Locally appeared first on Speckyboy Design Magazine.

Let’s explore one simple idea of how you can use WordPress custom fields to create an enhancement to the appearance of your site.

What You’ll Need

Before we start, make sure you install a copy of the Advanced Custom Fields plugin. While those proficient with PHP can create their own custom fields (or even use the more basic implementation that comes with WordPress), Advanced Custom Fields makes things a bit easier. It adds a familiar WYSIWYG interface and will even export the PHP for you under a separate Export entry in the plugin’s menu. If desired, you can then paste that code into your theme’s functions.php file. However, that isn’t completely necessary, as the custom fields you create will stay functional for as long as you keep the plugin active.

Let’s Create Some Fancy Page Titles

While there’s something to be said for simple text page titles, sometimes you might want something a little more interesting. For example, what if you wanted each page of your site to have its own page title background image, like this:

This has been designed to be a background image with a blue, semi-transparent box to hold the page’s title text. Here’s how to make it work:

Within Advanced Custom Fields

1. Create a new custom field set and give it a name such as Page Header. Take note of the field name that Advanced Custom Fields creates – page_header in this case.
2. Select Image as your Field Type.
3. Set the Return Value to Image URL. This will make it easier to display the image we upload on the front end of the site.
4. Set Rules in the Location box to Post Type is equal to Page. You may also set this to a specific page, post type or category if you wish (adjust your code accordingly).
5. In the Options box, set the position of your field to High (after title). This will ensure the custom field will be placed just below the title of your page inside WordPress.
6. Save your field.

Of course, there are a lot of other options and field types you could explore. Take a look at the Advanced Custom Fields documentation for more information.

Inside the WordPress Editor

1. After you have created your custom field, visit the page you wish to edit in the WordPress Dashboard.
2. You’ll notice that the custom field we created is now towards the top of your page, just under the title:
   
3. From there, click on the Add Image button to upload your custom image. This will be familiar to you as it’s exactly the same process as using the Add Media feature in your pages and posts.
4. Once your image is uploaded, you’ll see a preview of it. Make sure to save your page.
5. You can repeat these steps for each page on your site that you would like to use a custom page title image.

In Your WordPress Template

1. Find the page template you wish to edit in your theme/child theme. Since I’m going to add this field to every page in the site, I’m using page.php.
2. Add code similar to this in place of your current page title area (you may need to do some digging if using a pre-built theme):

In Your Theme’s Stylesheet

1. Paste the below CSS into your theme’s stylesheet:

 .custom-page-title {
 font-size:34px;
 line-height:40px;
 font-weight:normal;
 color:#FFF;
 height:150px;
 margin-top:10px;
 -moz-border-radius-topright: 75px;
 -webkit-border-top-right-radius: 75px;
 border-top-right-radius: 75px;
 -moz-border-radius-bottomright: 75px;
 -webkit-border-bottom-right-radius: 75px;
 border-bottom-right-radius: 75px;
}

 h1.custom-page-title span {
 position:absolute;
 background-image:url(images/page-title-background.png);
 width:240px;
 height:110px;
 padding:20px;
 }

Notice the use of in the style attribute of the H1 tag. This allows the custom page title images we uploaded to our pages to be used as a background image. Then, we created a box using a semi-transparent .png file which will hold the title’s text.

Of course, you can style this in any number of ways. Depending upon how you want to implement this custom field, you may also use conditional statements to create a default page title (fallback) image or even hide the field on specific pages.

So Many Possibilities

As with Custom Post Types, Custom Fields can help add some cool features to your site and even make it easier for your clients to update. Because there are so many different types of fields to use, you can customize virtually any type of content you want.

Take some time and play around with Advanced Custom Fields and see what you can create!

The post How to Use the WordPress Custom Fields Plugin appeared first on Speckyboy Design Magazine.