Tag: Big Media Theme

Adding a Section Block to Your WordPress Page

Posted on by Bob Wilson

Adding a section block to your WordPress page is a great way to make content stand out. It can also break up the monotony of a page and make the page easier to read. Section blocks look best on pages with wide screens (as opposed to blog pages with sidebars like the page that you’re reading right now).

Pick the Right Theme

You should pick a theme that provides options to create a layout that is good for expressing a section block. Some themes give you very little control over blocks. Other themes give so much control over blocks that the process of building them becomes confusing and tedious

The Big Media theme tries to strike a balance in block control. The Big Media theme is a free theme and you can download it directly from your WordPress admin center by selecting Appearance > Themes > Add New. Then type “Big Media” into the search box.

This is Just a Demo

This blog post will provide a demonstration of how to add a new section to a website designed to promote an arcade, but you can use the techniques that you learn and apply it to all kinds of content. All you will need to create this section are images and text. If you don’t have any images, then I recommend the following resources:

This a demo of a section block for a website used to promote an arcade. It is set near the bottom of the page. When you are done reading this blog, you will know how to build a section just like it.

Adding a Section Block to Your WordPress Page

This section demo contains a typing feature. You can click on the image to see the page in action.

Picking a Color Scheme Before Adding a Section Block to Your WordPress Page

One of the simplest and most effective ways to make your new section stand out is to update the colors of the background and fonts. I recently wrote an article on how to build foundational colors and fonts for your website. This tutorial will extend upon that lesson by teaching you how to update the inner parts of the page.

When you are deciding what colors to choose, it is often a good idea to pick colors that you are already using and set them as inverse values. For example, if you are currently using yellow for your links and black for your foreground color, you can make the background color of your new section yellow and the text color of your new section black.

Determining Layout and Content Before Adding a Section Block to Your WordPress Page

Before you actually build your new section, you should consider how the layout and font will look. You can do this by looking at the example images above. I could write a whole article on how to set different section layouts, but for now, it’s probably a good idea to use something like the above sample because it is a good way to condense content that could serve a variety of different purposes.

Resizing Images

You can try to rely on WordPress to resize your images for you, but if you are using multiple images, it is usually a good idea to use image compression software.

GIMP is free software that you can use to amplify compression and convert file types.

GIMP is a beast and is not the most user friendly. It is a full service image editor that has capabilities that extend well beyond what you will probably need for WordPress. However, if you are just using it to compress your images, then it isn’t that difficult to use. Just follow these instructions:

  1. In Gimp, go to File > Open, then choose the file you want to open. Gimp can be slow.
  2. Go to Image > Scale Image. Then reduce the width to 900 for images inside media and text blocks and 600 for images inside columns.
  3. Go to File > Export As
  4. If the file type reads .png then delete the .png and replace it with .jpg. You may also want to rename the file.
  5. Click export, then lower the image quality to 50 percent or whatever value you think is best. You can check the box that reads “Show preview in image window”, and it will tell you what the file size will be.
  6. Click Export.

Creating a Group Block Foundation

You will use the block editor. You should start by adding a group block, then set the background color to the color that you want.

A group block with a yellow background with a media and text block at the top.

Adding Inner Blocks

Next add more blocks inside the group block. The top block in the example group block is a media and text block. With each section of text that you add, you will want to select the new text color.

The best way to make sure that your text color comes out right is to update each block of text.

Adding More Group Blocks

Adding inner group blocks makes it easier to update inner sections in the future. Next, add another group block below the media and text block.

Adding More Inner Blocks

Finally, since you are using the Big Media you can add ten blocks at once. Type “bb” into the block search then select “Information Columns Triple”.

Without the Big Media theme, you will have to manually set a three column block then add three blocks inside each block.

Finally, add the Information Columns into the inner group block.

That’s it. You’re done.

Do You Have Questions About Adding a Section Block to Your WordPress Page?

If you have any questions, then feel free to post them in the comments below.

Adding Sticky Sidebars to Your WordPress Site

Posted on by Bob Wilson

Adding sticky sidebars to your WordPress site is an outstanding way to improve your website’s navigation. Big websites can become confusing to search through. But when you combine a well developed sticky sidebar with a well developed sticky navbar, you can create a website that links every page on your site to every other page on your site.

Assumptions

This post assumes that you are familiar with WordPress and WordPress themes and that you know how to set up a website. It also assumes that you are familiar with widgets and menus.

Uses for a Sticky Sidebar

There are three primary ways that a sticky sidebar can be utilized:

  1. Listing Blog Posts for a Blog: The most common place that a sticky sidebar is used is on a blog or news site for the purpose of featuring posts.
  2. A Table of Contents for a Large Page: Another great use for a sticky sidebar is a table of contents used to define sections of your page.
  3. Extending Your Navigation Bar: Your users’ computer screens can only provide so much space. You can use the sidebar to add links that you can’t fit into your navbar.

Pick the Right Theme for Adding Sticky Sidebars to Your WordPress Site

You can get everything that you need for adding sticky sidebars to your WordPress site by downloading the Big Media theme. Just go to your WordPress admin center Appearance > Themes > Add New, then type “Big Media” into the search bar.

The reason that the Big Media theme is the ideal theme is that it not only has everything that you need to set up sticky sidebar navigation, it also has all of the complementary navigation necessary such as a sticky navbar, a back to top button, and mobile compatibility.

Adding a Sticky Sidebar with a List of Blog Posts

A classic use case for a sticky sidebar is to use it as a way to display a list of posts for your blog. To accomplish this, all you have to do is go to the customizer of the Big Media theme (from the admin center go to Appearance > Customize), then go to “Sidebar and Footer Blocks”, then go to “Post (Blog) Sidebar 1” and add a Heading block, then go to “Post (Blog) Sidebar 2” and add a latest posts block. By using two sidebars stacked on top of each other, it will cause the heading to stay in a relative position while the latest posts block will continue to stick as you scroll down screen.

Adding a Sticky Sidebar with a Table of Contents

You may have read my previous post about how to build a table of contents without a plugin. This is still an effective way to add a table of contents, but the Big Media theme offers you an even simpler way. You can still follow the old instructions to set all of your page’s anchors; but with the Big Media theme, instead of using a custom html block and additional CSS, you can add your menu as a regular menu through the menu controls in the admin center or the customizer, then you can use the menu controls in the customizer to add your table of contents to your pages, then you can turn off its use on any pages that you don’t want it featured by selecting “no sidebar” in the block editor by selecting the settings gear then select the page tab then select “no sidebar” from the template dropdown. You can also use the “No Sidebar for Static Pages” control in the Layout section of the customizer to turn off the menu on every page but the homepage.

Adding a Sticky Sidebar by Extending the Navigation Menu

If you have a very large navigation menu, then it also isn’t a bad idea to extend your menu into the sidebar so that it doesn’t get squashed on small screens. What you do is create two menus. The first menu is all of the links that go into your navbar. The second menu is for all of the links that go into your sidebar. Once you have done this, go to the menu section of the customizer (or the admin center) and assign the navbar menu to the navbar and the sidebar menu to both of the sidebars. Note that when you do this with the Big Media theme, your navigation menu gets moved into the slide panel for mobile viewports, and the sidebar portion of your extended menu is moved directly under the main navigation menu.

Got Questions About Adding Sticky Sidebars to Your WordPress Site?

If you have any questions, then feel free to post them in the comments below.

Updating Colors and Fonts on Your WordPress Site

Posted on by Bob Wilson

After content, colors and fonts have the highest impact on the look of your website. But you have probably noticed that updating your colors and fonts on your WordPress site is not as intuitive as you would like it to be. However, when you find the right tools, updating your colors and fonts on your WordPress site isn’t that difficult. The hardest part is finding the tools. This tutorial will show you how to obtain all of the tools you need to update your colors and fonts, and it will show you the most efficient way to update your colors and fonts once you have found those tools.

Picking the Right Theme

Not every theme makes updating colors and fonts on your WordPress site possible. And using plugins to update colors and fonts is usually convoluted.

Your theme is the thing that has the highest impact on how your colors and fonts are set. The whole reason that themes were created was to create a foundational mechanism for determining how your site looks. This is the reason that your theme ought to be the thing that determines your font and colors.

Most themes give you little control over your colors and fonts. But a few themes will give you a wide spectrum of choices. One such theme is the Big Media theme. The Big Media theme is a free theme and you can download it directly from your WordPress admin center by selecting Appearance > Themes > Add New. Then type “Big Media” into the search box.

Screenshot of the Big Media Customizer

Picking Your Page Layout Style and Foundational Content

Now that you have a great theme, you need to consider your layout and content before updating colors and fonts on your WordPress site.

You should ask yourself if you want your site to be page driven, blog driven, or a combination of both. In other words, do you want to build your site with pages, posts, or both? If your site is blog driven or blog supported, then I would suggest considering a background image, especially if you are using the Big Media theme. You can add a background image in the “Background Media” section of the customizer.

If you are using the Big Media theme and you like the blog look, but you don’t actually want to have all of the blog features that go with it, then you can go into the Layout section of the Customizer and switch the “Big Pages” control to off. When you do this, it will create more background space for a background image when you build your WordPress site with pages.

If you’re sure you don’t want a background image and you are using the Big Media theme, then you should also consider a homepage header image. You can add this in the “Homepage Header Media” section of the customizer.

The Best Way to add a Background Image or a Header Image

Don’t worry about whether your image is appropriate to the theme’s default colors and fonts. Just focus on finding an image that you think looks great and facilitates your site’s message. You’ll be able to manipulate your theme to fit your content later.

If you want your image to be a background image, then it will need a lot of versatility. A great background image is an image where you only need to see a little bit of the image for it to be valuable. If you have an image that you like that doesn’t work well as a background image, then consider using it as a homepage header image.

If you want to add a homepage header image, then you should make sure that the image looks good on any screen dimension. Try setting the “Big Header Image” control in the “Homepage Header Media” section to both on and off and see how it looks on different screen sizes.

If you don’t have your own image that serves this purpose, then you can get tons of great images using the following links:

You probably want to load the original copy of your image onto your WordPress site to see how it looks. If you have trouble loading your image, then you can use GIMP to compress its size:

Images can crush your loading time. WordPress has features that automatically reduce the size of your images, but sometimes they don’t work, and even when they do, the image byte size can be larger than necessary.

Background images need to have a larger than average file size, but I have found that you can keep them looking good at pretty small sizes. I find that I can keep a background image looking good at an average size of 500KB and an average width of 2560px.

GIMP is free software that you can use to amplify compression and convert file types.

GIMP is a beast and is not the most user friendly. It is a full service image editor that has capabilities that extend well beyond what you will probably need for WordPress. However, if you are just using it to compress your images, then it isn’t that difficult to use. Just follow these instructions:

  1. In Gimp, go to File > Open, then choose the file you want to open. Gimp can be slow.
  2. Go to Image > Scale Image. Then reduce the width to 2560. You may be able to reduce this even further if you set the “Big Header Image” control to off in the “Homepage Header Media” section of the customizer.
  3. Go to File > Export As
  4. If the file type reads .png then delete the .png and replace it with .jpg. You may also want to rename the file.
  5. Click export, then lower the image quality to 50 percent or whatever value you think is best. You can check the box that reads “Show preview in image window”, and it will tell you what the file size will be.
  6. Click Export.

Picking Your Colors

If you are using the Big Media theme, then you can update your colors in the colors section of the customizer.

Colors should be defined by content. This is why it is best to choose foundational media before you choose your colors, then use the media as a basis for color selection.

Basic colors can be a great choice. The best way to start the color experimentation process is by selecting from the eight basic color squares. If you don’t like the default look, then a good second foundation is to try a black foreground with white text. Black foregrounds also tend to do a better job of revealing images when you reduce foreground opacity.

If you decide to experiment beyond the eight basic colors, then keep in mind that some colors look different on mobile, so you’ll want to test for that by viewing your site on mobile technology.

Don’t pick more colors than you need. The Big Media theme has a lot of color options, but that doesn’t mean that you can’t use the same color more than once.

Pick Your Fonts

If you are using the Big Media theme, then you can add fonts in the Typography section of the customizer.

Colors can affect how your fonts look, so you want to make sure that you pick your colors first.

Try lots of fonts. The Big Media theme gives you access to the entire Google fonts library, so be patient and keep trying fonts until you get exactly what is right for you. But keep in mind that it’s okay to just use one or two fonts. Some fonts look good by themselves, but they don’t always look good juxtaposed against other good looking fonts.

You may also notice that some fonts fit better than others, so you may have to update menu font sizes. You can do this with the “Menu Size” control in the Navigation section of the customizer.

You may find that your default fonts don’t always look ideal in every place that they have been set. But you can use the Additional CSS section of the customizer to refine font selection. For example, this theme added the following update:

.entry-meta,
.entry-footer,
.nav-links,
.comment-metadata,
.reply{
	font-family: "IBM Plex Mono";
}

You can figure out which class names that you would want to update using this tutorial.

Got Questions About Updating Colors and Fonts on Your WordPress Site?

If you have any questions then feel free to post them below.

Using Caching to Get a Faster WordPress Page Load From a Shared Server

Posted on by Bob Wilson

Caching with a shared server can be complicated, but it is worth the effort. Shared servers suck because they’re slow, but they’re also cheap, so we use them anyway. When you first launched your site, it may have been small, and it didn’t do very much, and nobody was looking at it. And if the site’s foundation was simple HTML (not PHP), then it probably loaded pretty quickly, even if it was running on a shared server. But if your site got more popular and complicated, then you may have noticed your pages started loading slower and slower.

If this is your situation, then you’ve reached a line of demarcation, where you have to change how you manage your site. You may be able to resolve the problem by switching to a cloud server or a dedicated server. However, this will likely cost you money, and it will probably be complicated. However, you can also upgrade your caching which has varying degrees of complexity, but it’s something that you can do for free.

The Easiest Way to Read this Article

There is no TL;DR for this article. It’s long and so is following all of its instructions. It’s probably not realistic for you to deal with all of this in one sitting. But if you try to learn and implement a little at a time, then you may be able to substantially improve the performance of your website. So bookmark this page, and block off some regular time each week to pick your way through it.

This Article is Primarily About WordPress

Although the principles discussed in this article can be applied to any website, in order to implement all of the instruments discussed in this article, you will need to be running a WordPress website.

How Much Do You Need to Depend on Your Host Server?

This article assumes that a shared server is appropriate for your website. If you are using a shared server, then you should not be running a site that requires frequent content updates. For example, running an e-commerce site on a shared server is a bad idea. Any site that requires frequent updates from the host, especially partial page updates, needs a higher quality server. However, if your site is viewed from a static state, and requires infrequent updates, and doesn’t get too much traffic, then a shared server should be fine.

Things that Cause a Slow Page Load Time

Web page speed is complicated. And it’s easy to blame the wrong culprit. Here are four of the biggest causes of slow page speed:

  1. Size of the files being downloaded to the browser.
  2. Server processing time.
  3. Physical distance of the page caller from the host.
  4. Unnecessarily redundant page calls.

Dealing with File Size: Pick a WordPress Theme with Fast Loading Potential

There’s no such thing as an inherently fast WordPress theme. Any theme that claims that it is inherently faster because it is lightweight by virtue of total byte size is misleading you. While it is true that a theme with a lower total byte size allows for a greater margin of error while still producing a relatively fast page load time, it is not true that a theme with a larger total byte size is inherently slower. On the contrary, if the theme is used properly, it could load even faster than the theme with the smaller total byte size because the individual pages being loaded are smaller. And themes with relatively larger byte sizes often have more features. And poorly implemented low byte sized themes will still load badly. However, this is not meant to imply that byte size bloat in themes should not be a concern.

Having said all that, it can be quite difficult to determine what WordPress themes have a fast loading potential, especially if you can not make a quick assessment based on file size. At the risk of performing a shameless plug, I can tell you that all of my Big Series Themes can load pretty fast when implemented properly, and this article will tell you almost everything you need to know about proper implementation. If you are not sure which theme to pick, then I recommend my Big Media theme. All of the themes are free. And you can download them directly from your WordPress admin center. If you have any questions about any of these themes, then feel free to post them to my forum.

Other File Size Considerations Before Caching with a Shared Server

The size of every file that you load to a person’s browser impacts the loading speed. You need to pay attention to the file size of everything that you add to your site from plugins to images. You want to keep every file you have as small possible when it loads to your user’s browser (as opposed to when it is running in your admin center).

Slow Server Processing Time: Caching is the Primary Remedy for a Slow Shared Server

If you are trying to load your site from a shared server, then you are trying to load it at a disadvantage because you have to compete for processing power with the other people that you are sharing a server with. The key to overcoming a slow loading shared server is caching. There are three places that you can capitalize on caching:

The Three Caching Points when Caching with a Shared Server

This tutorial will teach you how to manage the three major caching points:

  1. Your host’s server’s local cache.
  2. The cache of your content delivery network.
  3. The cache in your user’s browser.

Don’t Cache the Same Cache Type when Caching with a Shared Server

You might be tempted to believe that if one cache speeds up your site, then two will make it even faster. After all, isn’t this tutorial trying to teach you how to set up three different caches? That’s true, but that doesn’t mean that there is an advantage to redundant caching. The thing you need to realize is sometimes your cache will be empty. So you will have to route the request all the way to the origin.

Suppose you have two caches and both of them are empty. If they are both of the same cache type, then if one is empty, the other is probably empty too. So if someone makes a call for one of your webpages, then you have increased the amount of time that it takes for your site to load because it takes longer for the page call to reach the origin because you are requiring the call to check two caches instead of one. Also, if one of your caches only has some of the files that are necessary, then the other cache will also probably have the same files, and once again the call will create unnecessary file read time. The bottom line is you only want to use one product for your local cache, and one product for your CDN, and you want to set only one set of rules for your user’s browser’s cache rules.

Reduce Your Server Processing Time: Caching Your PHP

Server speed matters, and shared servers are slow. I don’t want to be misleading about that. But even if you have a slow server, if you can give it less to process when a user makes a call for one of your pages, then you can improve its speed. One of the simplest and most important caching steps that you can take is caching your PHP pages on your host server. There are a number of plugins that provide local caching. Some of them are good. Some of them are bad. And a lot of them are complicated. So I’m going to try to help you find an effective path that isn’t too complicated.

UPDATE (October 2023): PHP Caching and the Latest Versions of WordPress and PHP

The speed of PHP and WordPress has improved quite a bit since this article was originally published, and using page caching to support it has become a thing of of more questionable efficacy.

Dealing with the Endurance Cache when Caching with a Shared Server

If you are using a shared server, then there is a good chance that you have had the endurance cache imposed upon you. I’ve used it in the past, but I no longer recommend it. Its documentation is nearly nonexistent and its performance is inconsistent. Fortunately, turning it off so that you can use a different local cache plugin is pretty easy. Just go to your admin page and click on where it says “caching” at the top of the page, then select “cache settings” from the dropdown. Scroll down to the bottom of the page and set the Cache Level dropdown to “Off (Level 0)”.

Next, you’ll want a local PHP page cache that works well and is easy to install. I recommend Surge. All you have to do is go to Plugins > “Add new”. Then type “Surge” into the search field, then install it, then activate it. That’s it. You don’t have to do anything else. Pretty nice, huh? I’ve been using Surge for awhile, and every performance measure I can think of seems to show that it’s working well.

Reduce the Physical Distance of the Page Call: Caching to a CDN

A CDN is a content delivery network. A CDN moves copies of your site all over the world so that it is physically closer to whomever is asking for it. This places less demand on your host server, and requires less time for a call to move the requested files because the distance is shorter, thus making it reach the caller’s computer faster.

CDN Options: Jetpack versus Cloudflare

Jetpack is a huge WordPress plugin series that has all kinds of features, including those that improve page load speed. Cloudflare is primarily a content delivery network that is all about helping your pages load faster.

Jetpack is easy to install, and Cloudflare can be a bit tricky, but Cloudflare is substantially more effective.

If you want to try out Jetpack, it’s pretty easy to try. Hypothetically, Cloudflare is compatible with Jetpack, but my experience is the two don’t seem to play well together. Even when I have turned off the features of Jetpack that are redundant to Cloudflare, I still find that there are problems with Jetpack. In particular, I find that there are problems when I update Jetpack. Since I don’t really get much out of Jetpack when I’m using Cloudflare, and I’m sick of troubleshooting, I’ve decided to remove Jetpack from all of my sites. I’m not saying that you necessarily need to do that for your site. But you need to take responsibility for your choice.

Setting Up Cloudflare when Caching with a Shared Server

Okay. This is where we separate the big kids from the little kids. Unfortunately, the instructions that you need to set up Cloudflare will vary depending on which webhost you use, so you’re going to have to look up your instructions on your own. All I can do is give you a little general advice: Measure twice and cut once. If you make a mistake, it can mess up your site, so be careful. It’s time to see how DIY you really are. Hopefully, I’ll see you on the other side.

The Other Side: Controlling CDN Cache Time

Did you make it? Did you set up Cloudflare? Are you reading this before you even tried? You shouldn’t be. The rest of this tutorial will be useless to you until you’ve set up Cloudflare. Don’t be a wimp. You can do it. If you mess up, then try again.

Okay. Did you really actually honestly set up Cloudflare? Well then, great job! I’m proud of you.

Next, you’re going to want to maximize the amount of time that your files spend in the Cloudflare CDN cache. Cloudflare has a thing known as page rules. These rules can be used for all kinds of purposes. But you’re going to need to use one in particular to encourage Cloudflare to keep your files in its CDN cache for as long as possible. In the Cloudflare admin, select your domain then find the page rules section and enter the following rule (obviously, you should update for your own domain):

UPDATE (5/31/24): Cloudflare page rules are deprecated. You should use cache rules instead.

Caching with a Shared Server

Avoid Unnecessary Page Calls: Controlling Browser Cache Length

UPDATE (5/31/24): Since this post was originally published, Cloudflare has created cache rules. They are a better way to manage browser caching.

Did you know that you can tell a browser how long you want it to cache your site? It’s true. And they will usually do what you tell them to. But to be clear, they don’t have to, especially if their users tell them not to. But most of the time that doesn’t happen, so it works out. All you have to do is select your domain then go to Caching > Configuration, and make the following selection:

Caching with a Shared Server

Caching HTML to a CDN when Caching with a Shared Server

UPDATE (5/31/24): The Super Page Cache for Cloudflare plugin still works. But it has become more complicated to use, since the deprecation of page rules. And the improvement of performance of PHP and WordPress has made its performance far more trivial in value.

Cloudflare doesn’t cache your html But there’s a free plugin called Super Page Cache for Cloudflare. If you follow the instructions, you should find that it isn’t too difficult to set up if you already know how to set up Cloudflare. The thing that you need to understand is that when you load the plugin, you need to use at least one of your page rules, and the number of page rules that you have available will limit how many WordPress sites you can add to a domain. The plugin will add your new site page rules for you. But you will probably need to reset your Edge Cache TTL when you set it up (and sometimes when you update the plugin), and you will have to make sure that your new page rules are in the proper order as follows:

Caching with a Shared Server

Make sure “Cache Everything” rules are at the top. If you don’t put the page rules in the proper order, then the HTML will not cache properly.

Browser Caching when using Super Page Cache for Cloudflare

If you decide to add the super page cache plugin, then you will want to go back to the Browser Cache TTL referenced above and set it to “Respect Existing Headers”. Then go into the Super Page Cache admin panel, then select the Cache tab, then go all the way to the bottom of the page and set the “Add browser caching rules for static assets” switch to yes.

Conclusion

Hopefully, you’ve enjoyed your DIY caching experience. And if you didn’t, hopefully you’re at least enjoying the results. But even if you have merely improved, and you still think your site should be faster, think of how fast your site will be once you can take everything that you have just learned to a higher quality server.

Image Attribution