What Are Shortcodes in WordPress?

WordPress shortcodes are special tags (short bits of code) that allow users to quickly and easily pull related bits of defined functionality into their content. You can insert them into posts, pages, or widgets, and they’ll be replaced with some sort of content when the page is rendered. Shortcodes were introduced in WordPress 2.5, and their main purpose was to provide a straightforward way to create complex HTML output in a consistent way.

If you have a plugin that creates a slideshow of images, and you want to insert that slideshow into a post. The plugin could provide a shortcode that you’d insert into your post like this:

[ slideshow id=”123″ ]

When you view the post, WordPress will replace the `[ slideshow id=”123″ ]` shortcode with the HTML that’s needed to generate the slideshow.

Shortcodes can also take parameters, allowing you to customize their behavior. For instance:

[ gallery id=”123″ size=”medium” ]

This might display a gallery of images, where “123” is the gallery ID and “medium” is the size of the images.

By default, WordPress interprets shortcodes within pages and posts. These shortcodes are small code snippets enclosed in brackets, such as [show_list]. The square braced element can take in arguments to control the output of the shortcode. Content can be wrapped in a shortcode and factored into the reformatted output. For example [show_list]The Big List[/show_list] can use “The Big List” as part of the shortcode output.

Do Shortcodes Affect WordPress’ Speed?

The effect of shortcodes on WordPress speed depends on various factors, including site caching, the source code of the shortcodes, and the number of HTTP requests. Let’s delve into the details of how shortcodes impact the speed of a WordPress website. Shortcodes themselves do not inherently slow down a WordPress website. That said, poorly coded or inefficient shortcodes can slow down a web page and delay the time-to-first byte– the initial response coming back from the web server.

WordPress Caching and How It Improves Speed

The speed impact of shortcodes varies depending on multiple factors in WordPress. When a WordPress site is properly configured with caching, shortcodes do not significantly affect the page speed. However, the performance of shortcodes also relies on their functionality and the plugins they interact with.

The speed influence of shortcodes is influenced by the page-level cache in WordPress. The front-end output of a shortcode is rendered only after the server correctly executes the shortcode calls. Consequently, shortcodes may slow down page speed if the page hasn’t been cached. However, once the page utilizing shortcodes is cached, the use of shortcodes has a minimal impact on WordPress speed.

The choice of cache plugins for WordPress also plays a role. It’s important to avoid poorly-coded cache plugins as they can potentially degrade page speed rather than improve it.

Quality of Code and Function Calls

Developers generally believe that shortcodes execute simple function calls in WordPress, which has a negligible impact on speed. However, as mentioned earlier, using poorly coded shortcodes can affect the speed of a WordPress page.

Alternatively, users can opt for manual source code integration to achieve similar performance as shortcodes. This approach requires a deeper understanding of WordPress and HTML, or one can hire developers to create custom source codes in WordPress.

Page builders in WordPress can also be used to create custom layouts. However, there is a slight difference in the speed impact between page builders and shortcodes.

How The Number of Shortcodes in a WordPress Page Affects Speed

The number of shortcodes used on a page can impact its speed performance. Having numerous shortcodes on a page can slow down the page speed in WordPress.

For beginners, using a limited number of shortcodes in WordPress content helps maintain optimal speed. For instance, utilizing Shortcodes Ultimate, one of the best WordPress plugins for shortcodes, does not significantly affect page speed unless excessive use of shortcodes is the only option.

Broader Considerations: Web Design Standards

Adhering to web design standards, it’s important to remember that adding elements to a page can potentially slow down the speed by consuming server resources and increasing function calls. Although the impact of a shortcode on speed is measured in milliseconds, the use of poorly coded shortcodes can negatively affect WordPress speed.

If achieving similar results is possible using plain HTML, it is advisable to avoid using shortcodes in WordPress pages and posts. Web browsers are better equipped to parse plain HTML, which positively influences page speed in WordPress. For example, opting to code HTML for a global layout instead of using a shortcode is a better approach.

Shortcode Plugins in WordPress

WordPress has dedicated plugins that generate output via shortcodes in pages and posts.Poorly designed plugins with inefficient source code and function calls can slow down page speed. Ideally, they need to be economical: small processing impact, or some caching method to shortcut the processing workload and make it an occasional task.

One recommended plugin for WordPress shortcodes is Shortcodes Ultimate. We used that to create and control lists. It works with templates to further format and control the output.

In Conclusion

WordPress shortcodes can enhance the performance of a website. Shortcodes are valuable tools for modifying the layout and appearance of a WordPress site. However, the impact on website speed can vary, depending on factors such as site caching, the quality of the shortcode’s source code, and the number of database calls and HTTP requests. The best practice is to limit the usage of shortcodes on any given page.  It’s crucial to use properly configured caching, and avoid poorly-coded cache plugins.

The post Shortcodes: What Are They And Do Shortcodes Slow Down A WordPress Site? appeared first on Web321: WordPress Updates and Support.

A client need to consider these things:

• Fix existing minor technical shortcomings. Some sites go on for a number of years with technical frustration. A redesign should clean house to get rid of these small issues. Through technological improvements, it should be possible to fix most lingering issues.
• Fix existing major technical shortcomings. What was impossible 10 years ago, may be easy in 2022. As the Web matures, more businesses are getting online. Even an obscure requirement can be a need shared by hundreds or  thousands of other websites. That leads to products (plugins, services) that could be easily implemented to address a major technical need.
• Make the design mobile-ready / responsive. The majority of web visits come from mobile devices. If a site is not optimized for mobile, that could put off many of your potential visitors. Factor in only designs that consider mobile and tablet users.
• Improve the site’s search engine functionality and share-ability. Many people discover websites via search engines and social media shares. A plugin like Yoast’s WordPress SEO plugin can be set-up and used to make a website easy to share and attractive when shared.
• Move away from a problematic platform. As time passes, some website building tools gain popularity. Some products diminish in popularity. Likewise, some platforms can come up short over time: too few features; too expensive, etc.. Our platform of choice is WordPress: it’s easy to use, easy to deploy, popular, and inexpensive. By contrast, we have been helping clients convert their Drupal websites to WordPress as lots of our clients which to move away from that platform.

Some features to modernize the look, feel and functionality of a website, which a web designer or developer could implement.

• Responsive Design: Ensure that the website is responsive, meaning that it adjusts well to different screen sizes. This is essential as many users access websites through mobile devices.
• Clean Layout: Use a clean and simple layout. Modern web design favors simplicity with ample white space. Focus on presenting information clearly and avoid clutter.
• Navigation: Improve navigation by using a sticky header. This means that the menu remains at the top of the screen as the user scrolls down. Also, make sure that the menu items are clear and logically structured.
• Typography: Use modern fonts and ensure that the text is readable. Stick to 2-3 font types max. Use one for headings and the other for the body text.
• Color Scheme: Opt for a contemporary color scheme that reflects the brand identity. For a fishing charter, colors like shades of blue and green might be appropriate.
• High-Quality Images: Replace any outdated or low-quality images with high-resolution pictures. Additionally, incorporating videos or a gallery to showcase the fishing experiences can be visually engaging.
• Calls to Action (CTAs): Clearly highlight the call-to-action buttons like “Book Now”, making them prominent and easily accessible.
• Contact Information: Place contact information in the header or footer and include links to social media profiles.
• Testimonials and Reviews: Add a section where clients can leave reviews or read testimonials from previous customers. This builds trust among potential clients.
• Loading Speed: Optimize the website for speed. Ensure that images and videos are optimized for web usage so that they do not slow down the loading time.
• Custom Illustrations and Icons: Introduce custom illustrations or icons that are relevant to fishing to give the website a unique look.
• Blog Section: Integrate a blog section to keep the content fresh and to establish authority in the fishing industry. This can also be beneficial for SEO.
• Integration with booking systems: If not already integrated, add an online booking system for ease of reservation.
• Security: Ensure that the website uses HTTPS for security. This is especially important if users are entering personal information or making payments.

The elements to a successful redesign project:

• Homework. Look at the current website and compare it with websites that are doing things better.
• Surveys. Solicit input from your staff and customers. Draft up a short survey to ask them some key questions about how they use the current site and what they wish the new site could do.
• Planning. Distill your input, your needs and what competing websites are doing. Develop a list and organize the features into three categories: “Needs, Nice, Nuts.”

Needs are elements that have to be part of the new design or the project is a failure. Nice elements are features that would improve things but could be prohibitively expensive. Let a developer come back with an idea of how much a “nice” feature costs. “Nuts” is just that. What a feature that seems too crazy to accomplish? Ask for that feature as an optional element. Like the nice list, if the expense is prohibitive or really problematic, drop it from the project planning.

Work with finite goals. Establish what your constraints are in terms of a launch date for the redesign, the cost of the redesign, and how much time your staff can devote to the project. When it comes to deadlines, if the release is tied to some major initiative like a product launch, build in some buffer between the launch of the website and the initiative it is linked to.

Want to talk with us about a WordPress website re-design?

The post What Should You Consider Before A Website Re-Design appeared first on Web321: WordPress Updates and Support.

In this article, we will go over how to use the su_post shortcode, including its syntax, available attributes, and some examples of how to use it.

Syntax of su_post Shortcode

To display a post using the su_post shortcode, you would use the following syntax:

[su_post id="post_ID"]

“post_ID” is the ID number of the post you want to display.

Attributes of su_post Shortcode

The su_post shortcode has a number of attributes that you can use to customize the way your posts are displayed. Here are the available attributes:

id

The “id” attribute is required for the su_post shortcode, as it specifies which post to display. To use this attribute, you need to replace “post_ID” in the basic syntax with the actual ID number of the post you want to display.

For example, if the ID number of the post you want to display is 123, you would use the following code:

[su_post id="123"]

post_type

By default, the su_post shortcode displays posts from the “post” post type. However, you can use the “post_type” attribute to display posts from other post types, such as “page” or a custom post type.

To use this attribute, simply add it to the shortcode and set its value to the post type you want to display. For example, to display a page with ID 456, you would use the following code:

[su_post id="456" post_type="page"]

class

The “class” attribute allows you to add custom CSS classes to the HTML elements generated by the shortcode. This can be useful for styling the output of the shortcode with CSS.

To use this attribute, simply add it to the shortcode and set its value to the CSS class(es) you want to use. For example, to add the class “my-custom-class” to the output of the shortcode, you would use the following code:

[su_post id="789" class="my-custom-class"]

template

The “template” attribute allows you to use a custom template file to display the post. This can be useful if you want to display posts in a specific way that is not possible with the default output of the shortcode.

To use this attribute, simply add it to the shortcode and set its value to the file path of the template you want to use. For example, to use a template file called “news-loop.php” located in your theme’s directory, you would use the following code:

[su_post id="1011" template="news-loop.php"]

<ul class="su-posts su-posts-news-loop">
<?php
// Posts are found
if (isset($args['data'])) {
$posts = $args['data'];
}
if ( $posts->have_posts() ) {
$cat_singular = array(
'blog' => 'Blog',
'case-study' => 'Case Study',
'company-update' => 'Company Update', 
'new' => 'News',
'resources' => 'Resources',
'videos' => 'Videos'
);

$cat_css = array(
'blog' => 'blog',
'case-study' => 'case-study',
'company-update' => 'company-update', 
'new' => 'news',
'resources' => 'resource',
'videos' => 'video'
);

$cat_img = array(
'blog' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png', n
'articles-whitepapers' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png',
'case-studies' => '/wp-content/themes/CustomTheme/assets/img/case_study-sm.png',
'new' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png',
'resources' => '/wp-content/themes/CustomTheme/assets/img/article-sm.png',
'videos' => '/wp-content/themes/CustomTheme/assets/img/video-sm.png'
); 


$roundout = 0;
while ( $posts->have_posts() ) {
$posts->the_post();
global $post;

$singular = 'N/A';
$css = 'na'; 
$roundout++;

$categories = get_the_category(); 
$tags = get_the_tags(); 

// print print_r($categories, TRUE);

// should be one per...
foreach ($categories as $cat) {
if (array_key_exists($cat->slug, $cat_singular)) {
$cat_slug = $cat->slug; 
$singular = $cat_singular[$cat_slug];
if (isset($cat_css[$cat_slug])) {
$css = $cat_css[$cat_slug];
} 
else {
$css = '';
}
if (isset($cat_img[$cat_slug])) {
$img = $cat_img[$cat_slug];
} 
else {
$img = '';
}

break;
}
}
// get all tags
$tag_list = "";
$comma = "";
if ($tags) {
foreach ($tags as $tag) {
$tag_list .= $comma.'<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>';
$comma = ", ";
}
} 
?>
<li id="su-post-<?php the_ID(); ?>" class="su-post <?php print $css; ?>-grid"><a href="<?php the_permalink(); ?>">
<?php if ($loop_thumb = get_the_post_thumbnail_url() ) { ?>
<div class="su-top" style="background-image: url('<?php echo $loop_thumb; ?>');">
<?php }
else {
?>
<div class="su-top" style="background-color: #888888;">
<?php } ?>
<img src="/wp-content/uploads/2023/01/blank.png" style="width: 100%; height: 25vh;" />
</div>
<div class="su-middle"> 
<h3 class="su-post-title rightarrow"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<em><?php echo $tag_list; ?></em>
<?php 
if ($excerpt = get_the_excerpt()) {
print "<p>".$excerpt."</p>"; 
print "<br/>";
}
?>
<?php print $runtime; ?>
</div> 
<div class="su-bottom">
<span class="date"><?php print get_the_date('F j, Y', get_the_ID()) ?></span>
<span class="link"><a class="rightarrow" href="<?php the_permalink(); ?>">Link</a></span>
</div>

</li>
<?php
}
}
// Posts not found
else {
?>
<li><?php _e( 'No Results', 'shortcodes-ultimate' ) ?></li>
<?php
}
?>
</ul>

The news-loop.php goes into the templates sub-directory of the site’s active theme. When the template loops through the su_posts result, the template will handle the output. In our example, the control of the output lets us add more formatting and supporting information.

The su_posts shortcode is a versatile tool that can be used in many different ways to improve the functionality and user experience of your website. Shortcodes Ultimate is a popular WordPress plugin that provides a variety of useful shortcodes for adding various elements to your website.

There are even more advanced ways to make use of the su_post shortcode. Want to know more?

The post Ultimate Lists: How To Use Shortcodes Ultimate to Build Great Lists In WordPress appeared first on Web321: WordPress Updates and Support.

Step 1: Create Your Initial Content

The first step in creating a global row is to create your content. This could be anything from a call-to-action (CTA) module to a Tabs module to a pricing table or a contact form. For the purposes of this tutorial, we’ll implement a Tabs module that will be displayed on multiple pages. We needed to repeat that information in multiple places on the website, while still keeping it consistent. The solution is to use the Divi library capacity for globalized elements that are deployed in multiple pages. One change is seen in all the places where the Divi element is deployed.

To create a new Tabs module, go to the Divi Builder and click on the green plus button to add a new module. Select the “Tabs” module from the list of available modules.

Once you’ve selected the Tabs module, you’ll be taken to the module settings page. Here, you can customize your Tabs module to your liking. You can change the title, text, button text, and button URL, among other things.

Once you’ve finished customizing your Tabs module, save the module by clicking on the green “Save & Exit” button in the bottom right-hand corner of the screen.

Step 2: Save the Tabs Module to the Divi Library

Now that you’ve created your Tabs module, the next step is to save it to the Divi library. To do this, hover over the Tabs module in the Divi Builder and click on the three vertical dots in the top right-hand corner of the module. Select “Add to Library” from the dropdown menu.

This will open the Add to Library dialog box. Here, you can give your Tabs module a name and description, as well as choose whether to save the module as a global module. Make sure the “Make Global” checkbox is selected, and then click on the green “Save to Library” button.

Step 3: Add the Global Row to Your Pages

Now that you’ve saved your Tabs module as a global module in the Divi library, you can add it to your pages. To do this, go to the page where you want to display the Tabs module and click on the purple plus button to add a new module. Select “Add From Library” from the dropdown menu.

This will open the Divi library. Here, you’ll see all of the modules and layouts you’ve saved to the library. Find the Tabs module you just created and click on the “Insert” button.

Once you’ve added the Tabs module to your page, you can customize it to your liking. However, any changes you make to the module will only be reflected on the page where the module is used.

If you want to make changes to the Tabs module that will be reflected on all pages where the module is used, you’ll need to edit the global module in the Divi library.

Step 4: Edit the Global Module in the Divi Library

To edit the global module in the Divi library, go to the Divi Builder and click on the three horizontal lines in the top left-hand corner of the screen. Select “Divi Library” from the dropdown menu.

This will take you to the Divi library, where you’ll see all of the modules and layouts you’ve saved. Find the Tabs module you want to edit and click on the “Edit” button.

This will place the Tabs module in the Divi Builder.

The post Going Global: How To Use Global Divi Regions In The Divi Library appeared first on Web321: WordPress Updates and Support.

When it comes to web design, there are many designers and packages available. Various players in the web industry have tried to differentiate themselves with new features and buzzwords – but how many of these “premium features” are actually standard? In many cases, your provider may be artificially throttling a feature they get for free, or in unlimited supply, just to turn around and sell it to you as something special.

When looking for your next website design, make sure that you are not paying a premium for the following features: 

1. WordPress Website

WordPress websites are fast, powerful, and secure – but they are built using open-source software which, on its own, is free. Web developers may use WordPress as a foundation to build great websites, but they aren’t paying anything for the tool they’re using. Granted, it does take a small amount of effort for a developer to install WordPress and connect it to a database, but that’s true of any website content management system. WordPress should be marketed as a feature – because it’s definitely one of the better platforms out there – but if a package charges you a premium for WordPress, look out!

2. Mobile-Ready

In a time where almost everything is digitally driven, 45-55% of website audiences are viewing sites using mobile devices. In fact, having a mobile-ready (“responsive”) website is more important than ever! 57% of users visiting a non-responsive website on their mobile device won’t recommend that business.   A good web designer should make every site they build responsive by default, without a premium charge. If your designer is trying to tack on extra fees for this “feature”, look elsewhere!

3. 99% Uptime 

Website uptime is the time that a website or web service is available to the users (“up”) over a given period. Optimal website uptime is 99.9%, which guarantees your website is up and running with only 43 minutes of downtime out of the 720 hours in a month. 

If your website has an uptime of 99%, out of the 720 hours in a month, your website will have a downtime of 7.2 hours per month. That difference is huge!

A 99% uptime guarantee is nothing special and falls far short of the minimum 99.9% uptime you should be looking for. If you’re being charged a premium for 99% uptime, in our opinion, you’re getting fleeced.

4. Unlimited Email Addresses 

Hearing “unlimited” always sounds like a win and mentally justifies a premium price. However, you may not know that most hosting comes with unlimited email addresses for your domain – all your web designer has to do is activate them for you. What’s actually limited is the drive space available on the server – and most providers will cap the size of each email account to prevent hitting the drive space limit. Essentially, if your web designer is charging you extra for more email addresses, they are charging you a premium for something they get for free.

To put this in perspective, imagine a pizza parlour offering you a pizza that has 20 slices. This sounds like a great deal, however, is the pizza really any bigger than if they cut the same pizza into 10 slices? Be careful you aren’t paying more money for the same thing just because there’s a more impressive number attached.

5. Unlimited Blogging 

Here’s another example of how packages use the word “unlimited” to create the illusion of a juicy deal. The space available on your server, or server farm will reach a cap at some point. However, this cap is usually very large and isn’t a problem for most businesses (unless you’re an extremely large firm such as Facebook).  

When it comes to blogging, you shouldn’t have a limit to how much you can publish. Blogging as a tool on your platform helps create viewership on your website and demonstrates your thought leadership. It gives you the opportunity to drive search traffic, generates leads, and acts as content for email newsletters. 

If you’re given a limit of how many blogs you can post on your website, your provider is artificially throttling your growth simply so they can ask you for more money. The only limit on how much you blog isn’t server space – it’s subject matter and time. (We can actually help with that, too.)

6. Unlimited Form Submissions

Forms on your website allow your future clients to contact you about purchasing your services, request quotes, or inquire about your company. Form submissions are the key to successful conversion on your website. 

Some providers are stingy with their bandwidth, and will actually throttle the number of form submissions you’re allowed – even though their capacity to handle form submissions is huge! This means that at some point, you’ll reach a limit of form submissions for a given time frame. If you want more, you’ll have to shell out extra money for this “feature”. Not cool.

7. Content Editors 

As your business grows, you’ll probably look towards hiring talent to contribute or edit the content on your website. A hidden element of some packages is artificial “limits” to how many content editors you are allowed on your website. On WordPress websites, for example, there are no practical limits to how many editors you can add to the site – unless your web developer imposes one.

When it comes to your website, you may want to limit the number of content contributors for administrative or tracking purposes, but your web provider should never impose a technical limit on this number. If they do, they’re likely looking to make an extra buck off you.

Web321 is Different

At Web321, we know you don’t have money to waste. You shouldn’t need to bribe your web design, web management or hosting company for features that should come standard. Our pricing structure is simple – $321 for everything you need, no artificial limits imposed. That means if we don’t pay for it, neither do you.

So if you want an all-in-one web design, hosting, and management experience that includes standard in every build:

• WordPress website platform
• mobile responsiveness for every screen size
• free premium plugins
• 99.9% uptime guarantee
• unlimited email addresses
• unlimited blogging
• unlimited form submissions
• unlimited content editors
• unlimited done-for-you content updates
• and a lot more…

…visit our website at https://web321.co or email us at contact@web321.co for info.

The post It’s 2023: These Are Seven “Features” That Shouldn’t Cost Extra appeared first on Web321: WordPress Updates and Support.