Wordpress. Create theme. Search form
Today we will realize sidebar output with widgets and customize search form based on our design we’ve chosen
To print sidebar first of all we need to register it. For this purpose we will use register_sidebar() function. After this we need to add register sidebar function to wordpress widgets_init hook.
Then we will customize search form design in standard search widget. For this purpose we need to create new template file searchform.php
Then we will customize search form design in standard search widget. For this purpose we need to create new template file searchform.php
Code lesson (index.php)
<?php get_header(); ?>
<div class="col-md-8">
<h1 class="my-4">Page Heading<small> Secondary Text</small></h1>
<?php
if(have_posts()) {
while(have_posts()) {
the_post();
?>
<div class="card mb-4">
<?php the_post_thumbnail('', $default_attr); ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"><?php the_content(); ?></p>
</div>
<!-- <div class="card-footer text-muted">
<?php //the_author(); ?>
<?php //the_date(); ?>
</div> -->
<div class="card-footer text-muted">
Добавлено <?php the_date(); ?> автором <a href="#"><?php the_author(); ?></a>
</div>
</div>
<?php }
}
?>
</div>
<div class="col-md-4">
<?php dynamic_sidebar('right-sidebar'); ?>
</div>
<?php get_footer(); ?>Code lesson (functions.php)
<?php
$default_attr = array(
'class' => 'card-img-top'
);
function loadScripts() {
wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri(). '/css/bootstrap.min.css' );
wp_enqueue_style( 'main-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'bsscript', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array( 'jquery' ), '20150330', true );
}
function changeMenuItemsClass($class) {
$classes[] = "nav-item";
return $classes;
}
function addLinkClass($attrs) {
$attrs['class'] = 'nav-link';
return $attrs;
}
function modifyReadMoreLink() {
return '<p><a class="btn btn-primary" href="' . get_permalink() .'">Читать далее</a></p>';
}
function createWidgetsArea() {
register_sidebar(
array (
'name' => 'Справа',
'id' => 'right-sidebar',
'before_widget' => '<div class="card my-4">',
'after_widget' => '</div>',
'before_title' => '<h5 class="card-header">',
'after_title' => '</h5>'
)
);
}
add_action('wp_enqueue_scripts', 'loadScripts');
add_filter('nav_menu_css_class', 'changeMenuItemsClass');
add_filter('nav_menu_link_attributes', 'addLinkClass');
add_filter('the_content_more_link', 'modifyReadMoreLink');
add_action('widgets_init', 'createWidgetsArea');
register_nav_menu("main-menu", "Главное меню");
add_theme_support('post-thumbnails');Code lesson (searchform.php)
<div class="card-body">
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="text" name="s" class="form-control" value="<?php echo get_search_query(); ?>" placeholder="Search for...">
<span class="input-group-btn">
<input type="submit" value="Поиск" class="btn btn-secondary">
</span>
</div>
</form>
</div>
0 Comments