Custom Navigation and Header Area in Genesis Framework - wordpress

I'm trying to customize the navigation and header region of my Genesis 2 theme. Here is the code I'm using:
/* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
function new_header(){ ?>
<div id="title-area">
<div id="new-title">
<h1>new Title</h1>
</div>
<div id="new-nav">
<nav class="nav-primary" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><div class="wrap">
<?php
add_action( 'genesis_do_nav' );
?></div>
</nav>
</div>
<div id="new-search">
<p>Search Box will need to go in here</p>
</div>
</div>
<?php
}
add_action( 'genesis_before_header', 'new_header' );
The title is printing out fine, and the paragraph where I will want to add my search box is printing fine too. HOwever, for some reason I am not getting any output for my menu.
What am I missing? THere is nothing being printed at all when I inspect the element.
Thanks in advance.

Couldn't you alter the CSS of each of these elements the default way Genesis provides it? The only thing I see that is different from the default way is that you want a search box underneath the navigation.
If that's the case, then just add the function for the search box and position it after the nav. For example check below
add_action('genesis_after_header', 'move_my_nav');
function move_my_nav() {
echo '<div id="new-search">';
echo '<p>Search Box will need to go in here</p>';
echo '</div>';
}

Related

Adding CSS to module_invoke() D7

How will I add a custom CSS to module_invoke() function in Drupal 7? I have superfish menu and I can get this to place to a right regions in my page that's why I'm planning to invoke it in my page and set a right css for this,
here's my code
<nav id="customMenu" class="collapse navbar-collapse">
<div id="navigation"><div class="section">
<?php
$block = module_invoke('superfish', 'block_view', '2');
print render($block['content']);
?>
</div></div>
</nav>
Any Idea?
There are 2 ways:
By using '#attaching' property of element:
$block['content']['#attached']['css'][] = drupal_get_path('module', 'my_module_name') . '/css/my_module_name.css';
By using drupal_add_css():
drupal_add_css(drupal_get_path('module', 'my_module_name') . '/css/my_module_name.css');

wordpress apply_filter values are not coming inline

I am using follwing code in my wordpress custom theme template
<p id="news"> <?php echo apply_filters('the_content',$myNews)?></p>;
And the desired output should be like this
<p id="news"> Herer goes my news content from $myNewsvariable </p>
But i am getting output like this
<p id="news"></p>Here goes my news content from $myNewsvariable
Please tell me how i can fix this
the_content function prints out content by default. So there is no need to do a duplicate echo before apply_filters.
Also you can apply your filter to get_the_content:
<?php echo apply_filters('get_the_content', $myNews); ?>

Wordpress, build a template for a post

I would like to know how can I define a post template and adding automatically the html layout when we are creating a post?
Do I have to use custom fields?
For example:
Post content:
Title
Description 1
Description 2
With links and social media
Html layout result:
<h1 class="work-title">Title</h1>
<div class="description">Description 1</div>
<div class="description">Description 2</div>
<div class="details">With links and social media</div>
</div>
Thanks
You could alter the output of the function the_content() by using (in functions.php) something like:
function alter_content($content) {
// Alter the $content variable here
return $content;
}
add_filter( 'the_content', 'alter_content', 6);
Which will alter the content before the paragraphs are added. And if you don't want paragraphs at all use:
remove_filter('the_content', 'wpautop');
Check out the codex page on apply_filters() for more info on the function.

WordPress: Setting up a page that uses post images to link to post category

I came across this site: http://www.jfletcherdesign.com.
I want to replicate how the home page shows the featured image of all of his posts and that when you click on the image you drill down into in the specific post. I also want to replicate how you are able to click forward and next with an image to the corresponding post within a category.
Can someone please point me in the right direction for setting up this functionality?
Bonus points if you can point me to the jQuery plugin that is being used for the rollover effect on his category page.
Thanks!
That site is based on the Imbalance theme by WPShower. It's a free theme so you can download it and check out all the source code. That should answer your first question.
To get images that act as pagination to the previous and next posts all you need to do is use the get_adjacent_post function. You can use something like the code below to set it up to link an image. Stick it in the bottom of your single.php or wherever you want the pagination to appear.
<?php
$prev_post = get_adjacent_post(true, '', true);
$next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
<a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
<a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>
Now for the jQuery rollover, it is pretty simple:
$(document).ready(function() {
$('.article').mouseenter(function() {
$(this).find('.article-over').show();
});
$('.article').mouseleave(function() {
$(this).find('.article-over').hide();
});
$('.article').hover(
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 0.3);
},
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 1);
}
);
});
Which acts on the following HTML markup generated by the theme:
<li class="article li_col1" id="post-1234">
<div class="preview">
<img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post">
</div>
<div class="article-over">
<h2>Cool Post</h2>
<div class="the-excerpt">
<p>Blah blah blah this is a post excerpt...</p>
</div>
</div>
</li>
So basically when you first go to the site, for all the items except the first, all you see is the .preview div that holds the category image. The .article-over div is absolutely positioned over the .preview div but has a style of display:none so that you can't see it.
When the mouseenter event is fired, the .article-over div is displayed via show(), and the image inside .preview fades out to an opacity of 0.3 allowing you to see the .preview div's black background behind it. When the mouse leaves, .article-over is hidden, and the .preview image fades back to fully opaque.
If you're still stuck let me know and I'll try to explain further.

Post navigation code

I use this code for navigation in my front page:
<h13><div class="navigation">
<div class="next-posts">
<div id="image_left"><?php next_posts_link('<img src="IMG URL"/>') ?></div>
<div id="posts_left"><h12><?php next_posts_link('Older Stuff') ?></h12></div>
</div>
<div class="prev-posts">
<div id="posts_right"><h12><?php previous_posts_link('Newer Stuff') ?></h12></div>
<div id="image_right"><?php previous_posts_link('<img src="IMG URL"/>') ?></div>
</div>
I want the same navigation for my single post view but I can't get it to work, I made the changes for PHP functions but in Codex I only found a vay to display posts from the same category.
Also, I don't want the link to display previous/next post's title, only text that I define.
One last thing, I can't get the image navigation to work at all in single view, but it does work flawlessly in my home page.
This is my code at the moment:
<h13><div class="navigation">
<div class="next-post">
<div id="img_left"><?php next_post_link('<img src="IMG URL"/>') ?></div>
<div id="post_left"><h12><?php next_post_link('%link', 'Next post', TRUE); ?></h12></div>
</div>
<div class="prev-post">
<div id="post_right"><h12><?php previous_post_link('%link', 'Previous post', TRUE); ?></h12></div>
<div id="img_right"><?php previous_post_link('<img src="IMG URL"/>') ?></div>
</div>
h13 and h12? I didn't know headers went up that high!
I'm guessing you already read the Codex Page for the next_post_link() function. But did you make sure to include the call in the loop? Also, try adding in the extra parameters to the functions. Sometimes they get confused.

Resources