<div class="row">
<div class="large-12 columns">
<div class="row collapse featured-option">
<input id="featured" name="featured" type="checkbox" style="display: none;" <?php echo esc_attr( $featured_disabled ); ?>>
<span class="custom checkbox <?php echo esc_attr( $featured_disabled ); ?>"></span> <?php echo sprintf( __( 'Feature Proposal %s', APP_TD ), sprintf( _n( '(1 credit)', '(%d credits)', hrb_required_credits_to('feature_proposal'), APP_TD ), hrb_required_credits_to('feature_proposal') ) ); ?>
</div>
</div>
</div>
I'm trying to edit this wordpress theme code to use it for my own website.
But I don't know why style="display: none;" is needed here.
When I erase this style element, I get checkbox on the screen
but the functions are not working as it should be.
What's wrong with this? Why need "display: none"?
Please help
In this instance it is simply just hiding the checkbox. When
style = "display:none;"
is used, the page will be displayed as if the item does not exist. Meaning the layout of the page will not show a "hole" or something where that item is missing. In other words, the layout will not be affected by this.
The other way to hide something would be with,
style = "visibility:hidden;"
However, the page layout will be affected and the hidden item will still take up the same space.
Depending on what was trying to be accomplished, the checkbox could be hidden for different reasons. It's possible that the programmer of this code wanted to hide this checkbox by default and then show it later on after certain events occurred. Additionally, there are times when it is best to show and hide objects as you need them or don't need them rather than constantly recreating or deleting them.
Related
I'm creating a FAQ page on my wordpress site. I am using bootstrap 4.0's collapse component and ACF Pro to build the page.
On the back end, an admin can add questions and answers. The answers are to be hidden on the front end until a user clicks on the question to toggle the answer. Originally the answer field was a text area. All was working great! But when I changed the answer field type to be a WYSIWYG editor, the collapse functionality stopped working altoghether and the answers are not hidden or collapsible. Does anyone know how to solve this issue?
Thanks in advance, code snippet below.
<?php while( have_rows('topic_information') ): the_row();
$question = get_sub_field('question');
$answer = get_sub_field('answer');
$counter++;
?>
<div class="question-btn collapsed" data-toggle="collapse" data-target="#<?php echo $counter; ?>" aria-expanded="false" aria-controls="<?php echo $counter; ?>">
<div class="question">
<p class="question-text">
<?php echo $question; ?>
</p>
<div class="toggle-status"></div>
</div>
<div class="answer">
<p id="<?php echo $counter; ?>" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><?php echo $answer; ?>
</p>
</div> <!--.answer-->
</div> <!--.question-btn-->
<?php endwhile; ?> <!-- WHILE ( have_rows('topic_information') -->
I've experienced this with bootstrap when the bootstrap.js, bootstrapcdn or bootstrap.min.js is referenced more than once on a page. For me the plugin I was using was also importing or referencing its own bootstrap.js or bootstrap.min.js file which it why it was happening to me.
I would try removing the bootstrap.js or bootstrap.min.js reference from the ACF Pro plugin if possible or try removing it from your project (since your plugin is already referencing it) to see if works.
If that doesn't work you might want to try doing it from javascript since it sounds like the faq is dynamically generated:
bootstrap collapse not working when creating dyanmically
Good luck
I'm trying to get the data from a post using the following snippet:
<div class="marquee-container row marquee-row">
<?php
$post = get_post(415);
if(isset($post->post_status) && $post->post_status == 'publish') {
echo apply_filters('the_content', $post->post_content);
}
?>
</div>
But when I inspect the element, I found some unwanted <p></p> tags which are unnecessarily introducing gaps.
<div class="marquee-container row marquee-row">
<p> </p>
<div class="some-class">Content from the post</div>
<p></p>
</div>
How to avoid this unwanted tags ?
Note: This tags are not being inserted to table, being introduce while trying to get the post.
Thank you for your help.
can you please check that content from admin side in text tab(Where you add the contents for page or post)? If you have pressed Enter key then it will take that as <p></p> tag in content.
Remove blank spaces from editor if it is not necessary.
I wanted to create specially styled columns, but make it easy for the client to still edit the content of the column.. so I created my own shortcodes to setup the row and columns inside. (This is a custom wordpress template I created for a specific client).
Here is the code in my function.php for the two shortcodes 'member-row' & 'member':
add_shortcode('member-row', function ($content = null) {
return '<div class="row">
<br />'.do_shortcode($content).'</div>';
});
add_shortcode('member', function ($atts, $content = null) {
extract(shortcode_atts(array(
'color' => 'white',
), $atts));
return '<div class="col-md-6 col-sm-6 col-xs-12 md-margin-bottom-40">
<div class="member-col funny-boxes funny-boxes-top-'.$color.'">'.do_shortcode($content).'</div>
</div>';
});
I've also added the .do_shortcode($content). on the inner-nested 'member' column shortcode - just in case the client wants to add other shortcodes inside of each column. (Note: The problem still occurs even if I change the 'member' shortcode to just use .$content.)
Here is the code I entered in the text side of the wordpress page editor
[member-row]
[member color="gold"]
<img class="aligncenter img-responsive" src="http://localhost/test/testWP/wp-content/uploads/2015/07/logo1.jpg" alt="logo" />
<strong>Company 1</strong>
Address
Telephone
www.example1.com
[/member][member color="yellow"]
<img class="aligncenter img-responsive" src="http://localhost/test/testWP/wp-content/uploads/2015/07/logo2.jpg" alt="logo" />
<strong>Company 2</strong>
Address
Telephone
www.example2.com
[/member]
[/member-row]
When I save, and click on 'view page', the section where this has been added doesn't display anything.
This is the html code that is produced:
<div class="row">
<br /></div>
So it is only executing the 'member-row' shortcode, and not the nested 'member' shortcode columns.
This is the correct html code I was expecting:
<div class="row">
<br />
<div class="col-md-6 col-sm-6 col-xs-12 md-margin-bottom-40">
<div class="member-col funny-boxes funny-boxes-top-gold">
<img class="aligncenter img-responsive" src="http://localhost/test/testWP/wp-content/uploads/2015/07/logo1.jpg" alt="logo" />
<strong>Company 1</strong>
Address
Telephone
www.example1.com
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 md-margin-bottom-40">
<div class="member-col funny-boxes funny-boxes-top-yellow">
<img class="aligncenter img-responsive" src="http://localhost/test/testWP/wp-content/uploads/2015/07/logo2.jpg" alt="logo" />
<strong>Company 2</strong>
Address
Telephone
www.example2.com
</div>
</div>
</div>
When I just remove the surrounding [member-row] and [/member-row] shortcodes from the editor window, then the 'member' column shortcode does show up properly on the webpage.. so it appears it is just being inside of the 'member-row' shortcode that causes the problem.
Note: I did try adding the add_filter('the_content', 'do_shortcode', 10); line to the bottom of my function.php file, but it didn't seem to make any difference, so I removed it.
Hopefully I have just made some typo error.. Any help will be greatly appreciated!
Thanks.
I figured out the problem.
I had to add $atts to the function for the member-row shortcode as follows:
add_shortcode('member-row', function ($atts, $content = null) {
return '<div class="row">
<br />'.do_shortcode($content).'</div>';
});
It now works as expected!!
I am not sure why I needed to add $atts, as this shortcode is not passing attributes or setting default ones, but it appears you need it if you are going to use enclosing shortcode with $content. (Maybe it is needed because $content is defined as the 'second' parameter???)
I just read in the WP Codex for shortcode api that
"Three parameters {$atts, $content, $tag} are passed to the shortcode
callback function. You can choose to use any number of them including
none of them."
So that seems to me that you could use the $content by itself... but as I just proved that $content can't be by itself - I am still unsure of the reason that my solution worked for me. (Just glad it did!)
If anyone knows the rule or reason for why the $atts is needed to make this work, I would appreciate the comment - to clarify this for myself, and anyone else that has the same problem.
Thanks!
I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
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>';
}