Choosing the Right WordPress Post Grid Plugin A responsive layout ensures that your WordPress post grid looks great and functions properly on all devices, including smartphones, tablets, and desktop computers. With the increasing use of mobile devices, it is essential that your website adapts to different screen sizes and resolutions. Why is a Responsive Layout Important?Ī responsive layout is crucial for any website in 2024. It allows you to showcase your content in an organized and visually appealing way, making it easier for your visitors to navigate and find the information they are looking for. We will use the CSS file we created in the previous part to do that.By Asim Akhtar (CEO) Ultimate WordPress Post Grid: Guide for Responsive Layout 2024 What is a WordPress Post Grid?Ī WordPress post grid is a layout that displays your blog posts or custom post types in a grid format on your website. We need to add some CSS to display it the right way (i.e. You can find it if you know where to search, but it’s not really what we want. We have a problem here: the button we created is near to be invisible. In the example above for instance, the preview will get the class preview-tablet-landscape. With this entry, WordPress will generate the corresponding button, with the right JavaScript callback: when the button is hit, the website preview will automatically take the right CSS class. You can choose this view as the default one if you want to, by adding the key default set to true (but don’t forget to disable the current default view as we saw above). Then, to create a new view, add your own entry, as below. As we saw above, WordPress will list all the entries in the $devices array as buttons. To do that, let’s return in our callback function called by the filter customize_previewable_devices. For example, if you want to disable the tablet view, use the following line of code in the function called by the filter: If you want to disable a view, you have to remove the corresponding entry. Chances are great that you don’t need to change their values. They are used by screen readers for example. The label entries are not displayed on the screen, not even in a title attribute. The first entry having the default key set to true will be the default view (even if there are other entries that have this key set to true). Once WordPress applied the customize_previewable_devices filter, it will list the views following this array. It’s an associative array listing the views. To manage the devices we need to know what is contained in the variable $devices. That’s why you can’t ignore this responsive view. However, this view will be preferred by your users, as it’s more comfortable to navigate with the Theme Customizer. As a developer, you’ll want to use your browser’s tools also to test the responsiveness of your theme, as they are more complete than the Theme Customizer’s responsive view. If you’re developing a theme, either for you or for sharing it (or both!), you have to make it responsive. ![]() ![]() If you enable the smartphone view, a user visiting your website will continue to see it in full size! Choosing the Views to Show They are just a way to preview what your website looks like on smaller devices. Let’s be clear, in case you’re wondering, these buttons won’t resize your website itself. ![]() The website’s preview will then be resized, without needing to do anything more. To enable a view, you have to click on the corresponding button. Several formats are available: by default we find the desktop view, the tablet view (in portrait mode) and the smartphone view (also in portrait mode). You can then test changes, faster and easier. ![]() The advantage of using the Theme Customizer’s responsive view is that only the website’s preview is resized: the only thing which is resized is the only thing you want to test. If you want to test on very small devices like a smartphone, it’s not really practical. However, there’s an issue when you’re using the Theme Customizer: the sidebar (the customizer itself) will also be resized. It’s more or less what happens when you resize your browser’s window, or when you use your browser’s own responsive view.Ĭhanging the window’s size (or the viewport’s size in the case of the browser’s responsive view) is enough to see what your website looks like on a smaller devices. That means you won’t break anything just because you needed to test on a mobile device.īasically, the only thing the responsive view will do is reduce the frame where you view your website. It’s really useful, as you can test on a smaller device changes you make in your theme with the Theme Customizer, without having to save them first.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |