I started learning CSS Grid at the end of last year. The more I learn about it, the more exciting it is. CSS Grid makes it very easy to achieve complicated layouts with very minimal CSS. I redid my blog page using CSS Grid a couple of weeks ago and it went much faster than I expected.
Last week, I was working on re-designing the admin page for the Chamber Dashboard business directory plugin and I wanted to do a responsive layout. I needed a sidebar and a right column which in turn needed to have two columns. So, I used nested grids for the layout and it was super simple to get it 100% responsive.
In the right column, there are multiple divs which are also displayed in a grid. Here is the CSS for the right column:
.inner_wrapper{
display:grid;
}
I needed the sidebar to take up 1/4th of the width and the right column to take up 3/4ths of the width when the screen width is above 700px. The divs in the right column should in turn be 2/3rds (left div) and 1/3rd (right div). Here is the code that does that.
The div’s 1 & 2 are divided into two columns each, but the 3rd div should again be one column. So, I added a class one_col to the 3rd div. The CSS below makes sure that the 3rd column would stretch the entire width:
CSS Grid is a very easy way of defining page layouts in two dimensions. I designed my site almost an year and half ago using Bootstrap. I have been planning to re-do the entire site using CSS grid, but it has been very difficult to set aside time to work on my site. So, finally this past weekend, I spent some time to re-do my blog page template using CSS grid. It was much easier than I expected.
Why do I want to change from the bootstrap (most popular) framework to CSS grid? CSS grid is a much simpler way of achieving the same layout. It also gives you more flexibility with responsive sites. Here is a very nice article that explains this difference between Bootstrap and CSS Grid – https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163
So, coming back to my blog page, I wanted a full width responsive page with 3 posts across without a sidebar. You can see the responsive grid layout here.
Here is the code to display my posts in a grid:
<section class="blog_posts">
<?php if ( have_posts() ) :
// Start the loop.
while ( have_posts() ) : the_post();
?>
<article class="single_post">
<div class="featured_image">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array( 'class' => 'bck_img' ) );
}
?>
</div>
<div class="title">
<h2 class="page-title blog screen-reader-text"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
</article><!--end of single_post-->
<?php
// End the loop.
endwhile;
endif;
?>
</section><!--end of blog_posts-->
<?php posts_nav_link(); ?>
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); -> this makes the grid responsive. I have included a few links at the bottom of the post that explains responsive css grids.
Here is the entire blog page template.
<?php
//Template: Blog Page
?>
<?php get_header(); ?>
<div class="container">
<section class="blog_posts">
<?php if ( have_posts() ) :
// Start the loop.
while ( have_posts() ) : the_post();
?>
<article class="single_post">
<div class="featured_image">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array( 'class' => 'bck_img' ) );
}
?>
</div>
<div class="title">
<h2 class="page-title blog screen-reader-text"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
</article><!--end of single_post-->
<?php
// End the loop.
endwhile;
endif;
?>
</section><!--end of blog_posts-->
<?php posts_nav_link(); ?>
</div><!--end of container-->
<?php get_footer(); ?>
When we think about websites, the first things that come to mind are the ease of use, design and performance of the website. Most of us choose WordPress because it is easy to use and the ease with which you can add additional functionality using plugins. But, one thing that is easily overlooked is the site maintenance. Without regular website maintenance, the performance of the site suffers. So, it is very important to allocate some time/budget for site maintenance. Continue reading “WordPress Site Maintenance”
Gutenberg is the new WordPress editor project named after Johannes Gutenberg. It is more than an editor replacement. Gutenberg is the new way of managing content on WordPress. There are mixed reactions on whether this is good or bad. My initial response was not a good one. When I first tried Gutenberg, I was not happy. I lost the familiar editor, lost my meta boxes and a bunch of other stuff that I am used to seeing on the post or page editor. I tried the chamber dashboard plugins with Gutenberg and half the stuff did not show up. I was shocked to say the least. What is going to happen to our plugin users when Gutenberg goes live and all these meta boxes disappear? Continue reading “All you need to know about Gutenberg”
WordPress 4.9 was released last week with many new improvements. One of the new features is the ability to add a gallery in the widgets which is a very cool feature. Multiple images can be added at once and the images can be displayed in one or more columns along with the ability to select the size and order of images. This is useful if you want to display flyers for upcoming events or showcase sponsors, award winners etc.
But, the gallery widget also comes with its own limitations like not being able to create a slideshow with the gallery images. Making the gallery images into a slideshow allows you to add more images and not worry about losing space on the sidebar.
The gallery images can be converted into a slideshow/rotating images by adding some simple CSS and JavaScript code. Even if you are not a person who likes to code, don’t worry. This is very easy and simple.
First create your gallery.
Go to Appearance -> Widgets.
Drag the gallery widget onto the sidebar. Let’s give it a title of ‘Our Sponsors’
Then click on ‘Add Images’ and select the images you would like to add to the gallery.
Once you select the images, you can organize them in the order you would like.
Change the gallery settings if you wish. I set the ‘Link to’ field as none as I do not want to link the image. You can either link it to the attachment page or the media file.
Change the number of columns based on how you would like to place your images. Since I selected 4 images in my gallery, I set the columns to 2 so that the images will show up in a nice square. Of course, if we are making the gallery into a slideshow, set the columns to 1.
If you select the random order, every time you load your page, the order of the images will change.
You can also select the size of the images.
Click on ‘Insert Gallery’ to add the images to the widget.
Gallery Edit Screen
Click on the ‘Save’ button to display the gallery on your sidebar.
This is how the gallery will look on the front end.
Now it is time to add some code to make the gallery widget into a slideshow. We will be adding some custom CSS and JavaScript code. There are a number of ways to add custom CSS and JS to your WordPress site. You can either use a plugin or add it to your child theme.
Since we can add any number of gallery widgets per page or per sidebar, we need to choose exactly which gallery widget we want to convert to the slideshow. For example, I have two gallery widgets in my sidebar, but I only want the first one as a slideshow. So, I will use the widget id to target that particular gallery. Here are a couple of ways to find out the widget id:
One of the biggest questions I always get asked is about choosing WordPress themes. I come across many beginners who are new to WordPress and are learning their way through everything – themes, plugins, child themes etc. This post is about how to find a theme that works for you.
There are many themes both free and paid and choosing one theme that gives you everything you need for your site from a sea of themes sounds practically impossible. Add to that all the new features that get added to themes every day, it feels like it is a huge task to get the theme that’ll work for you.
I will walk you through the process of choosing a theme. Yes, it is a process. You don’t have to spend lot’s of hours on it, but a couple of hours spent will give you a good enough theme to start with.
Before you get all excited and open your browser to do some theme searching, you need to do your homework. Here is a list of things you need to have before you start searching for themes.
Write down your priorities
What is your website about? – Why is this important? Because not every website can have the same set of colors or organization. The layout of the website will depend a lot on the type of site and the intended audience for your site.
Do you already have a logo? If yes, do you want to choose the website colors that are close to your logo?
Do you want a slide show on your home page?
Is this a blogging site? e-commerce site? A regular website with static pages?
What do you want to display on your home page – blog posts? Products? Images? Videos?
Do you know HTML and CSS?
Can you write a little bit of HTML and CSS?
Can you create a child theme?
Are you familiar with FTP to add/remove stuff to your site?
Are you familiar with shortcodes?
If you can write a bit of code, you will be able to make a few modifications to the theme as needed. If not, you will either need to find a theme that works for you out of the box or find a developer to help you customize the theme you choose.
Download the WP themes checklist which is a handy guide while you are searching for your new theme! Make notes as you look at different themes and reference it back when you are comparing themes.
Finding a theme on wordpress.org
There are a number of websites where you can find a theme for your WordPress website. I am going to focus on getting a theme from wordpress.org. WordPress.org has free themes which have gone through a rigorous review before getting up on the site for download.
One thing to remember is that you should not be looking for the entire functionality to come from the themes. Themes are most useful for the layout of the content and colors of the website. Not functionality. Some themes do come with certain functionalities and that is good. But, try to use plugins to add functionality to your site. That way, if you end up changing your theme, your plugins will still work.
One advice I will give is to choose a responsive theme. Mobiles and tablets are being used more and more to view websites. So, choosing a good responsive theme saves you hours trying to make the site look good on the different devices.
Head over to https://wordpress.org/themes/ to find a list of beautiful themes. The featured themes are shown by default. You can look under popular or the latest themes. You can also use the super cool Feature Filter. This has a nice set of features you can select. This is where your earlier homework comes in handy. To use the feature filter to your advantage, you need to know some of the important things you want for your site.
Once you have a list of themes, there are a few more things we could look for. You can click on the theme for more information about it. What exact information are we looking for?
Last updated date: One of the first things you want to check is when this theme was last updated. You would generally want to select a theme which has been updated recently. Why? Because, WordPress releases updates on a regular basis to fix many bugs. If the themes are not updated regularly, they might have security issues or they might not work well with the current WordPress version.
Next thing to pay attention is the number of active installs. This is number of sites that are currently using this theme.
You can check the ratings and reviews of the theme. But, I would advise you to not put too much weight on these. Looking at the number of ratings for each star does not tell you much. If you click on the bar for each of the rating, it will give you a detailed list of the reviews. You can actually read what people had to say about the theme. I usually read the one star ratings. They will tell you if there are any things to look for. That said not all one star ratings are bad. Users might have given it a 1 star because it lacked a few features that they wanted. Not necessarily a bad thing. You might or might not need those features.
The next thing you can look at is the support forum for the theme. This will tell you if the support tickets are being answered quickly. This is also a place you can go to if you run into problems while you are setting up that theme. So, make sure that the theme has a good support forum.
One other thing to keep in mind is about how old the theme is. Old themes have more users and many bugs have been discovered and fixed. So, there is a higher possibility of you finding a solution if you have any issues with the theme. But, if the theme is not being updated as and when WordPress is updated, then you are bound to run into issues which will be difficult to fix.
If a theme is new, you probably would not have issues with compatibility, but also there are not many users for the theme yet. So, you might run into issues which might not have a solution yet. If you are looking for something specific, I would go into the support forums and see what issues the theme has and if and how that will affect you.
If you really like the theme and do not find any reviews or ratings on the wordpress.org site, I would do a quick Google search to see if you can find something about the theme.
Installing the theme and setting it up
So, you have now found the theme that you want to use. The next step would be to go into your WordPress dashboard -> Appearance -> Themes and search for the theme you just found. All the themes found in wordpress.org can be found in your dashboard under appearance-> themes. Find that theme and preview it. It will show your site content with the theme so that you’ll have an idea of how your live site would look. Bear in mind though, you have not entirely set up your theme. So, it might not look that great in the preview but, it will still give you a general idea.
You can then install the theme and play around with it. Most of the themes will usually come with documentation you can follow as you set up your website.
One of the best ways to test a theme would be to install it and try to set it up. Sometimes you will need to try a few themes before you settle down with the theme you like. But, also you might never find the perfect theme you are looking for. I would suggest launch your site with a nice theme (even though it is not exactly like how you want it) and keep working on it to make modifications as needed. Sometimes the functionality you are looking for can be achieved by using a simple plugin.
What if you cannot find a theme that suits your site
If, after searching through the entire WordPress.org, you do not find anything you like? You can quickly do a Google Search and you will find many websites with WordPress themes – both free and premium. I have used many of those themes myself and most of them are fine. All the rules above still apply. Make sure you know what you are getting for that price. I would still recommend using a free theme especially if you are beginner and get adjusted to the WP Dashboard. Once you are more comfortable and ready to explore, you can purchase a theme.
The other option would be to hire a web designer and developer to help you build a custom design and code a custom WordPress theme.
Get tips and tutorials on using the new block editor, WordPress themes and plugins!
When I am coding the web pages, I frequently run into problems with CSS rendering properly on Internet Explorer. So, the first place I go to for a solution is my best friend Google. Over the time, I have collected some CSS tips from the many forums and other websites and I save them for a quick reference. Here are some of them.
Margins in IE:
Margins are rendered differently in FF and IE – especially IE6. To correct the double margin showed by IE6 add the following:
