theming – CSS problems styling the search box block created by Search API Pages module

I’m using Search API and Search API Pages on Drupal 9 and I’m trying to style the Search API Pages search block. The problem is that when placed anywhere but bottom in the sidebar, the search block overlaps with the block below as seen in the attached pics. This makes the blocks visually too close and also (in Firefox) disables the overlapped part of the search box from being clicked in, which is really annoying. Any suggestions for resolving this?

The other issue I’m having is that the fontawesome search icon only appears within the search box in Firefox. In Chrome and Safari the icon is placed at the top left of the page, relative to the body instead of to the search block. What am I missing here?

Overlap between search block and block below

Another view of the overlap

.search-api-page-block-form-search input {
  width: 100%;
.search-api-page-block-form-search .form-item {
  width: 70%;
  float: left;
.search-api-page-block-form-search .form-actions {
  width: 30%;
  float: right;
.search-api-page-block-form-search .form-type-search input {
  border-right: none !important;
  text-indent: 25px;
  background-color: transparent;
  position: relative;
.search-api-page-block-form-search .form-type-search:before {
  content: "f002";
  font-family: FontAwesome;
  position: absolute;
  top: 25px;
  left: 35px;
  background-color: transparent;
.search-api-page-block-form-search .form-item,
.search-api-page-block-form-search .form-actions {
  margin: 5px auto!important;
  display: inline-block;
  font-family: Consolas, "courier new";
.search-api-page-block-form-search .form-actions input {
  font-family: FontAwesome;
  margin: 0 !important;

I don’t know whether I’m allowed to provide a link but you can see the problem here:
Before downvoting this please note that I’m not a coder. I’m trying my best but I’m making this up as I go along.


How to change setup URL of pages to end with /

Depending on the web server the browser will usually open index.html, default.html, et cetera when you go to a page that ends with a ‘/’.

That is in an environment that is NOT using a rewriter. Once you get into rewritten URLs, you can make no assumptions about the naming conventions on the site and the pages that power them.

And I would guess that rewritten URLs are probably the default at this point on sites that you are looking at.

On your own Linux server the default would be as you described, an index.html file in the named directory. But you can enable rewriting and change the beavior.

Admin Description editor on Custom pages will not accept rel=”***” calls.

Admin Description editor on Custom pages will not accept rel=”***” calls.

<img class=”youtube” rel=”123456789″ src=”poster.jpg”>

The moment I close the editor, rel=”123456789″ gets removed.

Note: this is only happening in custom pages. On category descriptions it works just fine..
I haven’t checked product pages yet, I’ll update when I cross that bridge.


PS, I’ve experienced other bugs with the editor in general, like the Formats tab / heading text sizes 1 & 2 swapped. Getting two different results by clicking a particular action first time & a second time.

I’d love to see a Bootstrap based admin editor in the future.
The existing is AWESOME but, can’t use the table system do to it’s not responsive.
Just an idea…..:)


Modern page’s banner images is raising this error on IE "Object doesn’t support property or method ‘trunc’"

we have a modern page which have a banner image, this is working on chrome, firefox but on IE-11 users are reporting this error:-

Object doesn't support property or method 'trunc'

enter image description here

Is there a way to fix this?

wp query – How to create author.php with the help of wordpress pages feature

I need to create author posts archive with the help of WordPress pages feature. That’s why I created a page with the slug “author”. Now when I want to enter author page , it forward me to this page not to author.php. My problem is that I can get all author posts when I use author.php instead of WordPress pages feature But I can’t get author posts when I use wordpress pages feature. I mean main query does not work in this page.

But both urls are the same

when I use auhtor.php :      (main query works )
when I use wordpress pages : (main query does not work)

enter image description here

pagination – Set noindex page-comment from Pages 2, 3 and More?

I use All in one seo pack plugin.

I see that Google indexed page comments (that are a pages generated from paginated comments).

The example url are the followings:

  1. URL canonical –
  2. URL comment page –

The problem is that ‘URL comment page’ has itself as canonical, and not the main page.

I’d like to set as noindex all comment-page for all postes. Is it possible?

I see that AIO SEO has aioseo_filter_robots_meta, but I do not understand how to filter it for comment-page.

I have the following code, but it is only for singular:

add_filter( 'aioseo_robots_meta', 'aioseo_filter_robots_meta' );

function aioseo_filter_robots_meta( $attributes ) {
    if ( is_singular() ) {
       $attributes('noindex')  = 'noindex';
       $attributes('nofollow') = 'nofollow';
    return $attributes;

There is a way to add meta tag robots noindex only for all comment-page?

Add SEO meta data with PHP to pages generated by plugin? Pages are not generated as posts in WP

I am using a real estate IDX plugin (Showacse IDX) that generates pages that are not posts in my wordpress database. The poorly developed plugin does not give some of these pages meta descriptions. How can I use PHP to inject meta data into these pages?

I’ve tried getting the current page url slug but it isn’t working…

// Add SEO meta to sidx pages 
function td_add_seo_meta_sidx() {
    global $wp;
    $current_slug = add_query_arg( array(), $wp->request );

    // Page slugs that need SEO meta
    $dashboard = "properties/dashboard";
    $listings = "properties/listings";
    $searches = "properties/searches";
    if ($current_slug == $dashboard ){
        echo '<meta name="description" content="Dashboard SEO meta description here" />';
    if ($current_slug == $listings){
        echo '<meta name="description" content="Listings SEO meta description here" />';
    if ($current_slug == $searches){
        echo '<meta name="description" content="Searches SEO meta description here" />';
add_action( 'wp_head', 'td_add_seo_meta_sidx' );

404 error – Xampp 7.3.3 fresh install of WordPress 404 pages unless permalink is set to plain

I have been running xampp 7.3.3 for quite a while but i have recently installed 2 fresh installs of wordpress and if the permalinks are set to anything other than plain the pages are showing 404.

i have turned off all plugins and changed themes but the issue still happens

The home page will work ok
I have tried resaving permalinks
I have checked the Apache modules

Has anyone had this issue?

I am going to install a new version of xampp to see if it still happens.

Any advice appreciated

url rewriting – 404 error- issues with pages after adding custom rules for posts

I am trying to create a custom translation for my website.

Quick Story:

I am facing “404 error-Page Not Found’ issues with pages after adding custom rules in functions.php

$newrules('^th/(.*)$') = 'index.php?name=$matches(1)';
$newrules('^se/(.*)$') = 'index.php?name=$matches(1)';

with the above code, posts with /th/ slug are working perfectly fine but my pages with /th/page-name-1 … throwing 404 error-Page Not Found

So here is the complete story:

First I created a parent page “Home Thai”
and under that parent page “Home Thai”, I added the rest of the Thai language pages, so results coming like this

Now I want to set up Thai Post URL with slug (/th), and to make this, I added the below new rules in functions.php

$newrules('^th/(.*)$') = 'index.php?name=$matches(1)';
$newrules('^se/(.*)$') = 'index.php?name=$matches(1)';

with the above code, posts are working perfectly with language slug (/th/, /se/). bit my pages with /th/page-name-1 … throwing 404 error-Page Not Found


//Create a function to register a new language translation taxonomy

function nk_add_translation_taxonomy(){
    global $post;
    //set the name of the taxonomy
    $taxonomy = 'nk-post-translation';
    //set the types for the taxonomy
    $object_type = array('post');

    //populate our array of names for our taxonomy
    $labels = array(
        'name'               => 'Post Translation',
        'singular_name'      => 'Post Translation',
        'search_items'       => 'Search Translation',
        'all_items'          => 'All Translation',
        'parent_item'        => 'Parent Translation',
        'parent_item_colon'  => 'Parent Translation:',
        'update_item'        => 'Update Translation',
        'edit_item'          => 'Edit Translation',
        'add_new_item'       => 'Add New Translation', 
        'new_item_name'      => 'New Translation',
        'menu_name'          => 'Post Translation',
    //define arguments to be used 
    $args = array(
        'labels'            => $labels,
        'hierarchical'      => true,
        'show_ui'           => true,
        'how_in_nav_menus'  => true,
        'public'            => false,
        'show_admin_column' => true,
        'query_var'         => true,
        'rewrite'           => array('slug' => 'post-translation')
    //call the register_taxonomy function
    register_taxonomy($taxonomy, $object_type, $args); 

add_filter( 'post_link', 'custom_permalink', 10, 3 ); 
add_filter( 'rewrite_rules_array','customLangaugeSlugRules');
add_filter( 'init','flushRules'); 

// creating of post permalink from taxnonmy slug
function custom_permalink( $permalink, $post, $leavename ) {
    $category = get_the_terms($post->ID,"nk-post-translation"); 

    if (  !empty($category) && $category(0)->slug == "th" )
      $permalink = trailingslashit( home_url('th/' . $post->post_name ) );
    elseif (  !empty($category) && $category(0)->slug == "se" )
      $permalink = trailingslashit( home_url('se/' . $post->post_name ) );
      $permalink = trailingslashit( home_url( $post->post_name ) ); 
    return $permalink;

// using because of its flush the exixsting rules of taxnonmy slug rules
function flushRules(){
  global $wp_rewrite;

// inserting new rules of taxnonmy slug
function customLangaugeSlugRules($rules)
    $newrules = array();

    $newrules('^se/(.*)$') = 'index.php?name=$matches(1)';
    $newrules('^th/(.*)$') = 'index.php?name=$matches(1)';

    return $newrules + $rules;

layout – How is this UI called (multiple pages with settings, dots on bottom marks progress, usually after install of app)

On mobile phone when I install some app it shows few pages with basic settings, at the bottom are dots indicating progress, sometimes back/next button. How is this thing called? I want to find and try existing css solutions, but I can’t find it because I don’t know proper name.

First page

|     Welcome     |
|                 |
|                 |
| Lorem ipsum...  |
|                 |
|                 |
|      o---  Next |

Second page

|      Email      |
|                 |
|                 |
| [@            ] |
|                 |
|                 |
| Back oo--  Next |

Third page:

|  News settings  |
|                 |
| [x] foo         |
| [ ] bar         |
|                 |
|                 |
| Back ooo-  Next |

Last page

|  All done       |
|                 |
| Blah bla        |
|                 |
|                 |
|                 |
| Back oooo Finish|