Customize header and footer in WordPress theme - wordpress

I am currently working on a WordPress site with hardcoded values in the header and footer. I'd like to make both the header and footer editable from within the WP Admin, but am not sure the best route. Any thoughts on best practices?

Admin/Appearance/Widgets.
I recommend you create a widget that allows the footer to be edited.
This scenario is vastly used when web-developers are handing over the freedom for editing to their clients. This minimizes the risk of faults while editing.

If you have menus in header and footer then, you can create a menu in apperance->menus in wp-admin and call it in footer by their ID (theme-location).
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
Any other text can be printed in header and footer by created widgets as answered above..

Related

Use page id in wp nav menu li a

I make a wordpress menu in my wordpress theme. I want to make it a one-page theme i.e. If the theme have Home,Services,Our Team,Work,Contracts menu.
I want to make such that If i click on services. The page will go services area of the same page. I know that in HTML Template this is done using id of that area i.e <li>Services</li>.
But I want to use it in wordpress theme. But I don't know how I can use it.
The menu dynamic code of my header php is below.
<div class="header_menu">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu_id' => 'nav' ) ); ?>
</div>
You've tried to use an anchor?
You have 2 solution at this problem:
1) Manage your wp menu to create custom link with anchor;
2) Try to use jQuery to modify structure of menu, after page loading.

Wordpress - Different sidebar for each page

Client needs an website to migrate into WordPress.
In this website each page has an sidebar with different content inside it
In some page accordion comes under sidebar, in some just text and images are visible
How to implement this in WordPress?
If template has to be created, there are many page it cant be done so
Even for every page different sidebar widget is not also possible
Guide me a way to implement this
A different sidebar (widget) are can be added to each page in two steps:
Add the sidebar to the theme template using the page slug as part of the sidebar name. This ensures that the sidebar has a unique name for that page.
Register the sidebars for each page in functions.php for your theme
Add the sidebar to the theme template
In your theme template, add the following code where you want the widget area to be:
<?php
global $post;
dynamic_sidebar( 'widget_area_for_page_'.$post->post_name );
?>
Register the sidebars
In functions.php for your theme add the following block of code to register the sidebars for each page in your site. Note that it includes draft pages etc so that you can edit the widgets while still in draft mode.
function myTheme_registerWidgetAreas() {
// Grab all pages except trashed
$pages = new WP_Query(Array(
'post_type' => 'page',
'post_status' => array('publish', 'pending', 'draft', 'auto-draft', 'future', 'private', 'inherit'),
'posts_per_page'=>-1
));
// Step through each page
while ( $pages->have_posts() ) {
$pages->the_post();
// Ignore pages with no slug
if ($pages->post->post_name == '') continue;
// Register the sidebar for the page. Note that the id has
// to match the name given in the theme template
register_sidebar( array(
'name' => $pages->post->post_name,
'id' => 'widget_area_for_page_'.$pages->post->post_name,
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
) );
}
}
add_action( 'widgets_init', 'myTheme_registerWidgetAreas' );
Hope it helps!
There's a great plugin for this:
https://wordpress.org/plugins/custom-sidebars/
Sometimes it is necessary to show different elements on the sidebars
for some posts or pages. The themes nowadays give you some areas to
put the widgets, but those areas are common for all the posts that are
using the same template. NOTE: You need to use a theme that accepts
widgets to make this plugin work.
I think this is what you're looking for.
This can be done with the https://wordpress.org/plugins/jetpack/ plugin. Once activated you can choose what widgets display on what pages:
The Widget Visibility module enables you to configure widgets to appear only on certain pages (or be hidden on certain pages) by using the Visibility panel.
Visibility is controlled by five aspects: page type, category, tag, date, and author. For example, if you wanted the Archives widget to only appear on category archives and error pages, choose “Show” from the first dropdown and then add two rules: “Page is 404 Error Page” and “Category is All Category Pages.”
Just tried custom-sidebars with the latest version of wp. Had a hard time deleting it. Database is still messy. Plugin did not work. Maybe the 'pro' version is useful, but the 'non-pro' version would not add a sidebar to the page. It was clunky and did not allow per-page sidebars. It says its not been tested with the latest wp, maybe that's the problem.
You can create custom sidebar for for each post and pages with the help of plugin. There are a few plugins which enables you to create your custom sidebar. Here in this tutorial we are using Easy Custom Sidebars. Download and install this plugin in your website and activate it.
After successfully activating the plugin go to Appearance > Sidebar Replacement
From this page give a name to your custom sidebar and click on the Create Sidebar button. After that go to the Sidebar Properties option. Here you need to select the properties where you want to replace your created custom sidebar instead of theme sidebar. You can view your available option in the drop-down menu. Select it and provide a description on the Sidebar Description field.
Now in the last step select the post or pages to add this custom sidebar. You can see all the option in the left column. You can select specific post, page, category , tag, author to add this sidebar. Just select it and click Add to sidebar option.
For better understanding you can follow this tutorial

WordPress : Customize Genesis header

I am just diving into the Genesis Framework.
In a normal theme, if you want to edit the header, you'd open the header.php file.
But in genesis, the header file is not in the child theme. I have looked around and found a way to add custom header support, but i need some guidance.
The code below is to enable custom header support. I assume this goes into the functions.php file. But how to i actually add code here? What if i want to say pull in a custom field, or add a div to this section, or bring a slider in? How to i actually use this code to let me add html and php into the child theme header?
/** Add custom header support */
add_theme_support( 'genesis-custom-header',
array( 'width' => 960, 'height' => 100, 'textcolor' => '444',
'admin_header_callback' => 'minimum_admin_style' ) );
First you need to remove the header that is currently there. All of this goes into functions.php in your child theme
remove_action('genesis_header','genesis_do_header');
Then is it as simple as building a function to act as your new header.
function injectHeader() { ?>
<div id="title-area">
<h1>Title Here</h1>
<nav>Nav Here and so on</nav>
<p>You can add whatever you want</p>
</div>
<?php }
I normally try to use the same class and ID names so I can preserve some of the built in styles and save myself some work but that's up to you. All you have to do is add whatever you want in the function and call it back in like this,
add_action('genesis_header','injectHeader');
Hope that helps!
Just stumbled upon this post asking the same question. Great solution. An even easier way to customize certain parts of a genesis powered site is using the Genesis Simple Hooks plugin. Just do a search, it's awesome.

create own wordpress theme (tewnty ten as base)

i have to create a customized wordpress theme.
i still don't how it should look like, so viewed the twenty ten theme files to figured out what i could customize.
so i searched for the menu build function in the header.php file and found this
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
but i cant figure out what this function does...where is written how the menu is created with html tags like <ul>, <li> and so on...
i wan't to edit the html code!
regards,
peter
Check out the documentation for wp_nav_menu in the codex. It's a menu system added to WordPress back at version 2.9 (I believe). If you navigate in your dashboard to Appearance -> Menus, you can customize it through an interface. In Twenty Ten, the fallback is wp_page_menu, which displays a list of your pages. Should you prefer to build yours by hand and hard code it into the theme (not advisable, but possible) just delete the relevant code and replace it with your own HTML.
My adviice is to look into the Menu interface, create a menu, assign it to the theme position 'primary', and go from there with a properly configurable and WP-driven menu.

How to call different different menus at same page in WordPress?

I am using WordPress 3.0.4. I have created approximate 10 page through admin from
Dashboard->Pages->Add New->Update
After that I have created two menu from Dashboard->Appearance->Menu->
The first menu name is header-top-navigation. Second menu name is header-bottom-navigation
After that check the page and add to menu which I need in top header (header-top-navigation) and other pages added to (header-bottom-navigation).
How to call these different menu on frontend?
Use wp_nav_menu() in your theme files.
To insert the menu header-top-navigation
<?php wp_nav_menu( array('menu' => 'header-top-navigation' )); ?>

Resources