I'm new to WordPress and it's all complicated to me, but a client has asked I design a WordPress compatible theme for him from the given theme. I've got most of the bits and bobs done but I still don't understand how I'd get wordpress to output custom html in the way I wish... For example, I have this code here which is to be a "widget" on the sidebar, however I can't find out how I'd get wordpress to output a code similar to this so that it'd be compatible with the theme..
<div class="panelfive" id="panel3">
<h4>WIDGET NAME</h4>
<div id="panel2-body" class="panel_body">
<ul>
WIDGET CONTENT
</ul>
</div>
</div>
Usually themes will have a sidebar.php or similar, but it's not really necessary unless you want to make it modular. A wordpress theme is really just PHP, so you can throw that HTML in page.php and it will load anytime a page is loaded.
Check out a couple of references:
General reference for theme development--many pages and sub-pages: http://codex.wordpress.org/Theme_Development
A visual representation of what a wordpress theme looks like, and the related files: http://yoast.com/wordpress-theme-anatomy/
Related
The website I work on daily requires me to input a lot of markup via a WYSIWYG editor. The more complex a page gets though, the more of a pain it is to code everything within the WYSIWYG editor. So, often I end up temporarily editing a page-template within Atom, where I can use nice things like autocomplete, tag auto-closing and Emmett, and also get a live preview as I change them, using Codekit. Then I can just cut and paste the resulting markup into the WordPress editor. My issue is that shortcodes don't work within this process since they are not processed within the PHP file so live preview won't work.
// The wordpress editor renders this
[grid class="center-xs]Hello World[/grid]
// Like this
<div class="container">
<div class="row center-xs"> Hello World</div>
</div>
// PHP files/Atom just render it like this
[grid class="center-xs]Hello World[/grid]
Long story short, I want to edit my code in an external code editor for efficiency's sake, but I also want to use shortcodes for consistency and maintainability's sake.
Any idea how I can do that?
You can't.
You can't simply take just the contents of the WYSIWYG editor and use it as a WYSIWYG editor from Atom.
You can, however;
Take your code from your WordPress WYSIWYG editor.
Put it into your editor, Atom.
Edit it in your editor, Atom.
Put it back into your WordPress WYSIWYG editor in WordPress and save it.
Best solution
Your best bet is to create a custom page template using PHP for the specific page and then use <?php echo do_shortcode( '[grid class="center-xs]Hello World[/grid]' ); ?> inside there.
I am trying to import a page I made in bootstrap into Wordpress and I can't seem to figure it out.
I would like someone to give me some hands-on support if they have the time. I get different results with different attempts.
I changed my index.html to home.php and suddenly the entire site goes down. Restored it again and did something else and then the site showed up without its CSS. i understood i had to create a functions.php file where i call the stylesheets but im not getting any further.
What do i need to do to succesfully import a bootstrap page as theme in wordpress?
You need to create a WP theme, or just a WP page template (in case of just one page.)
https://developer.wordpress.org/themes/template-files-section/page-template-files/
In your current theme, if you have page.php , duplicate it by saying e.g. page-custom.php
In the template header section name the template:
<?php /* Template Name: Example Template */ ?>
Below it add your bootstrap page's code, you may need to fix paths to css/js files but I am sure you will figure that out by googling.
Once you have that page as WP template. Now create a page in WordPress to which you want to apply that bootstrap template.. and in the page edit sidebar, there is section you can select that custom template you created.
see this photo:
https://developer.wordpress.org/files/2014/10/basics-page-templates-03.png
Now if you will visit the page on the front-end , that page will have bootstrap design applied from your custom template.
i'm using the twentytwelve theme and i have to write custom content into my example template.
I want to maintain my header content so the main structure is the following
header = id page, wrapper
ex.page = primary, content
footer = close wrapper, close id page
If i have understood correctly, if i want to insert content into the middle of my page i have to do it into my template page (that is a copy of the main page.php), that is in the middle between my header and my footer
For example i want to insert a div into which insert the loop of such category.
The problem is that it displays me nothing, like i've wrote nothing. I can only see the contents if i erase all the originary div, but it's not what i want to do, just because the only div is the page which is my container.
I can't catch what i have to do.
Can you tell me what i forgot to do?
Thanks,
Alex
page.php is a "master" document. header.php, footer.php and (if it exists) sidebar.php are all imported into page.php. Twenty Twelve also uses atomized content templates. You may need to add your div to content-page.php, which is also imported into page.php. content-page.php is used inside the wordpress loop, and encapsulates the code that pulls in the actual article elements from the wordpress database.
If you are trying to add straight HTML to the templates, ensure that you are not adding code between the php brackets:
<?php // don't add html here ?>
<div>do add html here</div>
Depending upon the type of wordpress page you are trying to display, you may need to consult the Wordpress Template hierarchy to determine the proper Wordpress naming convention for your template file (the copy of page.php).
Technically speaking, everything in content-page.php can be put into page.php replacing the get_template_part function. All the 'content' pages are totally not required and can be combined into one file if you want simplicity.
In my opinion, it's easier to start from scratch when learning Wordpress rather than try and re-work something. The default wordpress themes don't lend themselves to be beginner friendly.
I am currently building a new theme for my site and am kind of stuck not knowing the proper way to link pages together. What is the proper way to direct visitor to another page if I were to write the link straight into footer.php?
Let's consider the following inside footer.php:
?>
A Link
<?php
That would work well up until I were to change my permalink structure to something else.
What is the proper way to do it(without using WP built in menus or anything similar)?
You can use get_permalink assuming your pages are in Wordpress.
See this link: http://codex.wordpress.org/Function_Reference/get_permalink
The above answer is 100% correct, but to save people some time when they stumble upon this question, I took the liberty of writing it out.
<?php echo get_the_title(12); ?>
This covers everything from hover text to dynamic page title, so if you decide to change "Contact" to "Contact Us," you won't have to remember to update the footer.php file.
I have recently started on Drupal (v 7) to create a small company website.
After much reading and watching tutorials, I have started to create my new theme from scratch. I have defined regions and customised the page.tpl.php file to place them into the template (and node.tpl.php etc). All these changes are working and the layout is looking good, and any item I add appears in the main content output.
In my footer region, I have created a block in which I would like links to appear. I have also created a content-type called footer links (with relevant fields) and I have created a couple items of content for it.
The block is showing fine (the title and block body appear). However, despite scouring the documentation, I am not sure what needs to be done to make the items of content (footer links) appear in this block.
Any help appreciated, thanks!
info file snippet for a region
regions[footer_one] = Footer Column One
... and code in page.tpl.php
<div class="one">
<?php if ($page['footer_one']): ?>
<?php print render($page['footer_one']); ?>
<?php endif; ?>
</div>
If you just need simple footer links, no need to create a content type for this, you can simple create a menu and add a menu block in footer.
If you really want to use your own content type for these links, you can create a view (with views module) to display what you want in a block.
About creating a theme from scratch, did you try before to create a sub theme ?
PS: I don't think drupal is a good cms for "small company website".
Views is really powerful and sounds like it will do exactly what you need. Otherwise, you can create a menu for your items and place that menu in your region as well.
Regarding your original code, you'd probably need to grab the information about the nodes from the database in order to construct a list on your own, but views basically does that for you :)