Hey I am using a new theme that is not giving me any footer for display on any of the pages. It is a nulled theme in Wordpress. Can I add a custom HTML Bootstrap footer to all the pages. I want to add a footer with 5 columns:
Column 1 Logo and short about us below it.
Column 2 Quick links.
Column 3 wp-job-manager plugin updates.
Column 4 facebook posts.
Column 5 instagram gallery.
I searched over wordpress.org and google but could not find the custom code for this. Also, I want to include all the custom code in Bootstrap format. What I have to do to show it correctly can you please suggest?
Also I need the footer to be respoonsive.
The design for the footer is submitted as the image.Footer Custom
inside of your footer.php file, add the following:
<?php wp_footer(); ?>
<footer><!-- the code for your five columns goes here --></footer>
</body>
</html>
And then for each column, you don't want to hard code stuff in, so what is commonly done is to add separate widget areas for each column. See How to Register a Widget Area.
Related
Now i have the footer and header of the main page copied in every page of my site, is there a way to set it somehow to update on every page each time i modify it on index, or to get it from an external source?
For a more advanced approach, you can simply use PHP Includes or Requires.
include ‘filename’;
or
require ‘filename’;
The filename’s will simply be your header and footer pages. I’ll show you an example to get the idea.
Let’s say we have a footer and it looks like this:
<?php
echo “<p>Copyright of Brian. SO
1994-“.date(“Y”).</p>”;
?>
Now be mindful that, like always, you can add attributes to the paragraph in your footer and header and even call style sheets that can style those paragraphs or whatever you’ve got in you footer or header.
Now, to have your page(s) display the footer or header that you’ve made, and in your case, both; simply use the format shown here:
<html>
<body>
<h1>Welcome to my Homepage!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include ‘footer.php’;?>
</body>
</html>
Now, notice that in my example, my footer file is in a .php format rather than an .html, that’s because my footer example contained a PHP specific function to render the current year. If yours is strictly HTML with a CSS style sheet linked to it, simply type ’footer.html’; or whatever your file name is. The header works the same exact way!
You can’t do this with plain HTML. You may use jquery or javascript frameworks though.
Follow this solution here: https://stackoverflow.com/a/18712605/3086531
Im trying to add a link to the infobig2.jpg image in my gallery section. I would also like to add another slide once you enter the gallery. My website is www.24kdesignz.com in the infographic section I want the pic to link to http://vs0022.businesscatalyst.com/
<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->
<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>
<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >
<p>Infographics – An Infographic is a visual representation of data and information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>
</div>
</article><!--End Project Item -->
After inspecting your site it looks like you have a lot of plugins. The portfolio project section from your site's theme is injected using a jQuery library called "Masonry." Inside of your projects assets >> javascript folder there's also a file called "scripts.js" - this is where the theme author injects the images into the portfolio project items.
Solution: Images can't be links. You have to wrap it in an anchor tag. In your specific case, you're going to have to do it using jQuery.
Assuming your HTML markup looks something like this, add a unique id selector to the image you want to become a link:
<li id ="image2">
<img id ="uniqueId" src="/assets/images/infobig2.png">
</li>
Then use jQuery to grab it and wrap it in an anchor tag:
$("#uniqueId").wrap($('<a>', {
href: '/assets/png/' + data.uniqueId
}));
The other solution here would be to just add a link under the image using plain html if you don't feel comfortable editing your theme's jQuery code.
I want to add pages to a blog (in Blogger - https://www.blogger.com/home), but I want a different format and style for each of the pages on the blog.
I tried going to [Blog Name] -> Pages -> New page but the pages that are made uses the template of the main page, including the sidebar and header. Honesty, it looked no different from a blog post.
Can I create a completely blank page and add in all the HTML myself? Or is this not possible with Blogger?
Thanks!!
It is possible, but does require you to go into the editor and do some work.
Blogger uses xml, so you can write conditional tags. So above all of your content you could put the conditional tag, write up all of your HTML and then wrap the whole blog within the else statement.
Within the specific markup you'll need to include the whole tags for the content, like:
<!-- page title -->
<h1><a class='post-link' expr:href='data:i.link'><data:i.title/></a></h1>
<!-- page content -->
<data:i.body/>
otherwise you won't see whatever content you added within the page editor.
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/yourpageurl.html"'>
<!-- specific site markup -->
<b:else/>
<!-- All of the normal markup -->
</b:if>
I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
If you use a sidebar in wordpress, you can put things such as a navigation menu in them.
To place the sidebar in the right container element, you simply call <?php get_sidebar(); ?> within that element, and the sidebar should be placed inside that.
For example, the following code should result in a sidebar within your wordpress footer:
<footer class="footer">
<div id="inner-footer">
<div id="main-content-footer" class="span_16">
<?php get_sidebar(); ?>
</div>
</div>
</footer>
This code will work on pages not integrated with WooCommerce, such as a front page.
On pages with WooCommerce, the code generated by <?php get_sidebar(); ?> will appear outside the footer in the div element #inner-content, which is within the a parent div called #content.
What files are responsible for placing the sidebar code properly in woocommerce? Is it possible that WooCommerce is generating it's own <?php get_sidebar(); ?>? If so, what can I do to make sure my navigation side bar is not affected by WooCommerce?
Thank you all
Seems like this problem has to do with WooCommerce hooks and how their content is wrapped vs. how "normal" themes are laid out.
The simple fix is to use woocommerce_content() to designate your own template for WooCommerce pages. See documentation here:
http://wcdocs.woothemes.com/codex/third-party-custom-theme-compatibility/
Another way to fix this would be to override their sidebar.php file with your own. Documentation here: http://wcdocs.woothemes.com/codex/template-structure/
Make a copy of the simgle-product.php file in your theme directory (same level as functions.php). This is the template for the single product pages. Remove all necessary hooks, including the sidebar hook. Then, refer to this forum: http://phponlinesupport.com/woocommerce-sidebar-t157932.html to finish the job of making your own custom sidebar for just the shop pages.
Note: When creating the sidebar-shop.php file, be sure to include a
Good luck.
This works for me. This code snipet removes WooCommerce sidebar from appearing after #primary block, so you are able to use get_sidebar('shop') in your layouts.
<?php
// in your themes functions.php
/* remove sidebar */
function woocommerce_remove_sidebar_shop() {
if( is_woocommerce() )
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
}
add_action( 'template_redirect', 'woocommerce_remove_sidebar_shop' );
?>