Migrating a Bootstrap 3 Website to WordPress

Yes, you can have both the old Bootstrap pages and the newly designed WordPress pages coexist until the migration is complete. Here’s how you can achieve this:

Create a Child Theme:

// functions.php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Include Bootstrap 3 CSS:

// functions.php
function enqueue_bootstrap() {
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/path/to/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap' );

Create a Template for Old Pages:

// template-old-page.php
<?php
/* Template Name: Old Page Template */
get_header();
?>
<div class="container">
    <!-- Include your old Bootstrap HTML here -->
</div>
<?php
get_footer();
?>

Add New Pages Using WPBakery:
Use WPBakery Page Builder to create new pages. For each page, you can select a different template if needed.

Custom Header and Footer for Old Pages:

// header-old.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <!-- Your old Bootstrap header code -->

// footer-old.php
<!-- Your old Bootstrap footer code -->
<?php wp_footer(); ?>
</body>
</html>

Use Conditional Logic in Header and Footer:

// header.php
if ( is_page_template( 'template-old-page.php' ) ) {
    get_template_part( 'header', 'old' );
} else {
    // Default header
}

// footer.php
if ( is_page_template( 'template-old-page.php' ) ) {
    get_template_part( 'footer', 'old' );
} else {
    // Default footer
}

By following this approach, you can ensure that your old Bootstrap pages will coexist with your new WordPress pages, allowing a phased migration without breaking the site.

Related Posts: