- ওয়ার্ডপ্রেস ইনস্টল করি
- জেনেরেটপ্রেস থিম এবং জেনেরেটপ্রেস চাইল্ড থিম ইনস্টল করে জেনেরেটপ্রেস চাইল্ড থিম এক্টিভেট করি।
- GenerateBlocks প্লাগিন ইনস্টল করি।
Hook List
Header Hooks
generate_before_header: Fires before the header.generate_after_header: Fires after the header.generate_before_header_content: Fires before the header content.generate_after_header_content: Fires after the header content.
Navigation Hooks
generate_before_navigation: Fires before the navigation.generate_after_navigation: Fires after the navigation.generate_inside_navigation: Fires inside the navigation.
Content Hooks
generate_before_main_content: Fires before the main content.generate_after_main_content: Fires after the main content.generate_before_content: Fires before the content.generate_after_content: Fires after the content.generate_inside_container: Fires inside the container.generate_before_page_header: Fires before the page header.generate_after_page_header: Fires after the page header.generate_after_entry_header: Fires after the entry header.generate_before_entry_content: Fires before the entry content.generate_after_entry_content: Fires after the entry content.generate_before_comments_container: Fires before the comments container.generate_after_comments_container: Fires after the comments container.
Post Hooks
generate_before_entry_title: Fires before the entry title.generate_after_entry_title: Fires after the entry title.generate_after_entry_header: Fires after the entry header.generate_before_content: Fires before the post content.generate_after_content: Fires after the post content.
Footer Hooks
generate_before_footer: Fires before the footer.generate_after_footer: Fires after the footer.generate_before_footer_content: Fires before the footer content.generate_after_footer_content: Fires after the footer content.generate_inside_footer: Fires inside the footer.
Sidebar Hooks
generate_before_right_sidebar_content: Fires before the right sidebar content.generate_after_right_sidebar_content: Fires after the right sidebar content.generate_before_left_sidebar_content: Fires before the left sidebar content.generate_after_left_sidebar_content: Fires after the left sidebar content.
Widget Hooks
generate_before_right_sidebar_widgets: Fires before the right sidebar widgets.generate_after_right_sidebar_widgets: Fires after the right sidebar widgets.generate_before_left_sidebar_widgets: Fires before the left sidebar widgets.generate_after_left_sidebar_widgets: Fires after the left sidebar widgets.
Miscellaneous Hooks
generate_before_header_widget_area: Fires before the header widget area.generate_after_header_widget_area: Fires after the header widget area.generate_before_footer_widget_area: Fires before the footer widget area.generate_after_footer_widget_area: Fires after the footer widget area.
Filters
generate_site_title: Filters the site title.generate_site_description: Filters the site description.generate_navigation_search_output: Filters the navigation search output.generate_next_link_text: Filters the next link text.generate_previous_link_text: Filters the previous link text.generate_menu_item_output: Filters the menu item output.
Example of Using a Hook
Here is an example of how to use a hook to add custom content before the header:
add_action('generate_before_header', 'my_custom_before_header_content');
function my_custom_before_header_content() {
echo '<div class="custom-content">This is my custom content before the header</div>';
}
Example of Using a Filter
Here is an example of how to use a filter to modify the site title:
add_filter('generate_site_title', 'my_custom_site_title');
function my_custom_site_title($title) {
return 'My Custom Site Title';
}
Header Customization
Removing the Default Header
Next, we’ll remove the default header provided by GeneratePress. Add the following code to your functions.php file:
<?php
// Remove Default Header
add_action('wp', 'remove_generatepress_header');
function remove_generatepress_header() {
remove_action('generate_header', 'generate_construct_header');
}
?>
Creating a Custom Header with Hooks
Now, we’ll create a custom header with a top area and main header content using the specified hooks.
Add the following code to your functions.php file:
<?php
// Add Top Area before Header Container
add_action('generate_before_header', 'custom_generatepress_top_area');
function custom_generatepress_top_area() {
?>
<div class="top-bar">
<div class="top-bar-container">
<div class="top-bar-left">
<p>Contact us: +123 456 7890</p>
</div>
<div class="top-bar-right">
<div class="top-social-icons">
<a href="https://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<?php
}
// Add Custom Header Content
add_action('generate_header', 'custom_generatepress_header_content');
function custom_generatepress_header_content() {
?>
<div class="header-container">
<div class="site-branding">
<?php
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
?>
<div class="site-title-description">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</div>
</div>
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
<div class="header-extras">
<!-- Social Media Icons -->
<div class="social-icons">
<a href="https://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
<!-- Add your custom header extras here, like social media icons or search form -->
<?php get_search_form(); ?>
</div>
</div>
<?php
}
// Load Font Awesome for Icons
function load_font_awesome() {
wp_enqueue_script( 'font-awesome', 'https://kit.fontawesome.com/a076d05399.js' );
}
add_action( 'wp_enqueue_scripts', 'load_font_awesome' );
// Add actions for before and after header content
add_action('generate_before_header_content', 'before_header_content');
function before_header_content() {
echo '<div class="before-header-content">This is before header content.</div>';
}
add_action('generate_after_header_content', 'after_header_content');
function after_header_content() {
echo '<div class="after-header-content">This is after header content.</div>';
}
?>
Adding Custom Styles
Add the following CSS to your style.css file to style the top bar and header:
/* Custom Top Bar Styles */
.top-bar {
background-color: #f8f8f8;
padding: 10px 0;
border-bottom: 1px solid #e1e1e1;
}
.top-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.top-bar-left {
font-size: 14px;
color: #333;
}
.top-bar-right .top-social-icons {
display: flex;
align-items: center;
}
.top-bar-right .top-social-icons a {
margin-left: 15px;
color: #333;
text-decoration: none;
}
.top-bar-right .top-social-icons a:hover {
color: #0073aa;
}
/* Custom Header Styles */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #fff;
}
.site-branding {
display: flex;
align-items: center;
}
.site-branding .site-title-description {
margin-left: 20px;
}
.site-title {
font-size: 24px;
margin: 0;
}
.site-description {
font-size: 14px;
color: #666;
}
.main-navigation {
margin-left: auto;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.main-navigation li {
margin: 0 10px;
}
.main-navigation a {
text-decoration: none;
color: #333;
}
.header-extras {
display: flex;
align-items: center;
}
.header-extras .search-form {
margin-left: 20px;
}
/* Additional Header Content Styles */
.before-header-content,
.after-header-content {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
/* Responsive Header Styles */
@media (max-width: 768px) {
.header-container {
flex-direction: column;
align-items: flex-start;
}
.main-navigation {
margin-left: 0;
width: 100%;
}
.main-navigation ul {
flex-direction: column;
width: 100%;
}
.main-navigation li {
margin: 10px 0;
}
.header-extras {
margin-top: 20px;
width: 100%;
justify-content: space-between;
}
.top-bar-container {
flex-direction: column;
align-items: flex-start;
}
.top-bar-right {
margin-top: 10px;
}
}
Final Touches and Testing
- Clear Cache: If you are using any caching plugins, make sure to clear the cache to see your changes.
- Test Responsiveness: Check your site on different devices to ensure the top bar and header look good and are fully functional.
- Refine Styles: Adjust any styles as needed to match your design preferences.
Footer Customization
// Remove the default GeneratePress footer
function remove_generatepress_footer() {
remove_action('generate_footer', 'generate_construct_footer');
}
add_action('wp', 'remove_generatepress_footer');
function custom_footer_content() {
?>
<div class="h-[auto] py-[50px] flex flex-col items-center bg-black">
<div class="flex w-[90%] space-x-6 justify-between border-white/55 pb-[20px] border-b-[1px]">
<div class="w-[500px] flex flex-col">
<p class="font-[700] text-[23px] py-[5px] border-white border-b-[1px] text-white">Head Office</p>
<p class="text-white py-[20px]">69 (5th Floor), Master Para Road, Barabag, Mirpur-2, Dhaka-1216</p>
</div>
<div class="w-[500px] flex flex-col">
<p class="font-[700] text-[23px] py-[5px] border-white border-b-[1px] text-white">Warehouse</p>
<p class="text-white py-[20px]">Holdings No : 0042-03, Mondol Para, West Rajashon, Savar-1340, Dhaka.</p>
</div>
</div>
<div class="flex flex-wrap w-[90%] justify-between gap-y-[20px] laptop:space-x-[40px] mobile:space-x-0 laptop:text-[23px] mobile:text-[18px] py-[40px]">
<div class="w-auto flex flex-col">
<div class="flex flex-col space-y-[20px] place-items-start">
<p class="font-[700] laptop:text-[23px] mobile:text-[18px] py-[5px] text-white">Call Us</p>
<a class="flex place-items-center cursor-pointer space-x-[20px]" href="tel:+8801713969481">
<div class="bg-[#39B54A] content-center flex place-content-center place-items-center w-[50px] h-[50px] rounded-full">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" class="svg-inline--fa fa-phone " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height:30px;width:30px" color="white">
<path fill="currentColor" d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"></path>
</svg>
</div>
<div>
<p class="font-[700] laptop:text-[23px] mobile:text-[18px] text-white">+8801713368998</p>
<p class="font-[700] laptop:text-[23px] mobile:text-[18px] text-white">+8801713969481</p>
</div>
</a>
</div>
</div>
<div class="w-auto flex flex-col">
<div class="flex flex-col space-y-[20px] place-items-start">
<p class="font-[700] laptop:text-[23px] mobile:text-[18px] py-[5px] text-white">Email Us</p>
<a class="flex place-items-center cursor-pointer space-x-[20px]" href="mailto:jrrecyclingsolutionsltd@gmail.com">
<div class="bg-[#39B54A] content-center flex place-content-center place-items-center w-[50px] h-[50px] rounded-full">
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="envelope" class="svg-inline--fa fa-envelope " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height:30px;width:30px" color="white">
<path fill="currentColor" d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"></path>
</svg>
</div>
<p class="font-[700] laptop:text-[23px] mobile:text-[18px] text-white">jrrecyclingsolutionsltd@gmail.com</p>
</a>
</div>
</div>
<div class="laptop:w-[15%] mobile:w-full flex flex-col">
<div class="flex flex-col space-y-[20px] mobile:place-items-center laptop:place-items-start">
<p class="font-[700] mobile:place-self-center laptop:place-self-end laptop:text-[23px] mobile:text-[18px] py-[5px] text-white">Follow Us</p>
<div class="flex place-items-center space-x-[12px]">
<a class="bg-[#39B54A] hover:scale-110 transition-all content-center flex place-content-center place-items-center w-[40px] h-[40px] rounded-full" href="https://www.facebook.com/jr.enterprise7">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height:60%;width:60%" color="white">
<path fill="currentColor" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"></path>
</svg>
</a>
<a class="bg-[#39B54A] hover:scale-110 transition-all content-center flex place-content-center place-items-center w-[40px] h-[40px] rounded-full" href="https://www.linkedin.com/company/jrrecyclingsolutions/">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="height:60%;width:60%" color="white">
<path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5zM417.5 416h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9V416z"></path>
</svg>
</a>
<a class="bg-[#39B54A] hover:scale-110 transition-all content-center flex place-content-center place-items-center w-[40px] h-[40px] rounded-full" href="https://www.facebook.com/jr.enterprise7">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="height:60%;width:60%" color="white">
<path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821c11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
</a>
<a class="bg-[#39B54A] hover:scale-110 transition-all content-center flex place-content-center place-items-center w-[40px] h-[40px] rounded-full" href="https://www.instagram.com/jrrecyclingsolutionsltd/">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="height:60%;width:60%" color="white">
<path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7s74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="w-full flex place-content-center place-items-center border-t-2 border-white/45">
<p class="text-[17px] py-[30px] text-white">© 2023 JR ENTERPRISE. All Rights Reserved.</p>
</div>
</div>
<?php
}
add_action('wp_footer', 'custom_footer_content');