I am converting a single page html site into a static wordpress site.
The original html homepage(the only page) mainly uses jquery to drop down a small text area when clicked on an option in the menu far.
Attaching the index.php of my converted theme.
<div class="content" id="content1">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/close.png" style="position:absolute; right:5px; top:5px; width:15px;"/>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/face.png" style="padding-left:15px; padding-top:20px; width:454px;" />
</div>
<div class="content" id="content2">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/close.png" style="position:absolute; right:5px; top:5px; width:15px;"/>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/face2.png" style="padding-right:15px; padding-top:30px; width:453px; height:200px;" />
</div>
and so on ..
I want to add the content in such a way that I should be able to modify it in wordpress app without editing the theme file ? Is it possible ? New to wordpress. Help is appreciated.
Yes you can edit content from wp-admin. In page management under admin you can create pages, then add loop in page.php or your template file it will display the content which you have written in admin.
<?php while ( have_posts() ) : the_post(); ?>
<?php the_title();?>
<?php the_content();?>
<?php endwhile;?>
With the above code you can display page management content on browser.
Related
I create custom theme and I am trying to create a contact form using wpform but for some reasons the form doesn't show on my page
here is a code from the custom theme
<?php
/* Template Name: CallUS*/
get_header();?>
<section>
<div class="u-clearfix u-sheet u-valign-middle-xs u-sheet-1">
<h1>
call us
</h1>
<img
class="u-image u-image-default u-image-1 u-hidden-xs"
src="<?php bloginfo('template_directory');?>/images/---1113.png"
alt=""
data-image-width="800"
data-image-height="972"
/>
</div>
</section>
<?php get_footer();?>
and this picture from the form that I have created using wpform
Way 01:
You must have the_content() function in order to show page contents. I've edited your code so you can see how to do it:
<?php
/* Template Name: CallUS*/
get_header();?>
<section>
<div class="u-clearfix u-sheet u-valign-middle-xs u-sheet-1">
<h1>
call us
</h1>
<img
class="u-image u-image-default u-image-1 u-hidden-xs"
src="<?php bloginfo('template_directory');?>/images/---1113.png"
alt=""
data-image-width="800"
data-image-height="972"
/>
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile; // End of the loop.
?>
</div>
</section>
<?php get_footer();?>
Then you've to select CallUS Page Template from below page:
Way 02:
If you go to the WPForms from the menu then you can see the shortcode column on each row. it will be like [wpforms id="123"]
Copy your design shortcode from there and use that directly into your file like below:
<?php
/* Template Name: CallUS*/
get_header();?>
<section>
<div class="u-clearfix u-sheet u-valign-middle-xs u-sheet-1">
<h1>
call us
</h1>
<img
class="u-image u-image-default u-image-1 u-hidden-xs"
src="<?php bloginfo('template_directory');?>/images/---1113.png"
alt=""
data-image-width="800"
data-image-height="972"
/>
<?php echo do_shortcode('[wpforms id="3306"]');?>
</div>
</section>
<?php get_footer();?>
I have attempted to put my script into a page I have created but can't seem to get the script to work correctly. It is a paginate script which links to the "newsblocks" class. Where do I place the script to make it work?
<?php
/*
Template Name: [Newspage]
*/
get_header();?>
<div id="main" class="defaultContentWidth">
<div id="wrapper-row">
<div id="primary">
<div id="content">
<?php the_breadcrumb();?>
<h1 class="entry-title"><?php the_title();?></h1>
<?php if(have_posts()) :
while(have_posts()) : the_post();?>
<div class="newscont"><?php the_content();?></div>
<?php endwhile;
endif;?>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/javascript/jquery.pajinate.js"></script>
<div class="contnewslist">
<ul class="newsblocks">
<li>
<h2>NEWSLETTER 1</h2>
<i>November 01, 2014</i>
<p>This is the November edition of the newsletter for The Dry Cleaner App. Featuring in this newsletter is ...</p>
<input type="submit" value="Download" id="submit" class="newsdownload">
</li>
For Optimizing the performance of a webpage it's always recommended to put the Javascript file to your footer.
So load your script files in your footer file.
In wordpress you've a footer.php
Change
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/javascript/jquery.pajinate.js"></script>
TO
<script type="text/javascript" src="<?php echo echo get_template_directory(); ?>/javascript/jquery.pajinate.js"></script>
try to add js with get_template_directory_uri()
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascript/jquery.pajinate.js"></script>
and add js to your theme footer.php or in same page footer or where you need
also i think typo here :- jquery.pajinate.js should be jquery.paginate.js
I'm thinking <?php bloginfo('template_directory');?> should be changed to <?php echo bloginfo('template_directory');?> but since you didn't gave us the definition of bloginfo() function we can't really do much..
I have a few nested divs on a website I am creating with the Joomla engine. The problem lies mainly in the fact that the plugins themselves nest 2 divs inside my already created div "banner", meaning I do not have access to these two divs. Within them is the small, rectangular image. This image should help you see my issue (I'd post an embedded image but you know, apparently I need 10 rep):
http://www.nerfarena.net/SiteImage.PNG
I don't want the banner ad butted against the search bar. But the three nested divs will not increase in height no matter what CSS properties I modify. Even #banner won't budge. They all seem to size themselves to the minimum needed (bottom of the search bar + banner ad's height). I'm looking for a way around this so any suggestions would be really appreciated.
Here is the chunk of the php file where the divs I am concerned about are:
`
<!-- Logo -->
<div id="logo">
<?php if ($logo && $logoimage == 1): ?>
<img src="<?php echo htmlspecialchars($logo); ?>" alt="<?php echo $sitename; ?>" />
<?php endif; ?>
<?php if (!$logo || $logoimage == 0): ?>
<?php if ($sitetitle): ?>
<?php echo htmlspecialchars($sitetitle); ?><br/>
<?php endif; ?>
<?php if ($sitedescription): ?>
<div class="sitedescription"><?php echo htmlspecialchars($sitedescription); ?></div>
<?php endif; ?>
<?php endif; ?>
</div>
<!-- Search -->
<div id="search">
<jdoc:include type="modules" name="position-0" />
</div>
<!-- Banner -->
<div id="banner" style= "text-align: right;">
<jdoc:include type="modules" name="banner-position" />
</div>
</div>
`
Try using sibling selectors for CSS. Sometimes it helps me fix the alignments of divs.
I am doing some WordPress theming. I have a #novelsslider div. Inside of #novels, I used this code to get the latest three posts in the "novels" category, inside of the html divs, I used some php functions to get the latest 3 posts and load the html 3 times floated to the left to build a slider:
<!-- slider -->
<div id="novelsslider" class="slider">
<? $novels = get_option('of_novels') ?>
<?php query_posts('category_name=$novels&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderunit">
<?php the_post_thumbnail(); ?>
<div class="novelsslidertitle">
<div class="arrow-left"></div>
<a href="<?php the_permalink(); ?>">
<img class="cross" src="<?php bloginfo('stylesheet_directory'); ?>/images/cross.png"/>
</a>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
</div>
<?php endwhile;?>
<div id="novelsslidebars">
<input type="submit" value="" class="slidebars" id="novelsslidebtnleft">
<input type="submit" value="" class="slidebars" id="novelsslidebtnmiddle">
<input type="submit" value="" class="slidebars" id="novelsslidebtnright">
</div>
</div>
<!-- End novelsslider -->
ow I have some arrows.. I want them when clicked to get a set of previous 3 posts and load them, how can I do such a loop?
To achieve this you can adopt any of these methods :
1- If your posts are not in large number then you can preload them and store in some container which is hidden by default and will appear when you click the next / previous button, like a content slider, but this is a bad approach and not recommended.
2- Use AJAX to load the rest of the posts, this is a good method and will be purely dynamic. Look on the following links to have the idea:
http://wp.tutsplus.com/tutorials/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress/
Wordpress - how can I fetch more posts via AJAX?
So I am working on my first wordpress site...
I am having a go at converting http://www.benjaminpotter.org/fleet/
to wordpress > http://www.benjaminpotter.org/test/
So there are already a few issues, but one of the things is that I am wanting to call content into the "about us" section on the index page via wordpress to act as a CMS.
This is an image of the back end:
nevertheless it ends up with no content in that section:
this is most likely because I need to put in a bit of code into the page of the website.
This is the current code for that page, and I have commented where I want to call the content mannaged bit... thanks for the help!
<? /* Template Name: Home Page
*/ ?>
<?php get_header(); ?>
<div id="tagline"></div>
<div id="sliderbox">
<img src="<?php bloginfo('template_url'); ?>/images/index/slider/slider_1.jpg" width="1000" height="466" alt="Don't settle for less" />
<img src="<?php bloginfo('template_url'); ?>/images/index/slider/slider_2.jpg" width="1000" height="466" alt="Don't settle for less" />
<img src="<?php bloginfo('template_url'); ?>/images/index/slider/slider_3.jpg" width="1000" height="466" alt="Don't settle for less" />
<img src="<?php bloginfo('template_url'); ?>/images/index/slider/slider_4.jpg" width="1000" height="466" alt="Don't settle for less" />
</div>
<a id="arrow2" class="arrow"></a>
<a id="arrow1" class="arrow"></a>
<a href="order.php" id="car_logo_slider" onmouseover="tooltip.show('');" onmouseout="tooltip.hide();">
<img src="<?php bloginfo('template_url'); ?>/images/index/car_slider/cars1.jpg" width="1001" height="86" alt="cars" />
<img src="<?php bloginfo('template_url'); ?>/images/index/car_slider/cars2.jpg" width="1001" height="86" alt="cars" />
<img src="<?php bloginfo('template_url'); ?>/images/index/car_slider/cars3.jpg" width="1001" height="86" alt="cars" />
</a>
<div id="wrapper-contunue">
<div id="mission_vision_header"></div>
<? include('inc/quickcontact.html'); ?>
<div id="mission_vision_text">
<!-- THE CONTENT MANAGED BIT! -->
<!-- THE CONTENT MANAGED BIT! -->
<!-- THE CONTENT MANAGED BIT! -->
<!-- THE CONTENT MANAGED BIT! -->
<!-- THE CONTENT MANAGED BIT! -->
</div>
<div style="margin-top:450px;" class="seperator"></div>
<div id="our_process" class="highlighed_div">
<div id="our_process_header"></div>
<div id="initial_text_our_process">
Here at Fleet Avenue, we have a simple and straight forward process towards acquiring our cars for you. This four step process is fast and effective, consisting of the following steps:
</div>
<div id="our_process_stages_graphic"></div>
<div id="explanatiory_text_our_process">
<div id="process_inquire">
<a id="inquire_button" href="order.php"></a>
</div>
</div> <?php get_footer(); ?>
<?php echo get_content(); ?>
Or
<?php
global $post;
echo $post->post_content;
?>
i believe you need to wrap you call to the_content() in the Wordpress loop
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_content();
} // end while
} // end if
?>
this is a very basic example if you make other calls later you will need to reset the query call after this one.
more info here: https://codex.wordpress.org/The_Loop