How I can make a right sidebar for a wordpress theme and integrate with advanced search like the concept below:
sidebar.php
<?php
/**
* The sidebar containing the main widget area.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package custom
*/
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->
<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
<div id="tertiary" class="widget-area" role="supplementary">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- #secondary .widget-area -->
<?php endif; ?>
style.css for sidebar
#secondary { /* left Sidebar */
width: 18rem;
margin-left: -67rem;
float: left;
position: relative;
}
#tertiary { /* right Sidebar */
width: 18rem;
margin-right: -23rem;
float: right;
position: relative;
}
How I can achieve it in an easy way?
Have a look at the WordPress Codex for information about customizing the sidebar. This page has a lot of information on it about the sidebar: https://codex.wordpress.org/Customizing_Your_Sidebar
If you are asking how to get a menu to expand from the side of the screen, there are many different CSS/JavaScript implementations, but perhaps something like this jQuery Slick Plugin might help: http://www.designchemical.com/lab/jquery-slick-plugin/examples/
If you are asking how to create the custom search functionality, then that is going to be very dependant on the plugins you are using and what you are searching for. This article does give a good overview of getting started with customised search capabilities and custom search forms in WordPress: https://premium.wpmudev.org/blog/build-your-own-custom-wordpress-search/
If you already have your sidebar.php set up in your template file where you want it; it could be index.php,single.php,page.php or whatever
I see two ways of doing it
1 - Install some fancy search plugin and add it your sidebar using Dashboard - Appearance - Widgets area
2 - In your Widget area you can add Html content where you will have your search form OR hardcode it in your sidebar.php OR create search-form.php(where you will have your form) and include it in your sibedar.php or directly to the template file using get_template_part()
here are some useful links:
https://codex.wordpress.org/Function_Reference/get_search_form
https://codex.wordpress.org/Function_Reference/get_template_part
Related
I want to make the header of this WordPress page taller. I found advice here that I should use the following code in the homepage template CSS file:
.full-container {
min-height: 390px;
}
The CSS file looks like this:
<?php
/**
* The template for displaying the home page panel. Requires SiteOrigin page builder plugin.
*
* Template Name: Page Builder Home
*
* #package vantage
* #since vantage 1.0
* #see http://siteorigin.com/page-builder/
* #license GPL 2.0
*/
get_header();
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div class="entry-content">
<?php
if ( is_page() ) {
the_post();
the_content();
}
else if( function_exists('siteorigin_panels_render') ) echo siteorigin_panels_render('home');
else echo siteorigin_panels_lite_home_render();
?>
</div>
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
Where must I put the suggested code in?
In a Child Theme or wp-content/themes/vantage/style.css
The code you showed there as the CSS style is not the style at all, thats a costum page template named "Page Builder Home".
You should open style.css which is found directly on the theme folder. At the very end of style.css add the lines of css:
.full-container {
min-height: 390px;
}
If you dont know how to difference css files from php/html files then you definitely are in the wrong business and you should let the work be done by the pro-s.
having said that, hope my "solution" works for you.
I'm in the process of a building a small WordPress bottom right corner popup. I ran into some trouble. This is my first time building a WordPress plugin. Anyways, I can't figure out how to show it on the front static page of my website. Please help?
This is the only file I have in my Plugin folder. Where is my
mistake?
Here's my code:
<?php
/*
Plugin Name: My First Plugin
Plugin URL: http://www.martinshabacom.ipage.com/test
Description: An awesome facebook popup plugin that will amaze you!
Author: Martin
Version: 1.0
Author URL: http://www.martinshabacom.ipage.com/test
*/
add_action('admin_menu', 'myfirstplugin_admin_actions');
function myfirstplugin_admin_actions() {
add_options_page('MyFirstPlugin', 'MyFirstPlugin', 'manage_options', __FILE__, 'myfirstplugin_admin');
}
function myfirstplugin_admin()
{
?>
<style>
.wrap {
width:100%;
height:auto;
}
.popup {
position:fixed;
bottom:0;
right:0;
width:325px;
height:200px;
background-color:#09f;
}
</style>
<div class="wrap">
<h1>Hello World!</h1><br>
<h4>Hope you like my awesome popup!</h4>
</div>
<div class="popup">
<?php if(is_front_page()) {
Hello world
}
?>
</div>
<?php
}
?>
I think you want to add output to the footer using the wp_footer action, not the admin_menu. The wp_footer is used to add output when the wp_footer() method is called by your theme. It's a useful place for floating elements on the website.
So it would be
add_action('wp_footer', 'myfirstplugin_admin_actions');
and make sure your theme has the <?php wp_footer() ?> line somewhere appropriate.
I have made a static blank page that also shows my website's header/sidebar/footer in it. Now what i am trying to do is get rid of the 'style' that my wordpress template css is forcing me to have on the page i am trying to create.
Here is my code:
<?php
/*
* Template Name: My own page!
* Description: I made a page!
*/
require (dirname(dirname( __FILE__ )).'/wp-load.php');
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<!-- MY CONTENT!!! -->
Hello2.
<h1> hello.</h1>
<p>hello</p>
<input type="submit" name="connect" value="CONNECT" style="height:52px ; width:136px"/>
<p>hi</p>
<!-- -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
Any help appreciated.
You will need to overwrite the styles which are already in the theme. For example, you can give an id to your submit button like <input type="submit" name="connect" value="CONNECT" id="submitbutton"> and then style it according to your needs using CSS, for example:
input#submitbutton {
height: 52px;
width: 136px;
background: blue;
color: white;
}
Same goes for the <h1> tags. Give an <id> to your <h1> tag like <h1 id="hello"> hello.</h1> and then style it according to your needs using CSS, for example:
h1#hello {
color: black;
font-weight: bold;
font-size: 20px;
}
Use of Developer Tools over here will help you quite a lot in order to see how an element would look with your desired styles before actually making any changes to its CSS.
you will need to use something like
get_header('custom-header');
And use a custom header file to only load the stuff you want. You may need to create a custom function to override the scripts included by the theme...
Its driving me crazy as im not code whiz, using a template 'submate' im trying to add a right sidebar on a child theme vantage
<?php
/**
* This template displays full width pages with a page title.
*
* #package vantage
* #since vantage 1.0
* #license GPL 2.0
*
* Template Name: submate
*/
get_header(); ?>
<?php
//get the sidebar
$avia_config['currently_viewing'] = 'page';
if(is_front_page()) { $avia_config['currently_viewing'] = 'frontpage'; }
get_sidebar();
?>
<div class="breadcrumbs">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
<?php get_footer(); ?>
The link for it is; http://www.seasonalharvest.co.uk/recipes/february/
Many thanks for any help :)
Your html structure for article is very bad. You have wrapped your article element within strong element this doesn't make sense as it use for make the text bolder.
Anyway you can add this tiny snippet to your wp-content/themes/your-theme/style.css
article[class*="post"] { /* only post articles */
float: left;
width: 65%;
}
Edit
For specific page only:
.page-id-231 article[class*="post"] { /* only post articles */
float: left;
width: 65%;
}
Try this...
<style type="text/css">
article#post-231 {
float: left;
width: 65%;
}
</style>
I am building a website in wordpress, with the twentythirteen theme. And I want to get rid of the words "this is a blog... (the search bar)... recent posts... recent comments and so forth." But the only page that has any coding for the footer is the footer.php. Here is the coding for the footer.php. Is there anything I am like missing here? Because I am not seeing anything that I can change without the whole footer being removed in general. I am really stuck, can someone out there who can give me some clarity?
<?php
/**
* The template for displaying the footer.
*
* Contains footer content and the closing of the
* #main and #page div elements.
*
* #package WordPress
* #subpackage Twenty_Thirteen
* #since Twenty Thirteen 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php get_sidebar( 'main' ); ?>
<div class="site-info">
<?php do_action( 'twentythirteen_credits' ); ?>
<?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
there are two parts/components in your footer.
A module displayed
credits to WordPress.
if you want to remove side bar remove the code
<?php get_sidebar( 'main' ); ?>
if you want to remove the credits then remove the following code:
<?php do_action( 'twentythirteen_credits' ); ?>
<?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?>
else, remove both of them and you will get a clear footer.
I think what you're trying to get rid of are the default widgets. If that's the case, go to Appearance > Widgets, and drag and drop everything you want to remove off of the 'Main Widget Area' drop-down.
"this is a blog... (the search bar)... recent posts... recent comments This is comes from widget. If you don't want this you need to remove those widget.