Add equal height script and modify plugin - edited WordPress
- SOLVED
Hi, I need two items completed, preferably today.
1. I need equal column height function in a bootstrap based child theme. I have tried this one: http://stackoverflow.com/questions/20272569/bootstrap-3-equal-height-columns-with-jquery-need-assistance-with-the-js
but it doesn't get the correct child or parent and applies the heights randomly to h2 and div tags inside the content area.
Also, I would prefer a different class rather than prepending eq- to all of the bootstrap col-md classes. That way I can add it where I want and not have to change bootstrap.
2. I have installed the woothemes - "Our Team" plugin and it gives instructions for adding a new field but where to put the code on the front end is never explained anywhere clearly - it just says front end. I want to display an excerpt field on the main "about us" page rather than the full content for the team member so that I can more easily control content size on that page.
responders need to be familiar with bootstrap and child themes. Also I am not compiling .Less files (not that deep into it yet) So please don't go that route.
Edit:
Hey anyone who is still reading this one - I have been struggling with plugins and bootstrap - will increase the prize money if someone is available and reliable to help me finish this theme - Theme and plugins are about 80% done but I have a family emergency to deal with and need to complete this so I can take care of that.
Answers (4)
Dbranes answers:
I think there is a typo on the FAQ page:
Try this instead
add_filter( 'woothemes_our_team_member_fields', 'my_new_fields' );
function my_new_fields( $fields ) {
$fields['misc'] = array(
'name' => __( 'Misc Detail', 'woothemes-our-team' ),
'description' => __( 'Some miscellaneous detail', 'woothemes-our-team' ),
'type' => 'text',
'default' => '',
'section' => 'info'
);
return $fields;
}
i.e. use the filter <em>woothemes_our_team_member_fields </em>instead of <em>woothemes_our_member_fields</em>.
Connie Taylor comments:
Great - that worked, and where exactly on the "front end" do I put the other piece of code. What file and is there a specific place in the file that it goes.
Dbranes comments:
To display this on the "front-end" you should then add this (to your <em>functions.php</em> file in the current theme directory)
add_filter( 'woothemes_our_member_fields_display', 'my_new_fields_display' );
function my_new_fields_display( $member_fields ) {
global $post;
if ( '' != $post->misc ) {
$member_fields .= '<li class="misc">' . $post->misc . '</li><!--/.misc-->' . "\n";
}
return $member_fields;
}
And you could then create a page and put a shortcode
[woothemes_our_team]
in the content editor.
Or you could add this line
<?php do_action( 'woothemes_our_team' ); ?>
directly to your template file, where you want to display the team info.
Dbranes comments:
If you want to change the description length you can use the <em>woothemes_our_team_content</em> filter.
Here is an example to display only 150 characters of the description:
add_filter( 'woothemes_our_team_content', 'short_bio' );
function short_bio( $content )
{
if( 150 < mb_strlen( $content ) )
{
return mb_substr( $content, 0, 150 );
}
return $content;
}
where you can add this into your <em>functions.php</em> file.
Connie Taylor comments:
woohoo - that did it. Tried to change the custom field to a textarea and it hit my server so many times that my IP got blocked. - you solved this one for me.
Dbranes comments:
Great to hear it's working for you.
You should consider telling the plugin authors know about the documentation error ;-)
Duncan O'Neill answers:
Hi,
for 1) there is a CSS solution;
a) add border-spacing:15px 0; to the outer container. The container already has display:table via its row class. Add border-spacing to the outer container.
b) add display:table-cell; to the inner containers you want at a consistent height.
c) Add the backgrounds, and apply the border-radius settings to the inner containers.
.container .row .dmbs-left, .
container .row .dmbs-main,
.container .row .dmbs-right {
display: table-cell;
float: none;
}
.dmbs-content {
/* the container has display:table via its .row class */
border-spacing:15px 0;
}
#mainwrap .row .dmbs-left,
#mainwrap .row .dmbs-right {
background: #ffffff;
border-radius:7px;
padding:0px 0.5em !important;
}
You can see it in action at [[LINK href="http://www.brandmagik.com/trendfocus/?page_id=2"]]http://www.brandmagik.com/trendfocus/?page_id=2[[/LINK]] and [[LINK href="http://www.brandmagik.com/trendfocus/?page_id=147"]]http://www.brandmagik.com/trendfocus/?page_id=147[[/LINK]]
best,
Connie Taylor comments:
That' perfect Duncan and I sill have my rounded corners. Thank you very much.
Arnav Joy answers:
for point 2 can you show what plugin says
Connie Taylor comments:
The instructions for adding a new field on this page: http://wordpress.org/plugins/our-team-by-woothemes/faq/
The filter does get added from the functions file but does not show up in the add/edit team members page. Also I want to remove the description field and replace it with the excerpt field created and still have the twitter link below. If adding the field works, I would like to also add a facebook link at the bottom as well.
Connie Taylor comments:
amend that to "remove the description on the widget display"
zebra webdesigns answers:
Hello Taylor
you can use the one true layout method without using any jquery ...just with plain CSS you can do the magic.
I did used it for a project and it works as like you desired.
You need to use the media query if you need to use responsive mode for the columns.I can help you with that.
Here is the JSfiddle version
http://jsfiddle.net/p2ay2/
The trick is to use padding-bottom:999px; margin-bottom:-999px;
Just try it and let me know if you need any clarification.
But this is the best method
To know more about this use the following article
http://css-tricks.com/fluid-width-equal-height-columns/
zebra webdesigns comments:
If you can provide the URL , I can implement it and show it to you. which wont affect the default bootstrap functionality
Connie Taylor comments:
I have tried this method and have used it before but for some reason with the bootstrap containers it isn't working and the padding shows anyway and pushes the lower content down, even when I put !important on the negative margin.
zebra webdesigns comments:
Can you provide me the URL of the page you are referring ...can you send PM to me I will take a look for you to reslove it
zebra webdesigns comments:
Can you provide me the URL of the page you are referring ...can you send PM to me I will take a look for you to resolve it
Connie Taylor comments:
http://www.brandmagik.com/trendfocus/?page_id=2 I put in inner div inside the sidebar columns so I could get the rounded corners but want the main and the sidebar boxes to all be the same height.
Please note this is still in dev and not all the pages are done.
Connie Taylor comments:
I'm sorry - forgot you have to be logged in to see those columns - try this one: http://www.brandmagik.com/trendfocus/?page_id=147
zebra webdesigns comments:
Hello Taylor
I have made it work but with little tweak..
Just see the result in the picture.
Only thing you can notice is there wont be border radius at the bottom.. But if you like this its easy to implement.
I will supply the details for you