Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ndegwamoche/construct-education
https://github.com/ndegwamoche/construct-education
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/ndegwamoche/construct-education
- Owner: ndegwamoche
- Created: 2024-06-15T14:52:39.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-02T06:28:52.000Z (8 months ago)
- Last Synced: 2024-11-11T15:17:29.203Z (3 months ago)
- Language: CSS
- Size: 7.23 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Construct Education WordPress Theme
Welcome to the Construct Education WordPress theme. This theme is developed as part of the recruitment process at Construct Education.
Theme Information
Theme Name: Construct Education
Author: Martin Ndegwa Moche
Version: 1.0.0
Theme URI: https://github.com/ndegwamoche/construct-education
Author URI: https://github.com/ndegwamoche/
Installation
- Download the theme from the GitHub repository.
- Extract the downloaded zip file.
- Upload the extracted folder to your WordPress themes directory (
/wp-content/themes/).
- Log in to your WordPress admin dashboard and navigate to Appearance > Themes.
- Activate the Construct Education theme.
Theme Features
- Custom title support
- Post thumbnails support
- Custom logo support
- Custom menus (Primary and Footer menus)
- Page excerpt support
- Enqueued styles and scripts (Google Fonts, Bootstrap, Flickity)
Project Overview
This project involves converting a provided Figma design into a fully functional WordPress website. The Figma design can be accessed here. The design consists of multiple sections including headers, buttons, image placeholders, content sections, and a footer.
File Structure
The theme includes the following main files:
-
functions.php - Contains all the theme setup functions and definitions. -
header.php - Contains the header section of the theme. -
footer.php - Contains the footer section of the theme. -
styles.css - Contains all the custom CSS styles for the theme. -
- The main template file that includes the header, footer, and main content sections.
Header Section (header.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(); ?>>
<nav id="mainNav" class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<?php if ( has_custom_logo() ) : ?>
<div class="navbar-brand">
<?php the_custom_logo(); ?>
</div>
<?php else : ?>
<a class="navbar-brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
<?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation', 'construct-education'); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu(array(
'theme_location' => 'menu-1',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarResponsive',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
</div>
</nav>
</body>
</html>
Footer Section (footer.php)
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<?php the_custom_logo(); ?>
<p class="logo">Your footer description or address here</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-12 links-column">
<?php
wp_nav_menu(array(
'theme_location' => 'footer-menu-1',
'walker' => new Custom_Walker_Nav_Menu(),
));
?>
</div>
<div class="col-lg-2 col-md-6 col-sm-12 links-column">
<?php
wp_nav_menu(array(
'theme_location' => 'footer-menu-2',
'walker' => new Custom_Walker_Nav_Menu(),
));
?>
</div>
<div class="col-lg-2 col-md-6 col-sm-12 links-column">
<?php
wp_nav_menu(array(
'theme_location' => 'footer-menu-3',
'walker' => new Custom_Walker_Nav_Menu(),
));
?>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="bottom-text">© <?php echo date("Y"); ?> <?php bloginfo('name'); ?>. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
CSS Styles (styles.css)
/*!
Theme Name: Construct Education
Theme URI: https://github.com/ndegwamoche/construct-education
Author: Martin Ndegwa Moche
Author URI: https://github.com/ndegwamoche/
Description: I developed this theme as part of my participation in the recruitment process at Construct Education.
Version: 1.0.0
*/
body {
font-family: 'Open Sans', sans-serif !important;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
font-family: 'Open Sans', sans-serif !important;
}
.font-alt {
font-family: 'Open Sans', sans-serif !important;
}
#mainNav .navbar-brand {
font-family: 'Open Sans', sans-serif !important;
}
#mainNav .navbar-nav .nav-item .nav-link {
color: #1e3d79 !important;
font-weight: 650;
}
.navbar-light .navbar-toggler-icon {
background-image: url('assets/icons/menu.png');
}
.btn-primary {
background-color: #1e3d79 !important;
border-radius: 0px;
}
.main-header {
display: none;
}
.new-header {
background-color: #1e3d79;
}
Usage
After activating the theme, you can customize it via the WordPress Customizer by navigating to Appearance > Customize. Here you can set your site's title, tagline, and logo.
To manage menus, go to Appearance > Menus and create or assign menus to the theme's primary and footer menu locations.
Support
If you encounter any issues or have any questions about the theme, please visit the GitHub repository and open an issue.
Thank you for using the Construct Education WordPress theme!