I can get a list of sidebars by going through wp_registered_sidebars
<?php foreach ( $GLOBALS['wp_registered_sidebars'] as $sidebar ) { ?>
<input value="<?php echo ucwords( $sidebar['id'] ); ?>">
<?php echo ucwords( $sidebar['name'] ); ?>
<?php } ?>
And I can output the sidebar with
<?php echo dynamic_sidebar( ucwords( $sidebar['id'] )); ?>
But I need to output the HTML content out.
I am trying to insert the sidebar in a menu (megamenu), and I am following this post on how to get the metabox appear in my Menus page. I've done it all, I can get the name, id of the sidebar, everything. It's just when I try to add HTML content in my description field of the menu, I don't know how. If I put the dynamic_sidebar I'll get the actuall sidebar in my menus page, and that's not what I want.
So any help is appreciated.
Is it possible to do it with ob_start() function?
EDIT
I tried with:
<?php
ob_start();
dynamic_sidebar($sidebar['id']);
$sidebar_html = ob_get_contents();
ob_end_clean();
?>
But when I echo that variable inside the hidden input field
<input type="hidden" class="menu-item-description" name="menu-item[-1][menu-item-description]" value="<?php echo $sidebar_html; ?>">
I still get the html out. I just need it as a text html that won't be 'executed'.
Ok, htmlentities() did it
<input type="hidden" class="menu-item-description" name="menu-item[-1][menu-item-description]" value="<?php echo htmlentities($sidebar_html); ?>">
Related
Is it possible to add anchor links to Advanced Custom Fields?
I've created a page that shows images that when you click on the image a lightbox opens with the description. I have it all working without using Advanced Custom Fields but I'm trying to make it user friendly for the client so I added fields for them to just fill in the information and everything is already styled.
The problem is the tabs use an Anchor Link to link to the ID DIV that opens up the lightbox with the description - it works but not when I use the fields I created.
I created a url field for them to fill in the #div name for the anchor url and a field for the name of the #div for the anchor to link to. (Hope that makes sense!)
I'm also using repeater fields so they can add/delete flavors.
This is the code I am using -
<?php
// check if the repeater field has rows of data
if( have_rows('flavors') ):
// loop through the rows of data
while ( have_rows('flavors') ) : the_row();
// display a sub field value
?>
<li>
******** This is the anchor link *************
<?php
$link = get_sub_field('flavor_name');
if( $link ): ?>
<a href="<?php echo esc_url( $link ); ?>" class="wplightbox" data-width=900 data-height=800>
<?php
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
<?php if( get_sub_field('beer_title') ): ?>
<?php the_sub_field('beer_title'); ?>
<?php endif; ?>
</a>
<?php endif; ?>
********* This is the div that needs to pick up the anchor name typed in as the Div ID name *****
<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">
<?php the_sub_field('flavor_name'); ?>
<?php endif; ?>
<div class="flavors">
<div class="flavorsleft">
<?php
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="flavorsright">
<h3><?php if( get_sub_field('beer_title') ): ?>
<?php the_sub_field('beer_title'); ?>
<?php endif; ?></h3>
<div class="percent">
<?php if( get_sub_field('alcohol_percentage') ): ?>
<?php the_sub_field('alcohol_percentage'); ?>
<?php endif; ?>
</div>
<?php if( get_sub_field('beer_description') ): ?>
<?php the_sub_field('beer_description'); ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>```
This is the dev site where it's at - https://headley.tfm-dev.com/beers
The page is working right now because it's currently built not using the ACF fields (I took them off for now and rebuilt it) but I would like to change it so the owner can make changes.
Thank you!
[![Screenshot of Advanced Custom Fields][1]][1]
[![Screenshot of Advanced Custom Fields Redone][2]][2]
[1]: https://i.stack.imgur.com/NeKYe.jpg
[2]: https://i.stack.imgur.com/uUN0G.png
On your dev site in the source code the anchor href is an id but you are using a page link field to match to the get_sub_field('flavor_bottom_section_name') so this would return a url so won't work.
Correct me if I'm wrong but you are using 2 repeaters, does that not reply on each of them to match up to each other? I would do this wiht one repeater field and you'd be able to avoid mistakes being made and would probably require less fields e.g you would only need one field for the anchor and one field for the div. You can have 1 repeater field but you can have 2 separate loops through the same repeater just getting what you want out of it on each loop.
ADDITIONAL
This line of code nothing is being ouput into the id=""
<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">
I think you need to echo the sub field like this maybe
<div id="<?php echo get_sub_field('flavor_name') ?>" style="display: none;">
Yon can see in the red boxes I've marked that the id attribute is empty on the div, even if I change it locally in the inspector it works, not sure why you got an error earlier but I also think that the value in your field might have # before it but the # is only only required in the href not the id.
Final Solution (Hopefully)
Ok I used your code and I see why you were getting the critical error this:
<a href="#<?php if( get_sub_field('beer_title') ): ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
<?php endif; ?>
Needs to change to this:
<a href="#<?php the_sub_field('beer_title'); ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
You have and if in there which isn't needed so removing that and echoing the sub field fixes it, we just needed to remove the endif also. I should have asked what the error was originally.
What you are saying here is
<a href="#
// IF THERE IS A SUB FIELD VALUE FOR BEER TITLE
<?php if( get_sub_field('beer_title') ): ?>"
// OUTPUT THIS
class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
get_sub_field() doesn't output anything it has to be echoed or else use the_sub_field() instead.
The problem on a Wordpress site is that even though links are set properly in the WP admin area (see attachment 1) they do not work once the site has been published. When using inspect element it kind of shows the problem (see attachment 2).
Clicking and opening the links within the admin area is working just fine. Other links on the website work correctly. What is missing here?
Code in WP template:
<?php if ($section['link_to_doc']) : ?>
<?php foreach ($section['link_to_doc'] as $link) : ?>
<div>
<a href="<?php echo $link['link_to_doc'] ?>" class="btn-txt">
<?php echo $link['text_of_link'] ?>
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Repeater fields:
It seems the ACF link object is not returning the right output in the href because of an error in how the links where coded.
Usually you'll want something like this:
$link = get_field('link');
<a href="<?= $link['url']) ?>"<?= $link['title'] ?></a>
That's providing the ACF field is not nested, and the field name is 'link' and there's just one.
Amended code (presumably):
<?php if ($section['link_to_doc']) : ?>
<?php foreach ($section['link_to_doc'] as $link) : ?>
<div>
<a href="<?= $link['url'] ?>" class="btn-txt">
<?= $link['text_of_link'] ?>
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Even thought the whole concept is not the best, as you wouldn't create an extra custom field to put the text of the link since you can use $link['title'] for that but yeah...
Edit 2:
According to your screenshot edit the a to be:
<a href="<?= $link['link'] ?>" class="btn-txt">
<?= $link['text_of_link'] ?>
</a>
I need help to create space between two buttons on my blog, one for previous post, one for next. Both buttons appear one next to another, i need to be in the right and left corner. This is the code for them:
<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<a class="post-nav-prev" title="<?php _e('Previous post:', 'baskerville'); echo ' ' . esc_attr( get_the_title($prev_post) ); ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php _e('Previous post', 'baskerville'); ?></a>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
<a class="post-nav-next" title="<?php _e('Next post:', 'baskerville') ; echo ' ' . esc_attr( get_the_title($next_post) ); ?>" href="<?php echo get_permalink( $next_post->ID ); ?>"><?php _e('Next post', 'baskerville'); ?></a>
<?php endif; ?>
<?php edit_post_link( __('Edit post', 'baskerville')); ?>
<div class="clear"></div>
I honestly tried to run your code snippet locally, but just couldn't get it to work so I will do my best and help you achieve what you want.
But before I get started, make sure you don't post PHP snippets in a post that has nothing to do with PHP. If you were to only post the HTML code, it would have made things much easier.
So I see you have two a elements which you are using as buttons. You don't want them next to each other but "in the right and left corner" Although I'm not sure whether you mean the corners of the page or the corners of where those buttons might or might not be, here is how I would tackle this problem.
#navigationControls{
width:300px;
height:20px;
}
<div id="navigationControls">
<a class="post-nav-prev" title="test">Previous</a>
<a class="post-nav-next" style="float:right" title="test">Next</a>
</div>
By putting them in a container with a defined width, we can float the next button to the right of the container. You can modify the containers width to how big you want it to be.
Please let me know if my answer got you in the right direction and if you need any help!
I added HTML to my functions.php. After the
<?PHP get_sidebar(); ?>
and before
<?php get_footer(); ?>
while the CSS is added in my style.css Child theme. The result is my box of HTML under the main content on my home page instead of being on the right side of the main content. I am hoping someone may be able to help me?
I tried to add my HTML and CSS but it wouldn't let me post it.
I've spent about 3 hours on this by myself so far. First I tried reformatting a feature provided by the Minamaze Wordpress Theme, but I figured I may as well just right my own code as it may be easier to implement.
I fixed it! Here's how: The real problem was the fact that my front page articles were individually grouped instead of wrapped in a class. I found the index.php file (the copy from my child theme) and surrounded the homepage content in a named div class. Below is code from my index file. Put a div wrapper class between get_header and the php line below it. Close the div before the get_sidebar.
get_header(); ?>
<?php while( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('blog-article'); ?>>
<?php if ( has_post_thumbnail() ) {
$column1 = ' two_fifth';
$column2 = ' three_fifth last';
} else {
$column1 = NULL;
$column2 = NULL;
} ?>
<header class="entry-header<?php echo $column1; ?>">
<?php thinkup_input_blogimage(); ?>
</header>
<div class="entry-content<?php echo $column2; ?>">
<?php think_input_blogtitle(); ?>
<?php thinkup_input_blogmeta(); ?>
<?php thinkup_input_blogtext(); ?>
</div>
<div class="clearboth"></div>
</article><!-- #post-<?php get_the_ID(); ?> -->
<?php endwhile; ?>
<?php thinkup_input_pagination(); ?>
<?php else: ?>
<?php get_template_part( 'no-results', 'archive' ); ?>
<?php endif; ?>
?php get_sidebar(); ?>
Under get_sidebar, you can put in your HTML code for YOUR sidebar that you wish to add.
Once I wrapped them into the php into it's own class and wrapped my sidebar boxes into their own class, I used float: left and right respectively in my CSS child theme, successfully creating a sidebar. I also made their widths percentages to increase usability. You can use this same method in the content-page.php, content-single.php, if you wish to add a side bar to other pages besides just the home screen.
I am just wondering if there is anyway to make it so that the css class of a DIV can be changed by the selection of a tick box.
For example I have this checkbox HTML
<input type="checkbox" name="size" id="portrait1" value="portrait"> Portrait
<input type="checkbox" name="size" id="landscape1" value="landscape"> Landscape
and then this div (used on concrete5 so might make no sense to some)
<div class="" style="display: none;">
<?php echo $form->label('content', t('Title'))
?>
<?php echo $form->text('content')
?>
<br>
<br>
<?php echo $al -> file('ccm-b-file', 'fID', t('Choose File'), $bf); ?>
<?php $bf = File::getByID($fID); ?>
<br>
<?php echo $form->label('UserURL', t('URL:'))
?>
<?php echo $form->text('UserURL')
?>
</div>
but i want it so that when I click portrait, for example, the class of that div changes to say portrait, any way of doing this?
You can do this with a bit of JavaScript.
You'll need to bind an event handler to your checkbox (that is, tell the browser to run a chunk of code when a certain event happens: the event in question being changing the state of the checkbox.)
(Note: I am using jQuery in my example for brevity.)
$("checkbox#portrait1").bind('change', function() {
$("div").toggleClass('portrait', $(this).is(":checked"))
});
The above example binds the given function to the "change" event of the given selector (input#portrait1, i.e. input element with the ID of portrait1).
When that event happens, it then "toggles" the class portrait on the div element based on whether the second argument is true or not, meaning if "this" (the checkbox input) is checked, then the class portrait will be added to that div (if not, remove the class of portrait).
Try this....
$('input[name=size]').click(function(){
if($(this).is(':checked'))
$('div').addClass('test')
else
$('div').removeClass('test')
})
Always have a default id for div like
<div class="" style="display: none;" id="a1">
<?php echo $form->label('content', t('Title'))
?>
<?php echo $form->text('content')
?>
<br>
<br>
<?php echo $al -> file('ccm-b-file', 'fID', t('Choose File'), $bf); ?>
<?php $bf = File::getByID($fID); ?>
<br>
<?php echo $form->label('UserURL', t('URL:'))
?>
<?php echo $form->text('UserURL')
?>
</div>
and in javascript
if(document.getElementById("portrait1").checked == true)
{
document.getElementById("a1").class="portrait";
}
else if(document.getElementById("landscape").checked == true)
{
document.getElementById("a1").class="landscape";
}