1. Home
  2. Knowledge Base
  3. Installation
  4. Layout customizations and integration into your theme
  1. Home
  2. Knowledge Base
  3. Expand WP-ImmoMakler
  4. Layout customizations and integration into your theme

Layout customizations and integration into your theme

By default, WP-ImmoMakler® uses a responsive layout based on Bootstrap version 3 to display the properties, but can also be used without a Boostrap-based WordPress theme (a modified Bootstrap3 wrapped with .immomakler{} is supplied so as not to affect the CSS of the surrounding WP theme).

The WP-ImmoMakler Child-Skin(-Plugin)

Basically, the presentation can already be customized to a great extent using your own CSS.
WP-ImmoMakler® makes it easy to change the HTML templates in the style of the WordPress child theme logic. For this purpose, WP-ImmoMakler® comes with a so-called "child skin" as a separate plugin(Child Skin Plugin Download). After installing and activating this plugin, you can select the child skin layout under "WP-ImmoMakler® -> Settings".

Now change to the plugin directory  /wp-content/plugins/immomakler/skins/bootstrap3/ and copy only individual files that you want to customize into the child skin plugin while retaining the directory structure. WP-ImmoMakler® now selects the copy for display instead of the file with the same name as the main skin.

Now make changes to the copy according to your wishes. For example, individual data boxes can be reordered or the two-column layout can be distributed differently. The responsive behavior can also be adapted to your own wishes by changing the Bootstrap3 CSS classes.

Exceptions:

  • /wp-content/themes/ihr-theme/immomakler/functions.php becomes before of the functions.php located in the main skin, so the functions in it can be overwritten ("pluggable functions")
  • /wp-content/themes/ihr-theme/immomakler/css/immomakler.css is additionally to The supplied CSS is loaded. Here you can store additional CSS instructions or overwrite existing ones. Please do not copy the complete CSS filebut start with an empty immomakler.css and only insert your own styles.

Child Skin Plugin Download

You can download the Child Skin Plugin here.

Integration into a WordPress theme

Fitting the archive and exposé pages into the theme you are using erfolgt am besten durch Hinzufügen der den Content umgebenden Container-<div>s in die im Child-Skin-Plugin mitgelieferten Dateien /header.php and /footer.phpwhich then apply to both the archive view and the single view. It is best to compare the page source text of another page (e.g. imprint or another simple page) with that of the real estate list and then add the missing HTML to header.php and footer.php.
If you want to differentiate between the views in the PHP files, it is best to use if (is_immomakler_single()){ } else { }.

Alternatively, you can copy the page.php (or the desired template) of the WordPress theme you are using into  /archive-immomakler_object.php and /single-immomakler_object.php and swap the_content() or the entire Loop against the corresponding part from the archive-immomakler_object.php resp. /single-immomakler_object.php from WP-ImmoMakler®.

Note for developers of their own themesYou can also permanently integrate your customizations to WP-ImmoMakler® into your theme by copying the files from the child skin into your theme under /wp-content/themes/ihr-theme/immomakler/ copy.

Further questions and assistance

If you have any questions on this topic, please do not hesitate to contact us!

A basic integration into your theme (fitting into the theme template and layout, colors, single-column vs. multi-column layout, based on our standard layout, demo.) is provided at a flat rate as part of the integration service.

We are also happy to undertake more extensive customizations according to your wishes (subject to a charge based on time and effort).

Article Attachments

Was this article helpful?

Related Articles

Do you have any further questions?

We are also happy to answer your questions individually and personally!
Get in touch with us