How can I make Gutenberg block layout switchable without lost of current content?

I’m relativ new to WordPress and Gutenberg development. Now I have a requirement where I want feature where I can switch from three different layouts. I built a Gutenberg plugin where I can switch between three templates. To switch my current block layout I use the function resetBlocks. Actually it’s fit the requirement, but the problem that occurs is, that when an editor start to write some content and switch to a different layout, all the current content is lost. …
Category: Web

Layout using Bootstrap not aligning correctly

I have been stuck at a strange layout alignment issue. I have been using Bootstrap 4 to set layout of a section. Please take a look at the screenshot below - This is here. It is working as expected. Now, check here - The exact same plugin breaking on another WordPress installation. This type of issue usually occurs due to the styling on an enclosing wrapper but couldn't find anything. I have been banging my head over it for the …
Category: Web

the_post layout

I'm getting stucked with the layout of the_post function. I would love to have two post thumbnails per row and above the thumbnails the description, title, category of the post. If I use flex property it shows to me all of those above in row. any help? Here is the code updated: HTML / PHP <?php // the query $the_query = new WP_Query(array( 'category_name' => 'first_4', 'post_status' => 'publish', 'posts_per_page' => 4, )); ?> <div class='article-container'> <?php if ($the_query->have_posts()) : …
Category: Web

Wordpress not displaying columns to hide/show on screen options

I have installed Wordpress 5.8.3 which is at the moment the latest version available. I'm trying to hide certain columns within the posts dashboard, but for some reason I doesn't have the option to do that, see: As you can see I have only the pagination options, but the columns are missing. I tried to disable all the plugins installed but same issue. I also tried to reinstall wordpress, but same. How can I fix that?
Category: Web

Change front-page layout after x amount of posts ( while in the same loop)

I'm trying to change the layout of my front-page after x amount of posts, then returning to the original layout as shown in the image below. <?php $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; $query = new WP_Query( array( 'posts_per_page' => 7, 'paged' => $paged ) ); if ( $query->have_posts() ) : ?> <div> // container 1 <div> //container 2 <?php $count = 1; while ( $query->have_posts() ) : $query->the_post(); ?> <?php echo the_post_thumbnail(); …
Category: Web

Fullscreen Page Background without Plugin

I am using the Advanced Layout builder for editing pages in the Enfold theme. I've seen many solutions via code editing or plugin additions, but I am behind a controlled environment and do not have access to FTP (access to functions.php, files, etc) nor WP plugins. The home page can be set to a fullscreen background via the Theme > Customize > Appearance , but I want to add a fullscreen background image to other pages. The only option I …
Category: Web

how to fix a codeblock group width in wordpress edit

I am new developer to wordpress, so please forgive the basic question. I have a problem with width of a column group. I have a 2 column column group. on the left side I have a slide show, and on the right, I have a pair of vertically stacked images. See below: in the edit page, this looks extremely normal. no problems. But when I go to preview, the whole thing is pushed extremely right. When looking at the CSS, …
Category: Web

Place page title in header?

Normally, in WordPress, the page title appears in the content area. I'd like to have the page title appear in the header area. It looks like to do that, I'd have to remove it from its current location in the content-page.php and place it in header.php. But content-page.php is called from page.php, which calls the content-page from within a while loop (while ( have_posts() ) : the_post(); ... ) -- so I'd have to move or copy this into the …
Category: Web

How can I recreate my HTML page with custom grid layout (blocks spanning rows and columns) in Wordpress?

I'm attempting to recreate my website on Wordpress in the style of my old HTML code, and I don't know how to recreate the grid of my old homepage here: http://selamawit.com/index-old.html The problem is that while it's a grid, the blocks span multiple rows and columns. Is there a (free) wordpress plugin I can use or is there a way to upload custom HTML code in order to recreate this layout?
Category: Web

How can I create more advanced layouts in Gutenberg block editor?

I'm looking to create a layout like the below, which is enabled by the Stackable plugin. I know exactly how I would do this if I was using CSS Grid, but because I want this to be easily drag-and-droppable by the client I'm making the site for (instead of asking them to write code), I'm looking for the best way to do it using Blocks. I don't especially think that signing up to Stackable and paying a yearly subscription, for …
Category: Web

Twenty Seventeen custom section - one column layout

I have a child theme for twenty-seventeen and am trying to get the possibility to set sections to a one-column layout while the other ones still have their two-columns layout. There seems to be an idea for a solution where a page template is created and a function is inserted into functions.php: add_filter( 'body_class', 'one_column_page_body_classes', 12 ); function one_column_page_body_classes( $classes ) { if ( is_page_template( 'template-parts/one-column-page.php' ) && in_array('page-two-column', $classes) ) { unset( $classes[array_search('page-two-column', $classes)] ); $classes[] = 'page-one-column'; } …
Category: Web

Bootstrap 4 Theme Post Layout

I am using Bootstrap 4 Theme in WordPress. I have moderate experience in customizing themes. The text in my Posts is left aligned within the row (appearing on the edge of the container or the web page itself). I would like the text to appear down the center of the web page. Can I centre-align the text using Custom CSS? Thanks When I inspect the code relating to the column, it appears as follows: .col-lg-8 { -webkit-box-flex: 0; -ms-flex: 0 …
Category: Web

What are the default breakpoints set in WordPress?

When you visit your site and click customize, you can change the layout of your website to its Tablet and Mobile counterparts. What exactly are the default breakpoints set by WordPress for Desktop, Tablet, and Mobile? If possible, can I change these default values?
Category: Web

two col layout bootstrap 4 with one fixed col and fade in effect on image

I've created a layout for my single post that have a fixed column and another that contains images that has the vertical scroll. I'm using viewportchecker to check if the images are inside the viewport to add a fade in effect using animate.css library. The problem is that it will work only for the first image. Can anyone suggest me a solution?Here is the code: <?php get_header(); ?> <div class="container-fluid" id="post-content"> <div class="row"> <?php if( have_posts() ): while( have_posts() ): …
Category: Web

Title has word broken when viewed in mobile

I am designing a website using the Renden Free theme, and my problem is that some long titles, when viewed in mobile, have words broken in half. For example: As you can see, the word "Corporal" gets broken and split in two lines. Why is this? Is there any way to control where does Wordpress split the title?
Category: Web

Alternative layout the loop

i'm trying to make an alternative loop as found here on stackexchange, it has been a great help to what i've achieved so far, but i'm stuck now. The goal is to make the newspage look like this The dev-website you can find on this address: http://puurluc.xact.be/nieuws/ Big block, three small blocks and then a big block again. However, when i have less then 5 messages on a page the whole layout gets messed up (see page 2 on link …
Category: Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.