Tag: adding

I add a widget area to a wordpress theme but the style is somehow not matching with html
here is the image
before adding widget

after adding widget

functions.php

<?php
//Adding the css and js files
function gt_setup(){
    wp_enqueue_style('google-fonts','https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab');
    wp_enqueue_style('font-awesome','https://use.fontawesome.com/releases/v5.1.0/css/all.css');
    wp_enqueue_style('style',get_stylesheet_uri());
    // wp_enqueue_script($handle,$src,$deps,$ver,$in_footer);
    wp_enqueue_script('main',get_theme_file_uri('/js/main.js'),NULL,'1.0',true);
}
add_action('wp_enqueue_scripts','gt_setup');

//Adding theme support

function gt_init(){
    add_theme_support( 'post-thumbnails' );
    add_theme_support('title-tag');
    add_theme_support('html5',
     array('comment-list','comment-form','search-form')
     );
    }
add_action('after_setup_theme','gt_init');

//Project post type
function gt_custom_post_type(){
    register_post_type('project',
    array(
     'rewrite'=> array('slug'=>'projects'),
     'labels' => array(
       'name' => 'Projects',
       'singular_name' => 'Project',
       'add_new_item' => 'Add New Project',
       'edit_item' => 'Edit Project'
     ),
     'menu-icon' => 'dashicons-clipboard',
     'public' => true,
     'has_archive' =>true,
     'supports' => array(
       'title' , 'thumbnail' , 'editor' , 'excerpt' , 'comments'
     )
    )
  );
}
add_action('init','gt_custom_post_type');

//remove url field from comment form
 function prefix_disable_comment_url($fields){
     unset($fields('url'));
     return $fields;
 }
 add_filter('comment_form_default_fields','prefix_disable_comment_url');
 //Sidebar
 function gt_widgets(){
     register_sidebar( 
     array(
     'name' => 'Main Sidebar',
     'id' => 'main_sidebar',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
     )
     );

 }
 add_action('widgets_init','gt_widgets');
//Filters
function search_filter($query){
    if($query->is_search()){
        $query->set('post_type',array('post','project'));
    }
}
add_filter('pre_get_posts','search_filter');

//front-page widget
function gt_widgets_init() {

    register_sidebar(
        array(
            'name'          => __( 'Frontpage'),
            'id'            => 'section-source',
            'description'   => __( 'Add widgets here to appear in your frontpage.'),
            'before_widget' => '<section id="section-source">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="section-heading">',
            'after_title'   => '</h2>',
        )
    );

}
add_action( 'widgets_init', 'gt_widgets_init' );


?>

front-page.php

<?php get_header();?>

    <div id="banner">
        <h1>&lt;GTCoding/&gt;</h1>
        <h3>Learn coding from scratch</h3>
    </div>

    <main>
        <a href="<?php echo site_url('/blog');?>">
            <h2 class="section-heading">All Blogs</h2>
        </a>


        <section>
           <?php
        $args =  array(
         'post_type' => 'post',
         'posts_per_page' => 2
        );
        $blogposts = new WP_Query($args);

        while($blogposts->have_posts()){
            $blogposts->the_post();

      ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="https://wordpress.stackexchange.com/<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>

        <a href="<?php echo site_url('/projects');?>">
            <h2 class="section-heading">All Projects</h2>
        </a>


        <section>
           <?php
            $args =  array(
             'post_type' => 'project',
             'posts_per_page' => 2
            );
            $projects = new WP_Query($args);

            while($projects->have_posts()){
                $projects->the_post();

          ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="https://wordpress.stackexchange.com/<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>


              <?php 
               dynamic_sidebar( 'Frontpage' ); 
              ?>




      <!-- <h2 class="section-heading">Source Code</h2>

        <section id="section-source">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium
                consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!
            </p>
            <a href="#" class="btn-readmore">GitHub Profile</a>
        </section>-->

      <?php get_footer();?>

i see a extra div is generated when i inspect element

how i fix this?