WordPress and Visual Composer custom page template - wordpress

I really hope somebody can help me.
I'am working with visual composer and whould like to create a template to use on some page's.
I whant to create the first section in pure code and save it in my theme's as a template file.
Then when i pick this template in the page editor, i whould like to use visusal composer, but content made with composer should go below, what i have done in my theme's templatefile.
So if my template file in my theme folder contains a big image and some buttons, then i whant to output visual composer content below it.
Is that at all possible.?
When i try to pick another template file then the default i just get a blank output containing header and footer but no content from visual composer. When i use the default template, all works.
I whant to create a file where i can tell visual composer where to output content, hope it makes sense.
Kind regards
Dannie

Yes this is possible.
Below is a code-example of the template file where you can add your custom code wherever you like.
Name your file like this example-page.php
The ID's and classes are of course optional.
<?php
// Template Name: Your name
get_header(); ?>
<!-- Your custom code goes here -->
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container">
<!-- Or here, if you want it inside your container -->
<div>
<?php
while ( have_posts() ) : the_post();
the_content(); // Will output the content of visual composer
endwhile; // End of the loop.
?>
</div>
</div><!-- END container -->
</main><!-- #main -->
</div><!-- #primary -->
Need more instructions? Please let me know :)

Related

Drupal - Block body is not saved/shown

i added this in my Drupal theme:
<div id="sidebar">
<?php print $sidebar; ?>
</div>
Additionally I added this in the .info file:
regions[sidebar] = Sidebar
I then created a new block with "Add block" in the admin panel and assigned the created Block to the sidebar. Unfortunately everything i wrote in the block body is not saved and therefore the sidebar does not show any contents. If I update the block body and click on save and go into edit mode to have a look, the block body is empty.
Anybody knows why this happens and how i can solve this?
Thanks.
If this is in your page.tpl.php, you should be using $page['sidebar'] rather than just $sidebar. You also have to call render() on the region. Lastly, it's a good idea to check if it's defined first. For instance:
<?php if($page['sidebar']): ?>
<div id="sidebar">
<?php print render($page['sidebar']) ?>
</div>
<?php endif ?>
Don't forget to clear the cache after adding a new region as well.
See the Bartik theme's page.tpl.php for a more complete example: http://cgit.drupalcode.org/bartik/tree/templates/page.tpl.php.

How do I create different editable sections within a WordPress page?

I have been building my first theme on WordPress and have run into problem while adding content into different sections.
My HTML is somewhat like this,
<div id="maintext">
<-- Text -->
</div>
<div id="products">
<-- Text and Images -->
</div>
<div id="about_company">
<-- Text boxes -->
</div>
How do I make sure the content added via the WordPress editor falls under the respective divs ? For the "maintext" div I'll load the content from the page itself but how do I add content to the other 2 divs dynamically ?
I searched on a couple of forums and many suggested to add content using widgets, is there any way it can be done without using widgets ?
Any help will be gladly appreciated.
Unfortunately adding multiple editable fields in a single page is not particularly easy using WordPress by itself.
Many WP devs I know (myself included) rely on the Advanced Custom Fields Plugin for additional content fields.
The steps to make this happen:
1) Install the ACF the plug.
2) In the settings area for ACF create some new fields.
3) Assign the new fields to appear for a specific page or set of pages.
4) Update your page-template for the given page(s) so that the new fields are displayed.
For instance you might create a set of standard wysiwyg fields and then assign them to the 'overview' page. Let's call these fields: main_text, products_info and about_company. Once the fields have been created and assigned to a page, when you edit that page the additional fields will be available to edit.
For these new fields to be seen by visitors, they must be added to the page-template you use for your overview page. The code could be something like this:
<div id="maintext">
<!-- Text -->
<?php if(get_field('main_text')){ //if the field is not empty
echo '<p>' . get_field('main_text') . '</p>'; //display it
} ?>
</div>
<div id="products">
<!-- Text and Images -->
<?php if(get_field('products_info')){ //if the field is not empty
echo '<p>' . get_field('products_info') . '</p>'; //display it
} ?>
</div>
<div id="about_company">
<!-- Text boxes -->
<?php if(get_field('about_company')){ //if the field is not empty
echo '<p>' . get_field('about_company') . '</p>'; //display it
} ?>
</div>
There are lots of good examples here. If you are feeling really ambitious, rather than install the plugin you could even include ACF directly in your theme.
You've got three options I believe:
Create a widget area where you can then display the content in a text widget: http://codex.wordpress.org/Function_Reference/register_sidebar
Create a template where you then get the content of a different page: http://codex.wordpress.org/Page_Templates#File_Folders
Create a new meta box for all your pages: http://codex.wordpress.org/Function_Reference/add_meta_box
I believe that the thing you are looking for is option 2. The others are more full-site oriented, if you want the extra content to show up on every single page.
If you are writing the theme, maybe you would like to consider using a WordPress Framework so you don't have to start from scratch.
If that is not the case, think of the end user. How will they add sections to pages and posts? Will they have to move across places within the WordPress UI, or would they rather user short codes?
My recommendation is to build a plugin that render the section within the document content. Or widget content if that is the case.
I wrote a little piece of code to illustrate how you can accomplish such a thing, and also because I kind of need it right now :D. You can find it on github here https://github.com/lionpage/Front-Office-Document-Sections
Hope this helps
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php // echo wp function to get product data; ?>
</div>
<div id="about_company">
<?php // echo wp function to get about companydata; ?>
</div>
I've run into this issue several times now, and while the question is 3 years old, I think it's still rather current. I've succesfully used the Multiple Content Blocks plugin sometimes now:
https://ltz.wordpress.org/plugins/multiple-content-blocks/
After installing the plugin, you can just include the_block in your template:
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php the_block('products') ?>
</div>
<div id="about_company">
<?php the_block('company') ?>
</div>
hi im currently developing a theme with that set up.
there are two ways to achieve this:
widgetized and fixed admin panel (customizer options)
i am using the two in my themes
if widgets
create a .php file that includes the widgets sections
create a widget for that section
if fixed in admin panel
you have to include the .php section in your functions.php
edit * advantage of widgetized is you can arrange them just like in a regular sidebar
Was struggling with this, and did not want to use a plugin. The only WordPress native option I found was to use Custom Fields. This works, but only for text, and is rather cumbersome.
The other non-plugin option is to simply use HTML in the WordPress editor, but this is of course far from ideal either.
Finally I gave up, and opted for the Advanced Custom Fields plugin as well.

Problems with img src and template pages Wordpress

I am building a Wordpress website from HTML/CSS/JS templates i made earlier. However this is my first time using it and im really struggling. There are plenty of resources and solutions however none seem to be working for me, for example; one tutorial pointed out you could create template pages if you go into your management screen > pages > add new > page attributes > template. But under page attributes is only "order" although it does claim there should be a template bit if you click help.
I've managed to link my stylesheet but none of my images are appearing. They are all in a folder named images within my theme directory.
In my external stylesheet i have:
body{
background:url("images/subfolder/image01.jpg");
}
I have also tried:
body{
background-image:url("images/subfolder/image.jpg");
}
In my html I have:
<img src="<?php echo get_template_directory_uri(); ?>/images/subfolder/image02.png" alt="DESCRIPTION" />
I have also tried:
<img src="<?php bloginfo('template_directory'); ?>/images/subfolder/image02.png" alt="DESCRIPTION" />
I can't seem to get any of these up.
Here is the deal:) Your folder structure "must" look like this
-Yourtheme Folder
index.php
style.css
page.php
single.php
...other files
-images (images folder)
-js (js folder)
So if you are developing a theme full image path will not help you much because you simply don't know how will your clients domain look, like it can be http://www.mydomain.com/somefolder/ but it can also be http://www.mydomain.com/somefolder/subfolder/anothersubfolder so to access your images use relative paths like this:background-image:url('../images/myimage.jpg'); that way images will work no matter how your domain path will look.
Now to templates:)
In order to wordpress recognize that you are having a template create a file and name it mycooltemplate.php (you can name it however you want)
Your first line inside your template file must read something like this:
<?php /*Template name: This is my cool template*/
?>
That way wordpress will know that you are using a template and you can access it inside
management screen > pages > add new > page attributes > template
So to give a real world example let's create our first template shall we?
We will now create an simple archive template.
Open your text editor and add this code
<?php
/*
Template Name: My Cool Archives Template
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php get_search_form(); ?>
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_categories(); ?>
</ul>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Save it as archives.php (name it however you want) and upload it to your theme folder. So now your folders should look like this:
-Yourtheme Folder
index.php
style.css
page.php
single.php
archives.php (your first template yeeey!!)
...other files
-images (images folder)
-js (js folder)
Hope this helps...
Try specifying the full path to the themes directory from your web root.
eg. /wp-content/themes/[yourtheme]/images/subfolder/image01.jpg
The image paths should work in your CSS but in your HTML/PHP you will need to use something like
<img src="<?php bloginfo('stylesheet_directory'); ?> /images/subfolder/image02.png" />

Same editable region/content same on all pages

I'm working on this website in WordPress and I want the content with the title "Featured Business" that's on the sidebar to appear on all pages. I created a template for it but it doesn't display when called. The code is as shown below.
<div id="ftb">
The content
</div>
<!-- End FTP -->
and I called it with <?php get_ftb(); ?> But it doesn't show.
If you want to display a chunk of html that's part of the sidebar (but not the entire sidebar), I recommend to place it on functions.php, like this:
<?php
function get_ftb() {
?>
<div id="ftb">
The content
</div>
<!-- End FTP -->
<?php } ?>
After that you'll be free to call it with get_ftb();
If you just need to call the entire sidebar, use get_sidebar() instead.

Drupal front page - two columns for most recent news

I have graphical project of three-column Drupal front page which has first column for one piece of custom content and two other colums designed for most recent news (one content type) as it is shown on image below:
I am quite new to Drupal and so far I created my own page.front.tpl.php in my PHPTemplate theme with regions like header, footer, menu, search_box etc and content of course. Now I have problem with $content region, in which there should be columns as I described above. My question is: How do I style them (CSS? somewhere in Drupal's admin? use separate blocks? Some module?) to look like in project?
page.front.tpl.php fragment:
<?php if ($content): ?><div class="content-middle"><?php print $content; ?></div><?php endif; ?>
Output simplified HTML structure (so far only two most recent news), I want to style this somehow:
<div class="content-middle">
<div class="node">
<h2 class="title">
<div class="content">
<div class="node">
<h2 class="title">
<div class="content">
You can create 3 new sections in your theme. Modify your .info file (for example MyThemeName.info) and write the following :
regions[content_center_left] = Left Sidebar
regions[content_center_middle] = Middle Sidebar
regions[content_center_right] = Right Sidebar
The next step is to modify your page.tpl.php or if you want these sections to be available only in front page you can modify page-front.tpl.php. Write the following where you want the sections to be displayed:
<?php if ($content_center_left): ?>
<div class="content-left">
<?php print $content_center_left?>
</div><!-- /content_center_left -->
<?php endif; ?>
<?php if ($content_center_middle): ?>
<div class="content-middle">
<?php print $content_center_middle?>
</div><!-- /content_center_middle -->
<?php endif; ?>
<?php if ($content_center_right): ?>
<div class="content-right">
<?php print $content_center_right?>
</div><!-- /content_center_right -->
<?php endif; ?>
Now you can create your views (as blocks) and display them in these sections.
I recommend using the Panels module.
From the project page:
The Panels module allows a site administrator to create customized
layouts for multiple uses. At its core it is a drag and drop content
manager that lets you visually design a layout and place content
within that layout. Integration with other systems allows you to
create nodes that use this, landing pages that use this, and even
override system pages such as taxonomy and the node page so that you
can customize the layout of your site with very fine grained
permissions.
Agreed with Laxman 13 , Panels is definitely the way to go, you could double it with the Views module , which would allow you to retrieve the most recent news or whatever query you may have for you content display.

Resources