How to create Bootstrap4 Custom Wordpress Theme
Before going to create custom wordpress theme development hope you know well in php and wordpress.
Basic thinks we need to create a custom wordpress theme files are
1. Header File header.php
2. Index File index.php
3. Functions File functions.php
4. Footer File footer.php
5. Style File style.php
these four are the main parts to run your theme. Addionlly We need following files to run with more futures.
6. Content File content.php
7. Widget File widget.php
8. Comments File comments.php
We need basing theme folders, following are the folder names
1. CSS
2. JS
3. Images
these three are very basic folders.
You may create addionally n number of files such as template-part and content-part etc.
These files are useful when you create a blog related theme with sidebar or anything
So now we see how to create a bootstrap theme.
1. Include bootstrap css files into the CSS folder
2. Include bootstrap js files into the JS folder
3. Create header.php and place your header html coder over there
4. create footer.php file and place your footer html code over there
5. create index.php file place your main html code over there or safely you can create content.php file place it over there and call from index.php
6.Create functions.php and include all of your css and js files over there.
Example like this,
// Theme stylesheet.
wp_enqueue_style( 'new-theme-style', get_stylesheet_uri() );
// Theme block stylesheet.
wp_enqueue_style( 'new-theme-block-style', get_template_directory_uri() . '/css/bootstrap.min.css', array( 'new-theme-style' ), '20181230' );
Include fonts like the below one
wp_enqueue_style( 'new-theme-font-style', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css', array( 'new-theme-style' ), '20181230' );
Next we need to create menu bar for that we need to register nav use the below code
function register_my_menu() {
register_nav_menu('header-menu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' );
add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
// This theme uses wp_nav_menu()
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'new-theme' )
) );
This code for adding logo section in the admin panel
*/
add_theme_support(
'custom-logo',
array(
'height' => 27,
'width' => 199,
'flex-width' => false,
'flex-height' => false,
)
);
/*Register Widget Area*/
function new-theme_widgets_init() {
register_sidebar(
array(
'name' => __( 'Sidebar', 'new-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar.', 'new-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
if you need to use sidebar in your theme use this below code
register_sidebar(
array(
'name' => __( 'Content Bottom 1', 'new-theme' ),
'id' => 'sidebar-2',
'description' => __( 'Appears at the bottom of the content on posts and pages.', 'new-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
register_sidebar(
array(
'name' => __( 'Content Bottom 2', 'new-theme' ),
'id' => 'sidebar-3',
'description' => __( 'Appears at the bottom of the content on posts and pages.', 'new-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'new-theme_widgets_init' );
that is the basic things to create custom theme
If you have any doubt Visit eightlegbuilders.com and get support.
Note : if you need your theme show screenshot image use screenshot.jpg file to show your custom theme with image
