feat: add new WordPress theme for Duck Behavior Journal
- Set up a new WordPress theme with custom logo, header image, and menus - Implement the WP Bootstrap Navwalker for improved navigation - Add Bootstrap and jQuery for styling and functionality - Customize hero section via the Customizer API - Include footer with customizable text and social media links - Integrate featured articles and page templates - Enhance styles with a dedicated CSS file References: #123, #124 This addition provides a modern, responsive design tailored to the Duck Behavior Journal, enhancing user engagement and site navigation.
This commit is contained in:
commit
c61ba4a695
GPG key ID:
ECBCC9082395383F
13 changed files with 483 additions and 0 deletions
19
LICENSE
Normal file
19
LICENSE
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
Copyright (c) 2024 Kumi Mitterer <duckbehaviorjournal@kumi.email>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
7
assets/dist/css/bootstrap.min.css
vendored
Normal file
7
assets/dist/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
assets/dist/js/bootstrap.min.js
vendored
Normal file
7
assets/dist/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
assets/dist/js/jquery-3.5.1.min.js
vendored
Normal file
2
assets/dist/js/jquery-3.5.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/img/hero.png
Normal file
BIN
assets/img/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
66
class-wp-bootstrap-navwalker.php
Normal file
66
class-wp-bootstrap-navwalker.php
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* WP_Bootstrap_Navwalker class.
|
||||
*
|
||||
* @extends Walker_Nav_Menu
|
||||
*/
|
||||
class WP_Bootstrap_Navwalker extends Walker_Nav_Menu
|
||||
{
|
||||
|
||||
// Add classes to ul sub-menus
|
||||
function start_lvl(&$output, $depth = 0, $args = array())
|
||||
{
|
||||
$indent = str_repeat("\t", $depth);
|
||||
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
|
||||
}
|
||||
|
||||
// Add main/sub classes to li's and links
|
||||
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
|
||||
{
|
||||
$indent = ($depth) ? str_repeat("\t", $depth) : '';
|
||||
|
||||
$li_attributes = '';
|
||||
$class_names = $value = '';
|
||||
|
||||
$classes = empty($item->classes) ? array() : (array) $item->classes;
|
||||
$classes[] = ($args->walker->has_children) ? 'dropdown' : '';
|
||||
$classes[] = 'nav-item';
|
||||
$classes[] = 'nav-item-' . $item->ID;
|
||||
if ($depth && $args->walker->has_children) {
|
||||
$classes[] = 'dropdown-submenu';
|
||||
}
|
||||
|
||||
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
|
||||
$class_names = ' class="' . esc_attr($class_names) . '"';
|
||||
|
||||
$id = apply_filters('nav_menu_item_id', 'nav-menu-item-' . $item->ID, $item, $args);
|
||||
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
|
||||
|
||||
$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
|
||||
|
||||
$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
|
||||
$attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
|
||||
$attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
|
||||
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
|
||||
|
||||
$attributes .= ($args->walker->has_children) ? ' class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="nav-link"';
|
||||
|
||||
$item_output = $args->before;
|
||||
$item_output .= '<a' . $attributes . '>';
|
||||
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
|
||||
$item_output .= '</a>';
|
||||
$item_output .= $args->after;
|
||||
|
||||
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Register Custom Navigation Walker
|
||||
*/
|
||||
function register_navwalker()
|
||||
{
|
||||
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
|
||||
}
|
||||
add_action('after_setup_theme', 'register_navwalker');
|
||||
26
footer.php
Normal file
26
footer.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!-- Footer -->
|
||||
<footer class="bg-light py-4">
|
||||
<div class="container text-center">
|
||||
<p><?php echo get_theme_mod('footer_text', '© ' . date('Y') . ' Duck Behavior Journal. All rights reserved.'); ?></p>
|
||||
<div>
|
||||
<?php
|
||||
wp_nav_menu(array(
|
||||
'theme_location' => 'footer',
|
||||
'menu_class' => 'nav justify-content-center',
|
||||
'container' => false,
|
||||
'depth' => 1,
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="social-media mt-3">
|
||||
<a href="<?php echo get_theme_mod('footer_facebook_link', '#'); ?>" class="mx-2"><img src="<?php echo get_template_directory_uri(); ?>/facebook-icon.png" alt="Facebook"></a>
|
||||
<a href="<?php echo get_theme_mod('footer_twitter_link', '#'); ?>" class="mx-2"><img src="<?php echo get_template_directory_uri(); ?>/twitter-icon.png" alt="Twitter"></a>
|
||||
<a href="<?php echo get_theme_mod('footer_linkedin_link', '#'); ?>" class="mx-2"><img src="<?php echo get_template_directory_uri(); ?>/linkedin-icon.png" alt="LinkedIn"></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
168
functions.php
Normal file
168
functions.php
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<?php
|
||||
function duck_behavior_journal_setup()
|
||||
{
|
||||
add_theme_support('post-thumbnails');
|
||||
add_theme_support('title-tag');
|
||||
register_nav_menus(array(
|
||||
'primary' => __('Primary Menu', 'duck-behavior-journal'),
|
||||
'footer' => __('Footer Menu', 'duck-behavior-journal'),
|
||||
));
|
||||
|
||||
add_theme_support('custom-logo');
|
||||
|
||||
add_theme_support('custom-header', array(
|
||||
'default-image' => get_template_directory_uri() . '/assets/img/hero.png',
|
||||
'width' => 1920,
|
||||
'height' => 1080,
|
||||
'flex-height' => true,
|
||||
'flex-width' => true,
|
||||
));
|
||||
}
|
||||
add_action('after_setup_theme', 'duck_behavior_journal_setup');
|
||||
|
||||
function duck_behavior_journal_scripts()
|
||||
{
|
||||
wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/dist/css/bootstrap.min.css');
|
||||
wp_enqueue_style('theme-style', get_stylesheet_uri());
|
||||
wp_enqueue_script('jquery', get_template_directory_uri() . '/assets/dist/js/jquery-3.5.1.min.js', array(), null, true);
|
||||
wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/dist/js/bootstrap.min.js', array(), null, true);
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'duck_behavior_journal_scripts');
|
||||
|
||||
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
|
||||
|
||||
function duck_behavior_journal_customizer($wp_customize)
|
||||
{
|
||||
// Hero Image Section
|
||||
$wp_customize->add_section('hero_image_section', array(
|
||||
'title' => __('Hero Section', 'duck-behavior-journal'),
|
||||
'priority' => 30,
|
||||
));
|
||||
|
||||
// Hero Image Setting
|
||||
$wp_customize->add_setting('hero_image', array(
|
||||
'default' => get_template_directory_uri() . '/assets/hero.jpg',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'hero_image_control', array(
|
||||
'label' => __('Hero Image', 'duck-behavior-journal'),
|
||||
'section' => 'hero_image_section',
|
||||
'settings' => 'hero_image',
|
||||
)));
|
||||
|
||||
// Hero Title Setting
|
||||
$wp_customize->add_setting('hero_title', array(
|
||||
'default' => 'Advancing the Understanding of Duck Behavior',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control('hero_title_control', array(
|
||||
'label' => __('Hero Title', 'duck-behavior-journal'),
|
||||
'section' => 'hero_image_section',
|
||||
'settings' => 'hero_title',
|
||||
'type' => 'text',
|
||||
));
|
||||
|
||||
// Hero Subtitle Setting
|
||||
$wp_customize->add_setting('hero_subtitle', array(
|
||||
'default' => 'Through Rigorous Scientific Research',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control('hero_subtitle_control', array(
|
||||
'label' => __('Hero Subtitle', 'duck-behavior-journal'),
|
||||
'section' => 'hero_image_section',
|
||||
'settings' => 'hero_subtitle',
|
||||
'type' => 'text',
|
||||
));
|
||||
|
||||
// Hero Primary Button Text Setting
|
||||
$wp_customize->add_setting('hero_primary_button_text', array(
|
||||
'default' => 'Submit Your Research',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control('hero_primary_button_text_control', array(
|
||||
'label' => __('Hero Primary Button Text', 'duck-behavior-journal'),
|
||||
'section' => 'hero_image_section',
|
||||
'settings' => 'hero_primary_button_text',
|
||||
'type' => 'text',
|
||||
));
|
||||
|
||||
// Hero Primary Button URL Setting
|
||||
$wp_customize->add_setting('hero_primary_button_url', array(
|
||||
'default' => '#',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control('hero_primary_button_url_control', array(
|
||||
'label' => __('Hero Primary Button URL', 'duck-behavior-journal'),
|
||||
'section' => 'hero_image_section',
|
||||
'settings' => 'hero_primary_button_url',
|
||||
'type' => 'url',
|
||||
));
|
||||
|
||||
// Hero Secondary Button Text Setting
|
||||
$wp_customize->add_setting('hero_secondary_button_text', array(
|
||||
'default' => 'Subscribe to the Journal',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control('hero_secondary_button_text_control', array(
|
||||
'label' => __('Hero Secondary Button Text', 'duck-behavior-journal'),
|
||||
'section' => 'hero_image_section',
|
||||
'settings' => 'hero_secondary_button_text',
|
||||
'type' => 'text',
|
||||
));
|
||||
|
||||
// Hero Secondary Button URL Setting
|
||||
$wp_customize->add_setting('hero_secondary_button_url', array(
|
||||
'default' => '#',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control('hero_secondary_button_url_control', array(
|
||||
'label' => __('Hero Secondary Button URL', 'duck-behavior-journal'),
|
||||
'section' => 'hero_image_section',
|
||||
'settings' => 'hero_secondary_button_url',
|
||||
'type' => 'url',
|
||||
));
|
||||
|
||||
// Footer Section
|
||||
$wp_customize->add_section('footer_section', array(
|
||||
'title' => __('Footer', 'duck-behavior-journal'),
|
||||
'priority' => 40,
|
||||
));
|
||||
|
||||
// Footer Text Setting
|
||||
$wp_customize->add_setting('footer_text', array(
|
||||
'default' => '© ' . date('Y') . ' Duck Behavior Journal. All rights reserved.',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control('footer_text_control', array(
|
||||
'label' => __('Footer Text', 'duck-behavior-journal'),
|
||||
'section' => 'footer_section',
|
||||
'settings' => 'footer_text',
|
||||
'type' => 'textarea',
|
||||
));
|
||||
|
||||
// Footer Social Media Links
|
||||
$social_media = array('facebook', 'twitter', 'linkedin');
|
||||
|
||||
foreach ($social_media as $platform) {
|
||||
$wp_customize->add_setting("footer_{$platform}_link", array(
|
||||
'default' => '#',
|
||||
'transport' => 'refresh',
|
||||
));
|
||||
|
||||
$wp_customize->add_control("footer_{$platform}_link_control", array(
|
||||
'label' => __(ucfirst($platform) . ' URL', 'duck-behavior-journal'),
|
||||
'section' => 'footer_section',
|
||||
'settings' => "footer_{$platform}_link",
|
||||
'type' => 'url',
|
||||
));
|
||||
}
|
||||
}
|
||||
add_action('customize_register', 'duck_behavior_journal_customizer');
|
||||
32
header.php
Normal file
32
header.php
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
|
||||
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="bg-light py-3">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<?php if (has_custom_logo()) : ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php else : ?>
|
||||
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
|
||||
<?php endif; ?>
|
||||
<nav>
|
||||
<?php
|
||||
wp_nav_menu(array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_class' => 'nav',
|
||||
'container' => false,
|
||||
'walker' => new WP_Bootstrap_Navwalker(),
|
||||
));
|
||||
?>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
39
index.php
Normal file
39
index.php
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<?php get_header(); ?>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero text-center text-white d-flex align-items-center" style="background-image: url('<?php echo get_theme_mod('hero_image', get_template_directory_uri() . '/assets/img/hero.png'); ?>');">
|
||||
<div class="container">
|
||||
<h1 class="display-4"><?php echo get_theme_mod('hero_title', 'Advancing the Understanding of Duck Behavior'); ?></h1>
|
||||
<p class="lead"><?php echo get_theme_mod('hero_subtitle', 'Through Rigorous Scientific Research'); ?></p>
|
||||
<a href="<?php echo get_theme_mod('hero_primary_button_url', '#'); ?>" class="btn btn-primary"><?php echo get_theme_mod('hero_primary_button_text', 'Submit Your Research'); ?></a>
|
||||
<a href="<?php echo get_theme_mod('hero_secondary_button_url', '#'); ?>" class="btn btn-secondary"><?php echo get_theme_mod('hero_secondary_button_text', 'Subscribe to the Journal'); ?></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Articles -->
|
||||
<section class="container my-5">
|
||||
<h2 class="text-center mb-4">Featured Articles</h2>
|
||||
<div class="row">
|
||||
<?php
|
||||
$args = array('post_type' => 'post', 'posts_per_page' => 3);
|
||||
$loop = new WP_Query($args);
|
||||
while ($loop->have_posts()) : $loop->the_post();
|
||||
?>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<?php if (has_post_thumbnail()) : ?>
|
||||
<img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">
|
||||
<?php endif; ?>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><?php the_title(); ?></h5>
|
||||
<p class="card-text"><?php the_author(); ?> | <?php the_date(); ?></p>
|
||||
<a href="<?php the_permalink(); ?>" class="btn btn-outline-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endwhile;
|
||||
wp_reset_query(); ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
16
page.php
Normal file
16
page.php
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?php get_header(); ?>
|
||||
|
||||
<!-- Page Content -->
|
||||
<section class="container my-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
|
||||
<h1 class="display-4"><?php the_title(); ?></h1>
|
||||
<?php the_content(); ?>
|
||||
<?php endwhile;
|
||||
endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
20
single.php
Normal file
20
single.php
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?php get_header(); ?>
|
||||
|
||||
<!-- Paper Content -->
|
||||
<section class="container my-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
|
||||
<h1 class="display-4"><?php the_title(); ?></h1>
|
||||
<p class="text-muted"><?php the_author(); ?> | <?php the_date(); ?></p>
|
||||
<?php if (has_post_thumbnail()) : ?>
|
||||
<img src="<?php the_post_thumbnail_url(); ?>" class="img-fluid mb-4" alt="<?php the_title(); ?>">
|
||||
<?php endif; ?>
|
||||
<?php the_content(); ?>
|
||||
<?php endwhile;
|
||||
endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
81
style.css
Normal file
81
style.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
Theme Name: Duck Behavior Journal
|
||||
Theme URI: https://duckbehaviorjournal.com
|
||||
Author: Kumi
|
||||
Author URI: https://kumi.website
|
||||
Description: A WordPress theme for the Duck Behavior Journal.
|
||||
Version: 1.0
|
||||
License: MIT
|
||||
License URI: https://opensource.org/licenses/MIT
|
||||
Text Domain: duck-behavior-journal
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: 60vh;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.hero p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer .social-media img {
|
||||
height: 24px;
|
||||
}
|
||||
Loading…
Reference in a new issue