How to display three widgets inline horizontally in Wordpress? - html

I'm new in Wordpress in development.
I made one sidebar on my front page
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=> 'Homepage sidebar center',
'id' => 'sidebar-center',
'before_widget' => '<div class="center-links">',
'after_widget' => '</div>',
'before_title' => '<h2 class="center-links-title">',
'after_title' => '</h2>',
));
and I want to display three widgets inline, I have some Image widget witch display images. I try to make and to write in css display: inline but it doesn't work.
Any sugestion? Please!!!
This is my HTML code
<div id="inner-content-links">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage sidebar center') ) : ?>
<?php endif; ?>
</div>

Related

Yii2 Boostrap ActiveForm Horizontal Layout

Good afternoon,
I am new to programming and struggling to understand Yii2 layout with Bootstrap.
What I am after is really simple, so I thought, but I can't seem to get it to remotely work. I want to create a horizontal form with the labels in front of each input and be able to control to the width of each input.
In my current code, I have 2 simple fields, I want the first to span half of the form (col-md-6) and the second should span the totality of the form (col-md-12), but this just isn't working and I don't understand the why so I'm struggling to fix it.
Below is my view
<?php
use yii\helpers\Html;
use yii\helpers\ArrayHelper;;
use yii\bootstrap\ActiveForm; //used to enable bootstrap layout options
/* #var $this yii\web\View */
/* #var $model backend\models\Projects */
/* #var $form yii\widgets\ActiveForm */
?>
<div class="projects-form">
<?php
$form = ActiveForm::begin([
'id'=>$model->formName(),
'layout' => 'horizontal',
'class' => 'form-horizontal',
'fieldConfig' => [
'enableError' => true,
]
]);
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="form-group row">
<div class="col-md-6">
<?php
echo $form->field(
$model,
'ProjNo'
)->textInput(['maxlength' => true]);
?>
</div>
<div class="col-md-6">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<?php
echo $form->field(
$model,
'ProjName'
)->textInput(['maxlength' => true]);
?>
</div>
</div>
<p></p>
<p></p>
<?php
ActiveForm::end();
?>
</div>
This is the _form view which is called within the create and update views.
What I don't quite get is why the label alignment isn't consistent because I specify a different width for the overall field and why even though I specified col-md-12, which should be full width from my understanding, it only seems to take about half of the available width.
Any help is greatly appreciated!
Thank you.
current example of what is generated
I just want the labels to line up and be able to have fields with different widths. In the above, when I change the class, the labels change alignment.
You can use the template option under the form's fieldConfig option like below to specify the order of the input, label, and error-block, and these settings would be applied throughout the form for all inputs, in below configurations I am placing the label after the input you can change that if you want.
$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
'layout' => 'horizontal' ,
'class' => 'form-horizontal' ,
'fieldConfig' => [
'enableError' => true ,
'template' => '{input}{error}{label}',
] ] );
you can wrap the {label} and {input} with div like
'template' => '<div class="col-sm-6">{input}{error}</div>
<div class="col-sm-3">{label}</div>',
and remove all the extra HTML from your view just wrap the $form->field() with row see below
$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
'layout' => 'horizontal' ,
'class' => 'form-horizontal' ,
'fieldConfig' => [
'enableError' => true ,
'template' => '<div class="col-sm-6">{input}{error}</div>{label}',
] ] );
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
<?php
echo $form->field (
$model , 'ProjNo'
)->textInput ( [ 'maxlength' => true, ] );
?>
</div>
<div class="row">
<?php
echo $form->field (
$model , 'ProjName'
)->textInput ( [ 'maxlength' => true, ] );
?>
</div>
EDIT
as per discussion you do not want equally aligned labels and inputs but instead you want variable inputs and labels within each row and for doing so you need to configure the template part of the input fields separately and it can look like below if i understood correctly
you should configure your form options and field template options like below and remove the extra class applied on the label col-sm-3 by assigning it control-label class manually
$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
'layout' => 'horizontal' ,
'class' => 'form-horizontal' ,
'fieldConfig' => [
'enableError' => true ,
'options' => [
'class' => ''
]
] ] );
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
<?php
echo $form->field (
$model , 'name' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
)->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] )
?>
<?php
echo $form->field (
$model , 'price' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
)->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] );
?>
</div>
<div class="row">
<?php
echo $form->field (
$model , 'product_subcategory' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-10">{input}{error}</div>' , ]
)->textInput ( [ 'maxlength' => true , ] )->label ( null , [ 'class' => 'control-label' ] );
?>
</div>
<?php
echo yii\bootstrap\Html::submitButton ( 'Submit' );
yii\bootstrap\ActiveForm::end ();
Hope this helps you out

Sidebar Content Box not editable

I have built a custom theme for a client some 12 months ago and all was working fine until recently. My client is unable to edit the content in the widgets on his sidebar.
I have tried to add other text widgets to the sidebar and even those are uneditable.
I disabled all the plugins to see if any of those are the culprit and as such made zero difference. Incidentally all of the text widgets are displaying perfectly on the public side of the website but my client is unable to add or edit and text widget in the sidebar.
Here is a screeny showing whats going on...
Many thanks for any advice you can give in this.
Phillip Dews
EDIT
For those that require it. Here is the code from my custom theme....
functions.php
function paradisereloaded_widgets_init() {
register_sidebar( array(
'name' => __( 'Sidebar', 'paradisereloaded' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar.', 'paradisereloaded' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action( 'widgets_init', 'paradisereloaded_widgets_init' );
And now the
sidebar.php
<?php
/**
* The template for the sidebar containing the main widget area
*
* #package WordPress
* #subpackage paradisereloaded
* #since Paradise Reloaded 1.0.0
*/
?>
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .widget-area -->
<?php endif; ?>

additional widget area in wordpress free theme spacious

i want to add another widget area in wordpress spacious theme in the top section in business template just like middle section in the theme which has two widget area for which i have modified the code which is given below :
<?php
if( is_active_sidebar( 'spacious_business_page_top_section_left_half_sidebar' ) ||is_active_sidebar(
'spacious_business_page_top_section_right_half_sidebar' )) {
?>
<!--<div class="clearfix"> -->
<div class="top-one-half">
<?php
// Calling the business page top section left half sidebar if it exists.
if ( !dynamic_sidebar( 'spacious_business_page_top_section_left_half_sidebar' ) ):
endif;
?>
</div>
<div class=top-one half top-one-half-last">
<?php
// Calling the business page middle section right half sidebar if it exists.
if ( !dynamic_sidebar( 'spacious_business_page_top_section_right_half_sidebar' ) ):
endif;
?>
</div>
<div class="clearfix"></div>
<?php
if( is_active_sidebar( 'spacious_business_page_middle_section_left_half_sidebar' ) || is_active_sidebar( 'spacious_business_page_middle_section_right_half_sidebar' )) {
?>
<! --<div class="clearfix"> -->
<div class="tg-one-half">
<?php
// Calling the business page middle section left half sidebar if it exists.
if ( !dynamic_sidebar( 'spacious_business_page_middle_section_left_half_sidebar' ) ):
endif;
?>
</div>
<div class="tg-one-half tg-one-half-last">
<?php
// Calling the business page middle section right half sidebar if it exists.
if ( !dynamic_sidebar( 'spacious_business_page_middle_section_right_half_sidebar' ) ):
endif;
?>
</div>
<div class="clearfix"></div>
<?php
}
if( is_active_sidebar( 'spacious_business_page_bottom_section_sidebar' )) {
// Calling the business page bottom section sidebar if it exists.
if ( !dynamic_sidebar( 'spacious_business_page_bottom_section_sidebar' )):
endif;
}
?>
</div>
I have also added following code widget.php which is given below:
// Registering Business Page template top section left half sidebar
register_sidebar( array(
'name' => ( 'Business Top left Sidebar', 'spacious' ),
'id' => 'spacious_business_page_top_section_left_half_sidebar',
'description' => __( 'Shows widgets on Business Page Template Top left Section.', 'spacious' ).' '.( 'Suitable widget: TG: Services, TG: Call To Action Widget, TG: Featured Widget', 'spacious' ),
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => ''
) );
// Registering Business Page template top section right half sidebar
register_sidebar( array(
'name' => __( 'Business Top right Sidebar', 'spacious' ),
'id' => 'spacious_business_page_top_section_right_half_sidebar',
'description' => __( 'Shows widgets on Business Page Template Top right Section.', 'spacious' ).' '.__( 'Suitable widget: TG: Services, TG: Call To Action Widget, TG: Featured Widget', 'spacious' ),
'before_widget' => '<section id="%1$s" class="widget %2$s clearfix">',
'after_widget' => '</section>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>'
) );
but it is not showing the result instead it is throwing error.what is wrong????

wp query not working with custom post type > category

I'm using html5-blank for my theme.
all queries work fine when pulling from standard wordpress post type... it breaks when trying to pull from 'html5-blank' post type.
Here's the query:
<?php $my_query = new WP_Query('category_name=spotlight&showposts=2');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!-- pull thumbnail image -->
<article class="article_wrap">
<div class="widget_thumb">
<a href="<?php echo get_permalink(); ?>">
<?php echo get_the_post_thumbnail(); ?>
</div>
<h1 class="widget_title"><?php the_title(); ?></h1>
<p class="widget_spot_description"><?php the_excerpt(); ?></p>
</article>
<?php endwhile; ?>
here's functions.php:
function create_post_type_html5()
{
register_taxonomy_for_object_type('category', 'html5-blank'); // Register Taxonomies for Category
register_taxonomy_for_object_type('post_tag', 'html5-blank');
register_post_type('html5-blank', // Register Custom Post Type
array(
'labels' => array(
'name' => __('HTML5 Blank Custom Post', 'html5blank'), // Rename these to suit
'singular_name' => __('HTML5 Blank Custom Post', 'html5blank'),
'add_new' => __('Add New', 'html5blank'),
'add_new_item' => __('Add New HTML5 Blank Custom Post', 'html5blank'),
'edit' => __('Edit', 'html5blank'),
'edit_item' => __('Edit HTML5 Blank Custom Post', 'html5blank'),
'new_item' => __('New HTML5 Blank Custom Post', 'html5blank'),
'view' => __('View HTML5 Blank Custom Post', 'html5blank'),
'view_item' => __('View HTML5 Blank Custom Post', 'html5blank'),
'search_items' => __('Search HTML5 Blank Custom Post', 'html5blank'),
'not_found' => __('No HTML5 Blank Custom Posts found', 'html5blank'),
'not_found_in_trash' => __('No HTML5 Blank Custom Posts found in Trash', 'html5blank')
),
'public' => true,
'hierarchical' => true, // Allows your posts to behave like Hierarchy Pages
'has_archive' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'thumbnail'
),
'can_export' => true, // Allows export in Tools > Export
'taxonomies' => array(
'post_tag',
'category'
) // Add Category and Post Tags support
));
}
I'm checking the category box in the custom post type but the query does not populate the post. It only shows the posts from the standard post type.
Noooooooo!
You should specify the post type in the wp query:
$my_query = new WP_Query('category_name=spotlight&posts_per_page=2&post_type=html5-blank');
Edit: replaced deprecated showposts by posts_per_page

Different sidebars for different pages on Wordpress

I'm trying to design a theme on WordPress (version 3.3.2) but I am having a few problems in having the sidebar display a different set of widgets on certain pages.
I have tried several online tutorials and this one in particular http://www.rvoodoo.com/projects/wordpress/wordpress-tip-different-sidebars-on-different-pages/ but unfortunately there is no change in the sidebar when I move to a different page
I registered two sidebars on my functions.php as shown below, one which I would consider as main, and the other as a custom sidebar, and I also added different widgets to these sidebars.
<?php register_sidebar( //register sidebar
array(
'name' => 'Right-side',
'before_widget' => '<div class="rightwidget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
register_sidebar( //register second sidebar
array(
'name' => 'Second-right',
'before_widget' => '<div class="rightwidget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
?>
Following that, I created the files sidebar.php and sidebar-second.php to be able to call them.
sidebar.php
<div id="sidebar">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right-side')) : ?>
<h3 class="widget-title">No widget added</h3>
<p> Please add some widgets</p>
<?php endif; ?>
</div><!--ends sidebar-->
sidebar-second.php
<div id="sidebar">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Second-right')) : ?>
<h3 class="widget-title">No widget added</h3>
<p> Please add some widgets</p>
<?php endif; ?>
</div><!--ends sidebar-->
And then I added replace my <?php get_sidebar() ; ?> statement with following conditional
<?php if( is_page('225') ) : ?>
<?php dynamic_sidebar('second'); ?>
<?php else : ?>
<?php get_sidebar() ; ?>
<?php endif ; ?>
However only the widgets added to the sidebar.php are displayed on every page. Any help on how I could change this, or pointers on what I could be doing wrong. Thanks.
I looks like you are using <?php dynamic_sidebar('second'); ?> where you should be using <?php get-sidebar('second'); ?>
What get_sidebar('foo') does is look for a file named 'sidebar-foo.php' in the root directory of your theme and includes it. dynamic_sidebar('bar'), on the other hand, looks for a sidebar registered with:
<?php register_sidebar( array( 'name' => 'bar' ... ) ) ?>
Hope this helps!
Why don't you use the Custom Sidebar Plugin?
It's really easy to use and does not need any coding
You have two sidebars. when you want to use the sidebar-second file on a particular page, instead of calling
<?php get_sidebar('second') ; ?>
TRY
<?php get_sidebar('sidebar-second.php') ; ?>
this should do the trick