Goal:
I need the element on the menu/nav links to be highlighted based on the current active page. Example - viewing "About" page will highlight the "About" item on the menu.
What I've tried:
highlight active element based on active page made the most sense but:
It's not adding the class based on page being viewed. I added the variable on the .php template file and the Wordpress page created from dashboard itself but both don't work.
Any suggestions on how to accomplish this?
Wordpress Dashboard Page: About
custom template file: About.php
Menu items:
<div>
<a class="(add class here based on page url)">About</a>
<a class="(add class here based on page url)">Blog</a>
<a class="(add class here based on page url)">Products</a>
<a class="(add class here based on page url)">Contact</a>
<div>
You can try with below:
<?php
global $post;
// add 'post_name' to the $post_class
$post_class = $post->post_name;
?>
<div>
<a class="<?php echo $post_class; ?>_page">item</a>
<a>item</a>
<a>item</a>
<a>item</a>
<div>
On the $post_class you will get the current page name so the class will get based on page name.
Thanks!
Related
I'm trying to create a wordpress website with some information on the page with displaying data from the database. So, I have the home page which has some information to display. I want to display the data right below this information on the home page. So, I performed the following steps:
1) Created a block on the new page and enter the information for the home page
2) Inserted data on the database
3) Created a publications.php page and saved it on the themes folder as Publication template
4) Installed InsertPages plugin on wordpress
5) Created a new page with title and template set as Publication
6) Then, added a new block below the block from 1) in the Home page
The code looks like below:
<?php
/**
* Template Name: Publications
* The template used for displaying publications
*/
?>
<div class="pubications">
<ul class="collection">
<?php
global $wpdb;
$publications = $wpdb->get_results("SELECT * FROM `cidhi_publications` ORDER by Year DESC LIMIT 12;");
<div class="content">
foreach($publications as $publication){
echo "<li class='collection-item avatar'><a href='https://doi.org/".$publication->doi."'>";
echo "<img src='/cidhi/wp-content/uploads/2019/11/".$publication->image_name."' alt='' class='circle'>";
echo "<span class='title'>".$publication->Title."</span>";
echo "<p>".$publication->Authors."</p>";
echo "<a href='#!' class='secondary-content'>".$publication->Year."</a>";
echo "</a></li>";
}
</div>
?>
</ul>
</div>
If I only open the page as follows: http://localhost://wp/publications, it shows the data but without the theme formatting but only as plain HTML.
But, if I open the main home page, where this page is inserted to the home page, I only see the title not the content. I also checked the settings in "InsertPages" Plugin and made sure that "Display" section has "All" selected
This is the first time I'm working on wordpress so any direction can be very helpful. I"m using the most recent version of wordpress
Your Publications template needs to call the WordPress header and footer files.
So, above your HTML, add:
<?php get_header(); ?>
And below it, add:
<?php get_footer(); ?>
I created Menu in Wordpress Dashboard and gave that to the navigation menu.
It seems cool, but I need to get the link of each page to a href element in my HTML document and after clicking change the URL on certain site... probably based on "slug".
I get my menu to variable in that way:
$menu = wp_get_nav_menu_items('main-navigation');
and what exactly change or add in that code??
<?php foreach($menu as $item) :?>
<a class="nav-link" href="<?php the_permalink()?>">
Does someone have a recommendation for that?
Thank you
I would need to reach a custom section by page id (or PageModel Object), but I don't find a way to get the FrontendTemplate. I would like to use it in a dropdown navigation to echo a custom section of the hovered (parent) page.
If somebody will search for, the answer is:
<?php
$articles = \ArticleModel::findPublishedByPidAndColumn($id, $column_name);
echo static::getArticle($articles[0]); // for ex. the first article
?>
I did find one topic that sort of touched base on this but if there is a better link please advise.
I have a self hosted Wordpress website set up typically for a static home page and a separate page that shows recent posts called "Reviews". I need to write posts under a category "Recent News" that would be excluded from the recent post and shown on their own page, a second blog page.
The Codex tells me to add this to the index.php to exclude the category "recent-news":
<?php
if (is_home()) {
query_posts("cat=-3");
}
?>
with 3 being "recent-news". This does nothing no matter where I place it on the page. It still shows up with the recent posts. I'm guessing I'm in the wrong section for excluding categories in the Codex.
How do I exclude a category from recent posts, add a new page called "Recent News" and have it only show posts from the 'recent-news" category.
or have I climbed down a rabbit hole...
you can do it like this: edit your index.php page or create a custom template and then create a page (say "Front Page" ) and assign this template to it. In this template, copy your index.php code or if you feel confident simply create your template and include this code:
<?php if (have_posts()) : ?>
<?php $my_query=new WP_Query( 'cat=-3'); while
($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<div class="post">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif;?>
About your second question, simply go to Appearance --> Menu and there you'll see you can add pages but also categories. Simply select the category "Recent News" as a menu element and voilá, now you'll have a page displaying only posts from that category
I do not recommand messing with index.php
I think you should create a page template that will query posts from "Recent News" category.
Then in wordpress create a page and choose the page template you created.
In order to set it as the home page you will have to set it via wordpress configurations.
Wordpress page template
query posts by category
Set static homepage
There is a div element in header.php which I want to show only in post page.
The div should not be visible on home page or 404 page or category or pages or tag page.
It should be only visible post page.
The method I am thinking is using css. The div element will have a class. Let the class be hide-container this class is set to display:none;. . the trick is show another div container in post page.
Like this below code which shows the class in singles.
<div class="hide-container <?php if(is_singular() ) { ?>container<?php } ?>">
The above code will have worked, but it shows the div element on all pages except home page. I only want the div to be displayed in post page.
thanks in advance.
use the is_home() conditional tag
<div class="social-tools <?php if(is_home() ) { ?>container<?php } ?>">
even though its written like that - is_home() shows the posts page
check out this question