In the grander scheme of things, running WordPress locally offers a virtually limitless playground. It’s a completely free and private way to learn and use the content management system (CMS). You don’t need to worry about web hosting policies or restrictions, nor the potential for breaking a live site. This might just be the most stress-free way to experiment.

With that in mind, here are five great ways to use your local install.

1. Create a Staging Site

One of the most common reasons to run WordPress locally is to test a copy of an existing website. This provides a safe environment for troubleshooting, testing software updates or playing with some custom code you’ve written.

Pulling down a site and running it on your own machine is often preferable to simply making another copy online. For one, your web hosting account’s resources for storage and bandwidth aren’t affected – which is important for larger sites. Plus, you can more easily avoid accidental file or database overwrites that can leave you in a bind.

As a bonus, if you’re familiar with (or looking to learn) Git, this can be a great opportunity to test updates and the push them to your production site.

2. Learn to Code

When it comes to mastering the art of code, everyone needs to start somewhere. And WordPress provides a terrific gateway to learning PHP, CSS and JavaScript. These languages are all crucial components to themes, plugins and WordPress core itself (see the Codex for more).

Utilizing a local install lets you practice and refine your skills in a safe environment. Create a WordPress site and try building some custom post queries or even dig into how custom blocks work for the Gutenberg editor. This is a great way to expand your horizons.

3. Accelerate Theme/Plugin Development

Once you have a good grasp of coding fundamentals, a local copy of WordPress can help you level up your workflow.

The process of tweaking themes or plugins via a remote server can be a huge pain. You make changes, FTP them up to the server, then test. And the process needs to be repeated over and over again. There can be a whole lot of navigating through various folders and clearing cache as well. Tired yet?

A local environment is the perfect place to develop your next theme or plugin. Write your code, save it and refresh your browser. It saves time and also serves as a handy environment for debugging.

4. Build an Internal Productivity App

Sure, there are a ton of third-party productivity apps out there. But where’s the fun in that? With a local installation of WordPress, you can build one of your own and personalize it to fit your needs.

You might, for example, want to build an internal task management site to keep track of your to-do list. Or, if you share an office with team members, even a simple install of BuddyPress can help you stay on the same page. If you really want to go for something big, use an LMS to offer employee training.

The project can be as serious (or not) as you want. In some cases, the build process itself can be the main point. At the very least, it can serve as a great learning experience for future client projects.

5. Teach Someone to Use WordPress

While the other items on our list are about self-improvement and efficiency, our last project is solely focused on others. It’s about taking some time to help someone else learn the ins and outs of WordPress.

A local copy of the CMS can be an easy way for a friend, relative or a youngster to get a close up look at how WordPress works. They won’t have to worry about breaking anything or making a mistake online. Instead, they’ll get to click around, install plugins and practice all manner of mayhem in private. This is especially nice for parents who don’t want their little ones potentially exposed to the online world just yet.

Plus, an aspiring developer can also get a behind-the-scenes tour of how a server is set up. This can give them a solid foundational understanding that will benefit them for years to come.

Going Local

If you’re looking to learn, teach, troubleshoot or just play around, a local WordPress installation could be exactly what you need. And like WordPress itself, the barriers to entry are extremely low.

With minimal hardware and software requirements, just about any old machine you have lying around can be turned into a real, working server that runs the world’s most popular CMS. With a little elbow grease, you can be up and running in under an hour.

From there, an unending amount of possibilities await. So, what will you create?

The post 5 Cool Things You Can Do with a Local Install of WordPress appeared first on Speckyboy Design Magazine.

WordPress 6.1 has brought about one of these hidden gems: the ability to use block template parts within a classic theme.

It takes the capabilities of block themes and ports them over to their classic counterparts. Classic themes still make up the overwhelming majority of the market. Therefore, it makes sense to bring them up to speed on the latest tools.

Let’s explore what this feature does and why you might want to use it. Then, we’ll demonstrate how you can implement it on your website.

What’s a Block Template Part?

WordPress 5.9 introduced Full Site Editing capabilities. When combined with a block theme, the feature allows users to edit various templates within the back end.

Block template parts represent any area of a website you’d like to manage within the WordPress Site Editor. Examples include the site’s header and footer. But they could also include niche areas as well.

Theoretically, a block template part can be as broad or narrow as you like. This allows web designers to define only the theme elements they want to make editable. At best, this offers convenience for site owners while protecting the layout from any major mishaps.

Unlike the custom templates that have long been used in classic themes, block template parts are saved as HTML files. They also consist of block markup, rather than PHP.

Classic themes have traditionally used the WordPress Customizer to make specific areas editable. The feature works well enough but lacks the advanced capabilities of the Site Editor. Now, there’s a way for these themes to move past those limitations.

Adding a Block Template Part to a Classic Theme

Adding a block template part to a classic WordPress theme is a relatively simple 4-step process. Here’s an example of how to set things up.

Step 1: Allow Block Template Parts in Your Theme

The first step involves allowing your theme to use block template parts. This can be accomplished by adding a code snippet to your theme’s functions.php file:

Code snippet courtesy of Learn WordPress.

Note that if your theme’s functions.php file already has a function that adds theme support for other items, you’d only need to paste add_theme_support( 'block-template-parts' ); within the existing function.

Step 2: Design Your Template in the Block Editor

Next, it’s time to fire up the WordPress Block Editor. The easiest way to go about this step is to create a new page – we’ll call ours “Test Block Part”. It can be deleted once we have our block template part up and running.

Within this page, we’ve created a simple two-column layout. It includes our fictional client’s contact information and links to their social media profiles. Everything here uses standard blocks included with WordPress core.

The idea is to allow our client to make edits to this information as needed – but without having to touch the rest of the site’s layout.

Step 3: Copy and Paste Block Markup into an HTML File

Now that we have our layout built, it’s time to copy and paste the block markup into an HTML file.

There are a couple of options for copying the block markup:

1. Select the blocks you’d like to copy within the Block Editor and enter CTRL + C (or COMMAND + C on a Mac) to copy the markup, OR;
2. Enter the WordPress Code Editor for your page by clicking on the Options button within the Block Editor, then copy the relevant markup;

Next, open the code or text editing app of your choice and paste the block markup into a new file. Our markup looks like this:

Save the file as an HTML document into the /parts directory of your theme (create the folder if it doesn’t already exist). Note that you don’t need anything else in the file besides the block markup.

For our example, we’ll call our file footer-contact-info.html. Make note of the file’s name, as we’ll need it in the final step.

Step 4: Add the Block Part Template to Your Theme

Now that we have our block part template created, we’ll need to add it to a PHP template in our classic theme.

WordPress has a built-in function called block_template_part() that we can use to call our block template part into the theme. It uses the HTML file’s name (minus the “.html” extension) to locate the template. Here’s what our code looks like:

We can add this function wherever we’d like the block template part to display. In this case, we’ll add it to our footer.php template.

All that’s left is to upload our updated theme files to the server. Once that’s complete, we’ll refresh the page and find our block template part proudly displaying at the bottom of the site.

Edit Your Block Template Part Anytime

Whenever we need to make a change, our custom block template part is only a few clicks away. To find the template, visit Appearance > Template Parts, then click on the template’s name (footer-contact-info).

Edits can be made via the Block Editor – just like any WordPress page or post. Save your changes and they’ll appear on the front end of the website.

*Note: Some early implementations of this feature contained a bug that caused a block template part to be uneditable within WordPress. Adding a theme.json file to the theme temporarily fixes the issue.

Bringing Classic WordPress Themes into the Block Era

The ability to use block template parts in a classic WordPress theme is a step forward. Theme developers can stick with the power and flexibility offered by PHP-based themes while adding block template support where needed.

It’s also a way to open specific elements up to back-end editing without having to switch to a block theme. The process is easy to implement and much less labor-intensive than starting from scratch. The result is savings in both time and money.

In addition, it offers us a way to move beyond the Customizer. That feature will likely be phased out over time, so the ability to switch to block template parts helps us get a head start on migration.

Best of all, there are tons of potential use cases for this functionality. It may be just the thing you need to add a layer of convenience to your next WordPress project.

The post How to Use Block Template Parts in a Classic WordPress Theme appeared first on Speckyboy Design Magazine.

If your website has a lot of content, you’ll first want to give some thought to how it’s organized. Without proper care, pages and posts can become a jumbled mess in the dashboard. Not only does it make a particular item harder to find later on, but it’s also a pain to rearrange after the fact.

That’s why it pays to have a plan. By mapping out your needs at the start of a project, you’ll be able to store content logically. It looks professional, helps with SEO, and will likely reduce your stress levels. What’s not to like?

Today, we’ll share some tips to help you effectively organize content within WordPress. Let’s get started!

What’s a Page? What’s a Post?

A default WordPress installation supports both Pages and Posts. Each has specific use cases, and they aren’t easily interchangeable. This can trip up even experienced users. As such, it’s worth pointing out some key differences.

Pages are geared toward standalone content. For example, your website may have an About Us page that contains a biography or a Contact page that includes a form.

These items could have parent/child relationships with other pages. Thinking of our example, the Contact page might have child pages for each location of a business.

Posts are generally best for creating a collection of similar content. If your website has a blog or needs to publish news items, posts are a perfect fit.

They can also be sorted into categories and tags, which helps to organize content by a specific subject. A post can belong to multiples of each, making it easier to narrow down large volumes.

Use Custom Post Types for Niche Content

While Pages and Posts are powerful, they’re rather generic in terms of labeling. Consider having all of your eCommerce products live alongside press releases in the Posts area. While it’s technically possible, it could make managing content confusing – particularly if you’re handing the site off to a client.

That’s where custom post types and taxonomies come in handy. Functionally, they’re no different than Pages and Posts. But they allow for housing and organizing a site’s niche content in a highly-tailored way.

WooCommerce is a prime example of these features in action. Install the eCommerce plugin and you’ll see a post type for Products appear in the WordPress admin menu. In addition, they can be further organized through custom taxonomies (product categories and tags).

Using custom post types and taxonomies creates a more intuitive management experience. When every type of content has a unique name and place, it’s easier to find, edit, and add to. It’s a level of flexibility you can’t get by lumping everything into the standard content types.

Plus, optimizing for search engines becomes simpler. You can target certain content and implement structured data that accurately represent products, events, or anything else you need.

The benefits of “going custom” may lead you to eschew traditional Posts altogether.

Take Advantage of Parent/Child Relationships

As we mentioned, WordPress pages are capable of parent/child relationships. Custom post types can also do so – if configured to use them.

This creates a hierarchy that makes related content easier to locate and manage within WordPress. Likewise, it establishes consistency in your site’s URL structure – another feature to boost your SEO.

For sites with dozens (or hundreds) of pages, parent/child relationships are a lifesaver. This method organizes the Pages listing screen according to those relationships. Without them, you might be scrolling through several screens trying to find a proverbial needle in a haystack.

When should you use these relationships? A good rule of thumb is to group pages that have something in common.

One method involves mimicking your site’s menu structure. If you have multilevel menus, for instance, you can arrange parent/child relationships that reflect this setup.

In practice, it means that the About Us page could serve as the parent for each subpage in that navigation tab. With that, both the listing and URLs follow a pattern. For example:

• About Us (parent – /about-us/)
• -Mission Statement (child – /about-us/mission-statement/)
• -Leadership (child – /about-us/leadership/)
• -Staff (child – /about-us/staff/)

By organizing your content identically on both the front and back ends, you’re simplifying the experience and making future edits a breeze.

Keep Your WordPress Content Neat and Tidy

While it’s easy enough to create content with WordPress, keeping things organized isn’t so obvious. And a bit of carelessness here can lead to a lot of frustration down the line.

Thankfully, WordPress offers features that can help you keep things neat and tidy. Standard Pages and Posts, along with custom post types and parent/child relationships allow you to organize content in any way you choose.

The key is to plan ahead. That requires careful thought to determine what content your site will feature and how to best organize it.

Doing it right requires a bit of work. However, it’s well worth the effort. The reward is a website where everything has its place.

The post How to Effectively Organize Content within WordPress 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.

Thus, there are no apples-to-apples site moves. It’s more like apples-to-oranges, with a few pears and peaches thrown in to make it interesting.

If you’re preparing to migrate your site to WordPress, there can be several obstacles to navigate. And the core software is just the beginning. The larger and more specialized your site is, the more involved the move will be. For example, a plugin such as WooCommerce requires plenty of attention when importing eCommerce data.

Because every website is unique, there’s no singular way to migrate to WordPress from another CMS. There are some best practices when it comes to preparation and execution, however. And that’s our focus for today.

Let’s explore some tips for making your migration to WordPress as smooth as possible.

Assess Your Data Export Options

The first step is to assess your options for exporting data from your current CMS. Some apps make it fairly simple to export content as a CSV or XML file. Others may require a third-party tool to do so.

Depending on the types of data and how much there is, there could be several methods available. In general, you might find more options with an open-source CMS than with a proprietary one. But it can vary greatly from one system to another.

It’s also important to find out what data is exportable. Blog posts or page content could be readily available. However, specialty items such as membership data, eCommerce products/sales, and events may require a separate tool – or may not be available to export at all.

In addition, don’t expect themes or other design elements to easily travel along to WordPress. While certain aspects such as CSS and images can be copied, the overall template structure will need to be rebuilt. This scenario isn’t so bad if you’re planning to do a full redesign – but it can be a pain otherwise.

Once you understand the available options, you can formulate a plan for the “big move.”

Match Up Your Exported Data with WordPress

Hopefully, you’ll now have some or all of your current website’s data on hand. Now it’s time to determine the best way for importing it into WordPress.

WordPress has some recommendations for importing content from other platforms. If there’s a tool available for your specific CMS, that makes the process quite a bit easier. You might not have to worry about details like the column headers of a CSV file. The tool does all (or most) of the dirty work for you.

Outside of that, there are several generalized import/export plugins for WordPress. They may require you to conduct some cleanup of your data. As such, importing can be a trial-and-error process. Sometimes it takes a few tries before you get things imported correctly.

Part of the challenge involves getting data into the right tables and columns of the WordPress database. Some plugins provide a UI to visually map out where things go. Still, others may require you to use the correct naming conventions within a file.

Individual values may also have formatting requirements. Date formats are a prime example. But other spots could mean some reconfiguring of your export.

Getting Your Import Just Right

Depending on your existing site’s setup, multiple imports may be needed – and run in a specific order. For a typical eCommerce site, there could be imports for:

• General content (pages, blog posts, etc.);
• Products;
• Customer accounts;
• Past orders;

Logically speaking, the products and customer accounts should be imported before the store’s past orders. Experimentation is often required to figure out how to make everything work. WordPress data can be difficult to wrangle, and imports are no exception.

It’s a great learning opportunity. That is after you’ve pulled your hair out amid a data nightmare. But the knowledge you’ll gain can come in handy down the road.

Test Your Work

How will you know if your import works as expected? The answer is in performing relevant tests. That will fill you in on which data migrated perfectly, as well as any potential problems.

The types of tests you conduct will depend on the data. WordPress user profiles can be viewed in the back end, as can page and post content. It’s a good way to ensure that the basics are in order.

But it’s possible to go a step further. For instance, User Switching is a plugin that allows you to see your website from a specific user’s vantage point. It’s a great tool for testing eCommerce and membership sites.

Perhaps the biggest benefit of testing is that you’re more likely to catch errors before the site is made public. It will save you some embarrassment and user complaints.

Move Your Website to WordPress with Fewer Headaches

Migrating your website to WordPress may seem intimidating. And there is the potential for things to go poorly. But preparation is your best defense.

By studying both the export and import processes, you’ll have a better understanding of what needs to be done. You can then find tools to help you move data from point A to point B.

And if there are some hiccups along the way – not to worry. Website migrations may have multiple stages or require you to start over from scratch. It’s not always pretty.

But don’t let that scare you away. Do your best to plan and deal with any issues as they come along. It will be that much sweeter when your new WordPress website is up and running.

The post Tips for Migrating Your Website to WordPress 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’s all well and good. Sometimes, though, we seem to forget about those who haven’t used WordPress before but want to see what all the fuss is about.

If you’re new to WordPress, consider yourself no longer ignored! Let’s go over some of the basics of WordPress, installation types, and some tips for using it.

While we’re at it, I’m going to throw a lot of different terms at you. If you’d like to learn more about these terms and what they mean, visit the Introduction to WordPress Terminology.

What Exactly is WordPress?

WordPress is a completely free, open-source software platform referred to as a content management system. Essentially, it allows you to easily manage all parts of your website, including:

• Adding, removing, or editing content.
• Uploading multimedia files like photos, PDFs, Microsoft Word documents, spreadsheets, videos, and audio.
• Changing the look of your website through WordPress Themes.
• Adding new functionality to your website through Plugins.

Your site’s text content and settings are all saved into a MySQL database. Everything else is saved as a file on the web server.

Different Flavors

There are two different types (or flavors) of WordPress websites:

1. Self Hosted – Often referred to as “.org,” this is the downloadable version of WordPress and the main focus of our guide. It requires that you have some space on a web server (and access to create a database) to install the software. The good news is that just about every web hosting company out there have accounts that can run a WordPress website. You are then free to edit or augment the software to fit your needs.
2. WordPress.com – All websites created through WordPress.com are hosted by WordPress. You can get a site for free, and there are some paid services available as well. The software is a bit more locked down for free sites, restricting you to the use of only specific themes and plugins.

How to Install WordPress

The self-hosted flavor of WordPress is famous for its “5 Minute Install” (the link has full step-by-step install instructions). In order to install WordPress this way, you’ll need the following:

• A fresh copy of WordPress, which you should unzip into a desired folder on your computer.
• A MySQL Database (you should be able to create one through your host’s control panel).
• A text editor to update the wp-config.php file with connection details of your database.
• An FTP client (FileZilla is a nice, free option).

Once the database is created, and the files are uploaded, just point your web browser to the URL of your install. Choose a language, fill in your login details, and your installation will be complete.

And depending on which web host you use, there may be a faster option. Automated installs are widely available through different hosting companies. You’ll be able to install a copy of WordPress by filling in a few details of your site and clicking a button. That will save you the trouble of creating a database and uploading files via FTP.

You’ll be able to login to your WordPress installation by visiting your site’s admin URL: http://www.yoursite.com/wp-admin/

The WordPress Dashboard

The WordPress Dashboard is where all of the magic happens. If you’re logged in as an administrator, you’ll have access to content creation, media management, and have the ability to install themes and plugins. Just use the handy menu on the left to get around.

About Themes

WordPress comes with a few versions of its default themes, but you aren’t obligated to use them. Inside WordPress, just go to Appearance > Themes in the WordPress Dashboard menu and click on the Add New button to see the many free themes that are available. There are free themes available for creating online shops, creative portfolios, small business sites, and many more niches. Of course, there are also a whole lot of commercially available themes available elsewhere on the web.

Themes that take advantage of the WordPress Customizer will let you tweak settings such as fonts, colors and background images and show you a live preview as you make changes. More robust themes can have dozens of settings for you to play with.

Regarding Plugins

As with themes, WordPress has many free and commercial plugins available. They can extend the functionality of your website. There are plugins for virtually every type of need. For example, there are plugins to help you sell products online, create interactive photo galleries and sliders, create forms, share content on social media, etc.

To get started, just visit Plugins > Add New from the WordPress Dashboard to start exploring what’s available. Just remember that not every plugin is a high-quality one. Look for plugins that have good ratings and that are widely used. The Plugin Directory offers usage numbers and user reviews for each plugin.

Pages and Posts

The two main types of content you’ll create with WordPress are Pages and Posts. Sometimes, users can get a bit confused about the differences between them.

• Pages are generally thought of as static content. Think of an “About Us” page on a website. It might include some text about the site’s owner and a few photos. Essentially, a page stands on its own within a website.
• Posts are best suited for things like blog posts or press releases. It’s a way to keep a running archive of something. You can even use different categories and tags to break things down further down to a particular subject.

Other Features To Note

The world of WordPress is pretty vast. There’s no way to cover everything it has to offer (have you ever browsed the WordPress Codex?). That said, here are a few other features you might want to know about.

• You’ll add and edit content by using the Visual Editor.
• The Media Library lets you upload and access your media files. You can also directly Insert Media to a page or post.
• Site navigation is controlled through drag-and-drop Navigation Menus(or the Customizer).
• WordPress Widgets is a great way to add useful information to your site.
• There are Android and iOs Mobile Apps that allow you to update your site on the go.
• JetPack is a free plugin that has features for security, added functionality, statistics, and more.

Keep Exploring

Now that you know the basics of WordPress, don’t be shy about continuing to learn more about it. Over time, you’ll find some favorite plugins or a theme that works just the way you want it to.

If you need some guidance, there is a fantastic worldwide community of users who are glad to share their knowledge. One of the best ways to learn directly from the pros is to visit a WordCamp. They’re inexpensive, you’ll get some swag, and you’ll also get the chance to meet some smart WordPress people.

I hope this has been a helpful introduction to using WordPress. Have any questions or suggestions? Feel free to leave them in the comments!

The post What Exactly is WordPress? 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.

Among the most powerful features of the editor is block patterns. These readymade layouts can be relatively simple or highly complex. Either way, they make quick work of what used to be a labor-intensive task.

With just a couple of clicks, you can spice up any page of your website. Want to add a stunning hero area? How about a multi-column card UI? Block patterns can make it a nearly-instant reality. All you need to do is add content.

Even better is that the WordPress Block Pattern Directory provides a massive library of options. Patterns exist for just about every niche and are relatively simple to use. And new selections are being added all the time.

If this sounds like something that can supercharge your workflow, read on. We’ll take you on a tour of the Block Pattern Directory and show you how to take advantage of it.

Navigating the Block Pattern Directory

To get started, visit the Block Pattern Directory over on WordPress.org (look for that “Patterns” link in the navigation bar). You’ll be greeted by an index page that displays the latest patterns.

If you find something that immediately grabs your attention, feel free to click on it to learn more. Otherwise, you’ll notice that patterns have been broken down into several categories (buttons, columns, galleries, etc.). Click on a category or use the keyword search to narrow down your options.

See something you like and want to come back to it later? If you have an account on WordPress.org, you’ll have the ability to add patterns to your favorites list. Click on the heart icon to add a pattern to your collection.

Favorites are also organized by category – making it easy to locate a particular item as your list grows.

Previewing a Pattern

While it’s possible to simply copy a pattern from the directory index (more on that in a bit), clicking through to a pattern’s profile page is well worth the effort.

The profile offers a closer look at what you’re getting. That includes the ability to preview how the pattern works at various breakpoints via a dropdown menu. It’s great for seeing how the pattern adapts to a mobile screen, for example.

It’s valuable information to have, as you’ll want to ensure that the pattern fits your needs for all devices. Note that the core WordPress blocks are responsive right out of the box. Still, the details matter.

Adding a Block Pattern to Your Website

Now comes the magical part! The block editor is all about empowering custom design in a code-free manner. And this philosophy extends to the Block Pattern Directory.

Once you’re ready to add a block pattern to your website, click the “Copy Pattern” button. This will save the pattern’s code to your device’s clipboard. The directory profile page will even verify that the pattern has been successfully copied.

Similarly, it’s possible to copy a pattern from the directory index or your favorites collection. Hover over the pattern’s thumbnail image and click the “Copy” button. You should then see a “Copied” message, letting you know that the process was a success.

Now that the pattern has been copied, it’s time to head over to your WordPress website. Log in to the dashboard and navigate to the page or post where you want to add the pattern.

To add the pattern to your site, paste it into the block editor. Use the CTRL+V (Windows)/Command+V (macOS) keyboard shortcut or choose Edit > Paste from your browser’s toolbar.

The pattern should now be displayed on your page, and you are free to edit it however you like.

The Power of Block Patterns

The right block pattern can turn your content into a compelling visual experience. And you don’t need any special skills or large amounts of time to use them. Find one you like, copy and paste. That’s all there is to it.

Of course, some WordPress themes come packed with block patterns – and you can also create your own. But there’s no need to reinvent the wheel. If a pattern already exists in the directory, it makes perfect sense to take advantage of this convenient resource.

The fact that patterns are easy to customize means that you can put your unique spin on them. Experiment and tweak patterns until they match your brand.

We hope you enjoyed this overview of the WordPress Block Pattern Directory. Now it’s the time to explore and create!

The post Exploring the WordPress Block Pattern Directory appeared first on Speckyboy Design Magazine.

Thus, building websites with WordPress usually means adding at least some custom code along the way. Whether that’s creating a one-off page template or placing a navigation menu in just the right place, there are plenty of opportunities for enhancement.

However, developers may not need to fire up that code editor quite as often these days. Slowly but surely, the Gutenberg block editor is changing how we go about website customization. The result is an increasingly code-free experience.

The following is a look at some scenarios where blocks can replace custom coding and speed up the development process.

Content Layouts

One of Gutenberg’s key features is the ability to create advanced content layouts. Perhaps more than anything else, it’s what differentiates the block editor from the word processor-like experience of the Classic Editor.

Sure, it was theoretically possible to create a layout in the Classic Editor. But it required some custom HTML, CSS, and accepting the possibility of that code being wiped out by an unsuspecting client. Short of that, you’d need to build a custom theme template or use a page builder plugin.

These days, you can achieve just about any type of layout with a default installation of WordPress. For example, the Columns block allows creators to set up a multicolumn layout in just a few clicks. You can even choose a content width if you like.

If you’re looking for something a bit more complex, block patterns are a huge time-saver. These pre-defined layouts can turn any page into a more engaging visual experience. Even better is that they require very little effort to implement.

WordPress Post Queries

The ability to list posts without code has been a part of WordPress core for years via the Recent Posts widget. But there were a couple of significant limitations.

Previously, it was only possible to display the widget within the defined sidebar locations of your theme. In addition, there weren’t a lot of options for configuring which posts are displayed or how they look.

To accomplish something more advanced required writing a custom WordPress post query into a theme template. From there, CSS and HTML would be necessary for crafting the desired layout. The process can take a good bit of time.

Enter the Query Loop block. It allows you to place a post listing virtually anywhere you’d like with the ability to filter by various criteria.

The look and layout can also be tweaked directly within the editor. Choose the number of posts to display, a vertical or columned layout, and whether to show extras like featured images and excerpts.

Theme Templates

The days of hacking through various theme templates may be over. That is if your theme is compatible with Full Site Editing (FSE).

Instead of poring over PHP and HTML, the feature allows for customizing theme templates directly via the block editor. The look of your site’s header, footer, pages, post archives, and single posts are all fair game.

While there is some inherent danger (think of a client who decides to get “creative” and trashes your carefully-crafted layout), it also makes edits a breeze. Changing the contents of a template or even adding functionality becomes a visual experience.

Plus, any and all blocks are available to use in your templates. That includes niceties such as site navigation, search bars, and login forms.

Assorted Design Elements

The Classic Editor has never been a good fit for design elements. If you want a post to consist of more than text and images, a plugin or theme-specific functionality is needed. And that experience is usually clunky.

Shortcodes, for instance, have often been used as the cure-all. They work well enough on the front end but aren’t representative of the element at all within the editor itself.

Thankfully, blocks leave all of the hacks behind. They provide an easy way to add and customize a plethora of design elements. And if something’s not included in WordPress core, you can always add third-party blocks to your site.

Elements such as buttons, tables, and customizable embedded content are all available from the get-go. And, when used in conjunction with the theme.json file, default styling will match your theme.

Build WordPress Websites Using Less Code

Before the block editor, it was easy for theme developers to go down a rabbit hole when trying to implement any of the above items. And, depending on your approach, the solutions could become problematic down the road.

What Gutenberg provides is a native solution that doesn’t require any custom code. By enabling a point-and-click, drag-and-drop UI, a lot of precious time can be saved. Potentially hours of it, which can then be focused on more complex tasks.

And, even if you build your own custom blocks, that initial time investment can pay off in the future. Since blocks can be used anywhere, whatever you build can be recycled again and again.

Custom code will continue to be a critical part of building with WordPress. But the CMS is now capable of handling some common needs for us. That’s a welcome development.

The post Scenarios Where the WordPress Gutenberg Block Editor Replaces Custom Code appeared first on Speckyboy Design Magazine.