WP - post content image - keep aspect ratio

 class="wp-block-image "

.wp-block-image img{

max-width: 100%;

    height: auto;

}

or

.myclass  img{

max-width: 100%;

    height: auto;

}

WP Featured Image and Post Thumbnail

 

add in functions.php

add_theme_support( 'post-thumbnails' );

add_image_size('small-thumbnail', 350, 230, true);

add_image_size('post-image', 600, 400, true);

single.php

                  <?php the_post_thumbnail('post-image'); ?>

Wordpress Page contents display with if page id condition

Display some contents in certain pages of wordpress only.

Hide contents from some pages.

<?php  if(is_page(14))  {?>

display this.....

<?php  }   ?>

Wordpress Post page designing with code

 Create file

single.php

Referance: https://wordpress.org/support/topic/create-new-basic-single-php-template/

<?php while ( have_posts() ) : the_post(); ?>

POST TITLE

<h1 class="intro-title mb-4"><h1 class="page-title"><a href="

<?php the_permalink(); ?>"><?php the_title();?>

</a></h1>

POST CONTENT

    <p>

        <?php the_content(); ?>

    </p>

<?php endwhile; ?>

Wp menu code - Navigation menu

 Activating navigation menu and using it with code.

function.php

add_theme_support('menus');

register_nav_menus(

    array(

        'primary-menu' => 'Primary Menu',

    )

)

<?php   echo get_home_url();  ?>

index.php

<?php 

$defaults = array( 

'container' => 'ul',

'theme_location' =>   'primary-menu',

'menu_class'  => 'nav navbar-nav '

);

wp_nav_menu( $defaults); 

?>

or

    $defaults = array( 

     'container' => 'ul',

     'theme_location' =>   'primary-menu',

     'menu_class'  => 'navbar-nav'

     );

     wp_nav_menu( $defaults); 

Wordpress Home URL Button -- Php code

Home Button in Navigation menu of wordpress

 <li class="nav-item">

            <a class="nav-link js-scroll" 

                href="<?php   echo get_home_url();  ?>">Home</a>

 </li>

Wordpress page template -- landing page

 create new file

landing.php

<?php

/*

Template Name: Landing

*/

get_header(); 

?>

Boostrap to Wordpress Convertion notes

 Goto    wp-content/themes

create basic php and css files 

from   index.html

remove title,    copy from top to nav end  --- header.php

foooter to bottom --- footer.php

in between contents to  --- index.php

Functions.php

<?php

function b2w_theme_styles(){

    wp_enqueue_style("boostrap_css", get_template_directory_uri().'/lib/bootstrap/css/bootstrap.min.css');

    wp_enqueue_style("style_css", get_template_directory_uri().'/css/style.css');

}

add_action('wp_enqueue_scripts', 'b2w_theme_styles');

function b2w_theme_js{

    //wp_enqueue_script("jquery_js", get_template_directory_uri().'/lib/jquery/jquery.min.js');    

    wp_enqueue_script("migrate_js", get_template_directory_uri().'/lib/jquery/jquery-migrate.min.js', array('jquery'),'',true);    

    wp_enqueue_script("popper_js", get_template_directory_uri().'/lib/popper/popper.min.js', array('jquery'),'',true);

    wp_enqueue_script("boostrap_js", get_template_directory_uri().'/lib/bootstrap/js/bootstrap.min.js', array('jquery'),'',true);

 

}

add_action('wp_enqueue_scripts', 'b2w_theme_js');

?>

replace link src  top   --  header.php

<?php wp_head(); ?>

add in footer.php

  <?php  wp_footer(); ?>

add header, footer to index

 <?php  get_header(); ?>

  <?php  get_footer(); ?>

Make images work

<?php echo get_template_directory_uri(); ?>

style="background-image: url(<?php echo get_template_directory_uri(); ?>/img//intro-bg.jpg)"

Title, dec

<?php bloginfo('name') ?>

reference

https://developer.wordpress.org/reference/functions/bloginfo/

Post thumbnail feature-- for enabling portfolio like

In functions.php  add   --->  add_theme_support('post-thumbnails');

to enable featured image option

Nav Menu

add_theme_support('menus');